/* ===================================
   Animation (calm / slow reveal)
   既存スタイルは変更せず、html.is-anim 配下のみで上書き
   =================================== */
:root {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --anim-dur: 1.4s;
}

/* ---------- Page load ---------- */
html.is-anim body {
  opacity: 0;
  transition: opacity 1.2s var(--anim-ease-soft);
}
html.is-anim.is-loaded body { opacity: 1; }

html.is-anim .l-header {
  transform: translateY(-100%);
  transition: transform 1.2s var(--anim-ease) 0.6s, background-color 0.6s ease, box-shadow 0.6s ease;
}
html.is-anim.is-loaded .l-header { transform: none; }

/* ---------- FV ---------- */
/* 背景・重なり順は元のまま（overflow/isolation等は付与しない） */

/* 行ごとのマスク表示 */
.a-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.a-line__inner {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.6s var(--anim-ease);
  transition-delay: var(--d, 0s);
}
.is-inview .a-line__inner,
.is-loaded .p-fv .a-line__inner { transform: none; }

/* 上から下へ流れるように透明→表示（グラデーションマスク） */
html.is-anim .a-wipe {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  transition: -webkit-mask-position 3.2s var(--anim-ease-soft) 3.0s, mask-position 3.2s var(--anim-ease-soft) 3.0s;
}
html.is-anim.is-loaded .a-wipe {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

/* ---------- Generic reveal ---------- */
html.is-anim [data-a] {
  opacity: 0;
  transition:
    opacity var(--anim-dur) var(--anim-ease-soft),
    transform var(--anim-dur) var(--anim-ease),
    filter var(--anim-dur) var(--anim-ease-soft),
    clip-path 1.6s var(--anim-ease);
  transition-delay: var(--d, 0s);
}
html.is-anim [data-a="up"]    { transform: translateY(32px); }
html.is-anim [data-a="fade"]  { filter: blur(6px); }
html.is-anim [data-a="left"]  { transform: translateX(-32px); }
html.is-anim [data-a="right"] { transform: translateX(32px); }
html.is-anim [data-a="zoom"]  { transform: scale(0.96); filter: blur(4px); }
html.is-anim [data-a="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); }
html.is-anim [data-a="title"] { letter-spacing: 0.3em; filter: blur(4px); }

html.is-anim [data-a].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}
html.is-anim [data-a="mask"].is-inview { clip-path: inset(0 0 0 0); }
html.is-anim [data-a="title"] { transition-property: opacity, letter-spacing, filter; }
html.is-anim [data-a="title"].is-inview { letter-spacing: 0.04em; }

/* FV CTA（既存transformで中央配置のため個別指定） */
html.is-anim .p-fv__cta {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(50% + 24px));
  transition: opacity 1.4s var(--anim-ease-soft) 2.4s, transform 1.4s var(--anim-ease) 2.4s, box-shadow 0.6s var(--anim-ease), filter 0.6s ease;
}
html.is-anim.is-loaded .p-fv__cta { opacity: 1; transform: translateX(-50%) translateY(50%); }
html.is-anim.is-loaded .p-fv__cta:hover { transform: translateX(-50%) translateY(calc(50% - 2px)); transition-delay: 0s; }

/* ---------- Ambient ---------- */
@keyframes a-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
html.is-anim .p-common-concerns-top-card__icon {
  animation: a-float 5s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
html.is-anim .p-support-item img {
  animation: a-float 6s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

/* ---------- Hover ---------- */
.c-cta-button {
  transition: transform 0.6s var(--anim-ease), box-shadow 0.6s var(--anim-ease), filter 0.6s ease;
}
.c-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
  filter: brightness(1.05);
}
.l-header__nav-link { transition: opacity 0.4s ease; }
.l-header__nav-link:hover { opacity: 0.6; }

/* ---------- Header on scroll ---------- */
html.is-anim .l-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); }

@media (prefers-reduced-motion: reduce) {
  html.is-anim body, html.is-anim .l-header,
  html.is-anim [data-a], .a-line__inner {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}