/* ===== reveal ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===== keyframes ===== */
/* 紙吹雪 */
@keyframes fall {
  0% { opacity: 0; transform: translateY(-10px) rotate(0); }
  8% { opacity: .55; }
  90% { opacity: .35; }
  100% { opacity: 0; transform: translateY(108vh) rotate(360deg); }
}
/* イントロ：進捗リング */
@keyframes ringfill { to { stroke-dashoffset: 0; } }
/* 起動演出：▶→シークバー */
@keyframes stretchToSeek {
  0% { opacity: 0; top: 52%; width: 120px; height: 16px; }
  16% { opacity: 1; }
  72% { opacity: 1; height: 8px; }
  100% { opacity: 0; top: 22px; width: min(900px, 78vw); height: 6px; }
}
@keyframes btnFlatten {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scaleX(2.6) scaleY(.05); opacity: .15; }
}
/* シークバー誘導 */
@keyframes cueArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes seekGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 208, 0, 0); } 50% { box-shadow: 0 0 16px 3px rgba(253, 208, 0, .75); } }
@keyframes knobBounce { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.75); } }
/* HERO スクロール誘導 */
@keyframes sd { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
/* VOICES 自動スクロール */
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* F1キービジュアル／起動アニメ 共通 */
@keyframes glowPulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rayTw { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
/* 案B：疾走ビーム */
@keyframes beamShift { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: .9; transform: translateX(10px); } }
/* R-16 イントロ：再生ボタンのポップ出現／押下可能サイン */
@keyframes introPop { to { opacity: 1; transform: scale(1); } }
@keyframes readyPulse {
  0% { opacity: .5; transform: translate(-50%, -50%) scale(.8); }
  70% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* ===== 低モーション設定 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .track-row { animation: none !important; }
  .play-glow { opacity: .7; }
}