@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .window-frame {
    /* motion-ok: 開いたとき一度だけ窓の線を引く */
    animation: frame-draw 900ms var(--ease-in-out) 100ms both;
  }

  .window-glass {
    /* motion-ok: 開いたとき一度だけの出方 */
    animation: glass-in 600ms var(--ease-out) 300ms both;
  }

  .window-figure {
    /* motion-ok: 開いたとき一度だけボスが浮かぶ */
    animation: figure-rise 800ms var(--ease-out) 500ms both;
  }

  .hero-logo img {
    /* motion-ok: 開いたとき一度だけの出方 */
    animation: logo-in 500ms var(--ease-out) 950ms both;
  }

  .hero-logo::after {
    /* motion-ok: 開いたとき一度だけ金の光が走る */
    animation: logo-sheen 1000ms var(--ease-in-out) 1350ms both;
  }

  .window-caption,
  .hero-text > *,
  .hero-phone {
    animation: rise-in 300ms var(--ease-out) both;
  }

  .hero-text > :nth-child(1) { animation-delay: 1100ms; }
  .hero-text > :nth-child(2) { animation-delay: 1160ms; }
  .hero-text > :nth-child(3) { animation-delay: 1220ms; }
  .hero-text > :nth-child(4) { animation-delay: 1280ms; }
  .window-caption { animation-delay: 1300ms; }
  .hero-phone { animation-delay: 1340ms; }

  .window-rays {
    animation: rays-turn 90s linear infinite;
  }

  .window-dust span {
    animation: dust-rise var(--life) linear var(--wait) infinite;
  }

  .thesis-bullet {
    /* motion-ok: 弾が線を越えて音符になる説明。3回で止まる */
    animation: bullet-cross 3.2s linear 2.4s 2 forwards;
  }

  .thesis-gem {
    /* motion-ok: 弾が線を越えて音符になる説明。2回で止まる */
    animation: gem-born 3.2s var(--ease-out) 2.4s 2 both;
  }

  .play-card:target {
    /* motion-ok: 上の「スマホで遊ぶ」を押したとき、QR の札がここだと一度だけ知らせる */
    animation: card-call 900ms var(--ease-out);
  }

  .reveal-ready [data-reveal] {
    /* motion-ok: 紹介ページの節が画面に入ったとき一度だけ出る */
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }

  .reveal-ready [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(24px);
  }

  .reveal-ready .stage-card {
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  }

  .reveal-ready [data-reveal]:not(.is-in) .stage-card {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes frame-draw {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes glass-in {
  from { opacity: 0; }
}

@keyframes figure-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(32px); }
}

@keyframes logo-in {
  from { opacity: 0; transform: scale(0.96); }
}

@keyframes logo-sheen {
  0% { opacity: 1; background-position: -150% 0; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: 250% 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes card-call {
  0%,
  60% { background-color: rgba(230, 196, 111, 0.22); }
  100% { background-color: var(--velvet-glass); }
}

@keyframes rays-turn {
  to { transform: rotate(360deg); }
}

@keyframes dust-rise {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(var(--rise)); }
}

@keyframes bullet-cross {
  0% { opacity: 0; transform: translateY(-80px) rotate(45deg); }
  6% { opacity: 1; }
  36% { opacity: 1; transform: translateY(0) rotate(45deg); }
  40%,
  100% { opacity: 0; transform: translateY(0) rotate(45deg) scale(0.9); }
}

@keyframes gem-born {
  0%,
  36% { opacity: 0; transform: scale(0.9); }
  46%,
  100% { opacity: 1; transform: scale(1); }
}