/* =========================================================
   FV (Complete) - staged enter clean
   bg -> (wait) -> sphereWrap(enter up) + shadow(same timing) -> (wait) -> text lines
   - sphere: enter = wrap（translateY）, float = img（animation）
   - shadow: enter only opacity/blur（position is animated as before）
========================================================= */

.fv {
  position: relative;
}

.fv__kv {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

/* =========================================================
   Base background
========================================================= */
.fv__bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  position: relative;
  z-index: 0;
}

/* =========================================================
   Slide backgrounds (REAL SIZE 2600px)
========================================================= */
.fv__bg-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2600px;
  height: 100%;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform-origin: top center;
  will-change: transform;
}

/* ---- 04 ---- */
.fv__bg-slide--04 {
  z-index: 1;
  animation: fv-bg-slide-04 10s linear forwards;
}
@keyframes fv-bg-slide-04 {
  from {
    transform: translateX(-50%) translateX(160px);
  }
  to {
    transform: translateX(-50%) translateX(235px);
  }
}

/* ---- 05 ---- */
.fv__bg-slide--05 {
  z-index: 2;
  animation: fv-bg-slide-05 5s linear forwards;
}
@keyframes fv-bg-slide-05 {
  from {
    transform: translateX(-50%) translateX(120px);
  }
  to {
    transform: translateX(-50%) translateX(235px);
  }
}

/* =========================================================
   Shadow + Sphere (fit = same coordinate)
   - Shadow: absolute image
   - Sphere: wrap handles enter transform, img handles float animation
========================================================= */

/* 影 */
.fv__shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 3;

  /* 初期は非表示 */
  opacity: 0;

  transform: translateY(14px);
  animation: none;
  will-change: transform, opacity;
}

/* 球体：wrap（出現担当） */
.fv__sphere-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 4;

  /* 初期：下にオフセット（出現で0へ） */
  transform: translateY(28px);
  will-change: transform, opacity, filter;
}

/* 球体：img（浮遊担当） */
.fv__sphere {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;

  animation: fv-sphere-float 10.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes fv-sphere-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fv-shadow-follow {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fv-shadow-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =========================================================
   Text overlay (SVG)  ※ overlay自体は常時表示
========================================================= */
.fv__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  filter: none;
}

/* PC only: scale overlay between 1335px and SP breakpoint */
@media (max-width: 1335px) and (min-width: 768px) {
  .fv--pc .fv__overlay {
    transform-origin: center top;
    --overlay-scale: clamp(
      0.82,
      calc(0.82 + (100vw - 768px) * (1 - 0.82) / (1335 - 768)),
      1
    );
    transform: scale(var(--overlay-scale));
  }

  .fv--pc .fv__stack {
    top: 26%;
    transform: translateY(-3%) scale(var(--s));
  }
}

.fv__stack {
  position: absolute;
  top: 33%;
  left: 18%;
  display: grid;
  gap: clamp(8px, 0.9vw, 16px);
  transform-origin: left top;

  /* 1600pxあたりから急に縮む（強め） */
  --s: clamp(0.38, 100vw / 1250, 1);
  transform: scale(var(--s));
}

.fv__svg {
  display: block;
  width: 100%;
  height: auto;
}

.fv__title .fv__svg {
  width: clamp(180px, 40vw, 427px);
}
.fv__lead .fv__svg {
  width: clamp(180px, 38vw, 426px);
}
.fv__text .fv__svg {
  width: clamp(220px, 46vw, 533px);
}

/* =========================================================
   STAGED ENTER
   - bg: 0ms
   - sphereWrap + shadow: +900ms
   - text lines: +1750ms〜
========================================================= */

/* 初期：背景系 + 球体wrap + 影だけ隠す（overlayは隠さない） */
.fv__bg,
.fv__bg-slide,
.fv__sphere-wrap {
  opacity: 0;
  filter: blur(18px);
}

/* 背景：すぐ */
.fv.is-inview .fv__bg,
.fv.is-inview .fv__bg-slide {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 520ms ease,
    filter 900ms ease;
  transition-delay: 0ms;
}

/* 球体（wrap）：背景のあと「下→上」 */
.fv.is-inview .fv__sphere-wrap {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 700ms ease,
    filter 1100ms ease,
    transform 1200ms cubic-bezier(0.18, 0.9, 0.18, 1);
  transition-delay: 900ms;
}

/* 影：球体と同時に出す（最初は薄め→followで自然に見える） */
.fv.is-inview .fv__shadow {
  filter: blur(0);
  transform: translateY(0);
  animation:
    fv-shadow-enter 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    fv-shadow-follow 10.5s ease-in-out infinite;
  animation-delay: 900ms, 2300ms;
}

/* =========================================================
   Text lines (最後に段階表示)
========================================================= */
.js-fv-line {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(14px);
  will-change: opacity, transform, filter;
}

.fv.is-inview .js-fv-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 520ms ease,
    transform 820ms cubic-bezier(0.18, 0.9, 0.18, 1),
    filter 820ms ease;
}

/* テキスト開始を「最後」にする */
.fv.is-inview .fv__title {
  transition-delay: 1750ms;
}
.fv.is-inview .fv__lead {
  transition-delay: 1970ms;
}
.fv.is-inview .fv__text {
  transition-delay: 2190ms;
}

/* =========================================================
   Motion reduction
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .fv__bg-slide,
  .fv__sphere,
  .fv__shadow {
    animation: none !important;
  }

  .fv__bg,
  .fv__bg-slide,
  .fv__sphere-wrap,
  .fv__shadow {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .js-fv-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* PCのみ表示 */
.fv--pc {
  display: block;
}
.fv--sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .fv--pc {
    display: none;
  }
  .fv--sp {
    display: block;
  }
}

