/* =========================================================
   intro.css — 初回表示の入場演出（トップページのみ）

   JS を使わない CSS アニメーションだけで組んでいる。
   スクリプトが止まってもオーバーレイが residual に
   残り続けることがなく、追加の読み込みも発生しない。

   時間割：
     0.00s  黒い幕。ロゴは非表示
     0.20s  ロゴがふわりと現れる
     1.25s  幕が明ける
     1.55s  ヘッダー
     1.70s  メインコピー
     1.95s  ステートメント
   ========================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--c-bg);
  animation: intro-curtain 0.75s ease 1.25s forwards;
}

.intro__logo {
  width: clamp(200px, 34vw, 380px);
  height: auto;
  opacity: 0;
  animation: intro-logo 0.9s var(--ease-out) 0.2s forwards;
}

/* 幕が明ける。visibility も落として操作の邪魔をしないようにする */
@keyframes intro-curtain {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes intro-logo {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   ファーストビューの各要素を順に立ち上げる
   --------------------------------------------------------- */

.header {
  animation: intro-rise 0.8s var(--ease-out) 1.55s both;
}

.hero__lead {
  animation: intro-rise 0.9s var(--ease-out) 1.7s both;
}

.hero__statement {
  animation: intro-rise 0.9s var(--ease-out) 1.95s both;
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   モーションを減らす設定では演出を省く

   base.css は duration だけを潰すため、delay が残ったままだと
   その間コンテンツが見えなくなる。ここで明示的に無効化する。
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }

  .header,
  .hero__lead,
  .hero__statement {
    animation: none;
    opacity: 1;
    transform: none;
  }
}