/* ════════════════════════════════════════════════════════════
   YoutuView モーションシステム（共有）
   - compositorフレンドリー(transform/opacity/filter中心)で60fps維持
   - prefers-reduced-motion で全アニメを無効化
   - 臨場感(テレビ)と爽快感を生む共通エフェクトの土台
   ════════════════════════════════════════════════════════════ */

:root {
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-zap: 520ms;
}

/* ── スクロール連動リビール ───────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); will-change: transform, opacity; }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal--scale { transform: translateY(14px) scale(0.96); }
.reveal--left { transform: translateX(-18px); }

/* ── 共有キーフレーム ─────────────────────────────────────── */
@keyframes yv-pop { 0% { opacity: 0; transform: scale(0.9) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes yv-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes yv-glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0.0); } 50% { box-shadow: 0 0 16px 2px rgba(180,35,24,0.35); } }
@keyframes yv-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes yv-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(220%) skewX(-18deg); } }
@keyframes yv-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes yv-sweep { 0% { transform: translateY(-100%); opacity: 0.0; } 30% { opacity: 0.55; } 100% { transform: translateY(2200%); opacity: 0; } }
@keyframes yv-flicker { 0%, 100% { opacity: 0.9; } 20% { opacity: 0.4; } 40% { opacity: 1; } 60% { opacity: 0.6; } 80% { opacity: 0.95; } }
@keyframes yv-scan { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes yv-spin { to { transform: rotate(360deg); } }

/* ── ボタンの押下フィードバック ─────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn::after {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.6), transparent 60%);
  opacity: 0; transform: scale(0); pointer-events: none;
}
.btn.is-rippling::after { animation: yv-ripple 0.6s var(--ease-out-expo); }
@keyframes yv-ripple { 0% { opacity: 0.6; transform: scale(0); } 100% { opacity: 0; transform: scale(2.6); } }

/* ── フォーカスリング(a11y) ───────────────────────────────── */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.theater :focus-visible { outline-color: var(--crimson); }

/* ── カスタムスクロールバー ───────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ── 共有: 発光ドット/イコライザ ─────────────────────────── */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: bottom; animation: yv-eq 0.9s var(--ease-in-out) infinite; }
.eq i:nth-child(2) { animation-delay: 0.15s; }
.eq i:nth-child(3) { animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.45s; }

/* ── ページ初期フェード ───────────────────────────────────── */
.page-enter { animation: yv-fade-up 0.5s var(--ease-out-expo) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale, .reveal--left { opacity: 1 !important; transform: none !important; }
  .eq i { animation: none !important; }
  .btn::after { display: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}