/* ==========================================================================
   モーション設計｜テーマ「夜が更けていく」
   引き継ぎ書 4章の5演出を実装。prefers-reduced-motion: reduce で完全停止し、
   内容は静的表示にフォールバックする。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* 出現の基本形。--i で時間差（スタッガー）をつける */
  .reveal{opacity:0;transform:translateY(18px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i,0) * 120ms);}
  .reveal.in{opacity:1;transform:none;}

  /* 1. FVの登場シークエンス: コピー→画像→オファー→CTAが順に出現 */
  .fv-seq > *{opacity:0;transform:translateY(16px);
    animation:fvIn 1.1s cubic-bezier(.16,1,.3,1) forwards;}
  .fv-seq > *:nth-child(1){animation-delay:.1s;}
  .fv-seq > *:nth-child(2){animation-delay:.35s;}
  .fv-seq > *:nth-child(3){animation-delay:.7s;}
  .fv-seq > *:nth-child(4){animation-delay:1.05s;}
  .fv-seq > *:nth-child(5){animation-delay:1.3s;}
  .fv-seq > *:nth-child(6){animation-delay:1.5s;}
  @keyframes fvIn{to{opacity:1;transform:none;}}

  /* 2. FV画像の月光のゆらぎ: 9秒周期でopacityとscaleを往復 */
  .ph.breathe::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 78% 18%, rgba(244,243,249,.34), transparent 46%);
    animation:moonBreath 9s ease-in-out infinite alternate;
  }
  @keyframes moonBreath{
    from{opacity:.35;transform:scale(1);}
    to{opacity:.9;transform:scale(1.06);}
  }

  /* 3. 終盤CTAの「日没」: 到達した瞬間、薄明が引いて夜になる */
  .dusk{position:relative;}
  .dusk::before{
    content:"";position:absolute;inset:0;background:var(--moon);
    opacity:1;transition:opacity 2.2s ease;pointer-events:none;z-index:0;
  }
  .dusk.in::before{opacity:0;}
  .dusk .container{position:relative;z-index:1;}
  /* 日没中の文字は、空が暗くなってから浮かび上がる（0.9秒遅延+スタッガー） */
  .dusk .reveal{transition-delay:calc(.9s + var(--i,0) * 150ms);}

  /* 4. 終盤CTAボタンに一度だけ、光が流れる（2.4秒遅延・1回のみ） */
  .sheen{position:relative;overflow:hidden;}
  .dusk.in .sheen::after{
    content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
    animation:sheenOnce 1.4s ease-out 2.4s 1 forwards;
  }
  @keyframes sheenOnce{to{left:120%;}}

  /* 5. 月の満ち欠けスクロールバー（CSS scroll-timeline。非対応ブラウザは自動非表示） */
  .moon-progress{display:none;}
  @supports (animation-timeline: scroll()){
    .moon-progress{
      display:block;position:fixed;right:18px;bottom:18px;z-index:40;
      width:30px;height:30px;border-radius:999px;
      background:var(--moon);
      box-shadow:0 2px 12px rgba(27,36,52,.25);
      overflow:hidden;pointer-events:none;
    }
    .moon-progress::before{
      content:"";position:absolute;inset:0;border-radius:999px;
      background:var(--night);
      transform:translateX(0);
      animation:moonFill linear forwards;
      animation-timeline:scroll(root);
    }
    @keyframes moonFill{
      from{transform:translateX(-18%);}  /* 欠けた月 */
      to{transform:translateX(-100%);}   /* 満月 */
    }
  }
}

/* reduced-motion環境: 演出をすべて止め、内容はそのまま静的に見せる */
@media (prefers-reduced-motion: reduce){
  .dusk::before{display:none;}
  .moon-progress{display:none;}
}