/* FV Anniversary logo */
.fv__anniv {
  position: absolute;
  --anniv-w: clamp(96px, calc(100vw * 0.0948), 128px);
  top: 35px;
  left: clamp(
    35px,
    calc(50% + 615px - (var(--anniv-w) / 2)),
    calc(100% - 35px - var(--anniv-w))
  );
  right: auto;
  z-index: 20; /* テキストより上 */
  pointer-events: none;
}

.fv__anniv-img {
  display: block;
  width: var(--anniv-w); /* PC基準 */
  height: auto;
}

.fv__anniv {
  opacity: 0;
  transform: translateY(-6px);
  filter: none;
}

.fv.is-inview .fv__anniv {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 500ms ease,
    transform 700ms cubic-bezier(0.18, 0.9, 0.18, 1),
    filter 700ms ease;
  transition-delay: 2800ms; /* 球体のあと */
}
/* =========================
   FV SP: PERFECT PACK
   - fv__bg = 100% width cover
   - fv__bg-slide = (100% + extra) で右に余らせる
   - 余り分を使って「左→右」にスライドして停止
   ========================= */

/* =========================
   FV SP: crop & position control
   ========================= */
@media (max-width: 767px) {
  body {
    overscroll-behavior-y: none;
  }
  /* FVの見せたい高さ（ここを変えるだけ） */
  /* 1) FVの高さ（基準箱） */
  .fv--sp .fv__kv {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  @supports (height: 100dvh) {
    .fv--sp .fv__kv {
      height: 100dvh;
    }
  }

  /* 2) 画像レイヤーを入れる箱を「.fv__kv全面」に固定 */
  .fv--sp .fv__enter {
    position: absolute;
    inset: 0; /* ←これで高さ100%が確実に一致 */
  }

  /* 3) fv__bg：画面幅いっぱい（トリミングOK） */
  .fv--sp .fv__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
    display: block;
  }

  /* 4) スライド設定 */
  .fv--sp {
    --sp-slide-extra: 47px; /* 右に余らせる量 */
    --sp-slide-dur: 3.2s;
    --sp-slide-delay: 0s;
  }

  /* 5) fv__bg-slide：初期位置を「左にずらす」＝右側を先に見せる */
  .fv--sp .fv__bg-slide {
    position: absolute;
    inset: 0;
    height: 100%;
    width: calc(100% + var(--sp-slide-extra));
    object-fit: cover;
    object-position: left bottom;
    z-index: 2;
    pointer-events: none;
    will-change: transform;

    /* ★ここが肝：最初は左に送って「右側の余り」を見せる */
    transform: translateX(calc(-1 * var(--sp-slide-extra)));
  }

  /* 6) 04だけ動かす：右へ戻して（0へ）停止 */
  .fv--sp.is-inview .fv__bg-slide--04 {
    animation: fv-bg-slide-04-sp var(--sp-slide-dur) ease-out forwards;
    animation-delay: var(--sp-slide-delay);
  }

  @keyframes fv-bg-slide-04-sp {
    from {
      transform: translateX(calc(-1 * var(--sp-slide-extra)));
    }
    to {
      transform: translateX(0);
    }
  }

  .fv--sp .fv__sphere-wrap {
    position: absolute;

    /* ★ ここが重要：inset を使わない */
    left: 0;
    right: 0;
    bottom: 0; /* 画面（親）下基準 */
    top: auto;

    width: 100%;
    height: auto;

    z-index: 4;
    pointer-events: none;

    /* 出現アニメ用（既存を維持） */
    transform: translateY(28px);
    will-change: transform, opacity, filter;
  }

  /* 中の球体画像 */
  .fv--sp .fv__sphere {
    display: block;
    width: 100%;
    height: auto;
  }

  .fv--sp .fv__shadow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center bottom;

    opacity: 0;
    z-index: 0;

    /* ロード時は非表示・アニメ停止 */
    transform: translateY(14px);
    animation: none;
  }

  .fv--sp.fv.is-inview .fv__shadow {
    animation:
      fv-shadow-enter 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
      fv-shadow-follow 10.5s ease-in-out infinite;
    animation-delay: 900ms, 2300ms;
  }

  /* =========================
     SP TEXT: center + SVG width controls
     - 幅%が効かない原因は、各行（h1/p）が内容幅に縮んでいて % の基準が小さいため。
       → 行コンテナを `width:100%` にして、% を `fv__stack` 幅基準にする。
     ========================= */

  .fv__anniv {
    top: 25px;
    right: 20px;
    left: auto;
    transform: none;
  }

  .fv__anniv-img {
    width: 87px;
  }
  .fv--sp .fv__stack {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;

    display: grid;
    justify-items: center;
    gap: 14px;

    /* SPではPC側の縮小計算を無効化 */
    --s: 1;

    /* ★ここ重要：%幅の基準を作る */
    width: 100%;
    max-width: 520px; /* 必要なら 480〜600pxで調整 */
    padding-inline: 18px;
    box-sizing: border-box;
  }

  /* 各行コンテナも幅100%にして、SVGの%が確実に効くように */
  .fv--sp .fv__title,
  .fv--sp .fv__lead,
  .fv--sp .fv__text {
    width: 100%;
    margin: 0;
  }

  .fv--sp .fv__svg {
    display: block;
    height: auto;
    margin-inline: auto;
  }

  /* 各行のSVG幅（SP）は%で直指定） */
  .fv--sp .fv__title .fv__svg {
    width: 55%;
  }
  .fv--sp .fv__lead .fv__svg {
    width: 92%;
    margin-top: 10px;
  }
  .fv--sp .fv__text .fv__svg {
    width: 80%;
    margin-top: 10px;
  }
}