/* ==========================================================================
   MOTION: reveals, keyframes. Everything is switched off for
   prefers-reduced-motion; the site reads identically without it.
   ========================================================================== */

/* Scroll reveal: panels wipe in from below (motion.js adds .is-in). */
html.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 12% 0); }
html.motion [data-reveal] {
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    clip-path var(--t-slow) var(--ease-out);
}
html.motion .story[data-reveal]:not(.is-in) .story-title { transform: translateY(0.4em); opacity: 0; }
html.motion .story[data-reveal] .story-title { transition: transform 900ms var(--ease-out) 120ms, opacity 900ms var(--ease-out) 120ms; }
html.motion .story[data-reveal]:not(.is-in) .mark { opacity: 0; }
html.motion .story .mark { transition: opacity 1200ms var(--ease-out) 200ms; }

/* Staggered cover index */
html.motion .cover-index li { animation: rise 600ms var(--ease-out) both; }
html.motion .cover-index li:nth-child(2) { animation-delay: 60ms; }
html.motion .cover-index li:nth-child(3) { animation-delay: 120ms; }
html.motion .cover-index li:nth-child(4) { animation-delay: 180ms; }
html.motion .cover-index li:nth-child(5) { animation-delay: 240ms; }
html.motion .cover-index li:nth-child(6) { animation-delay: 300ms; }
html.motion .cover-index li:nth-child(n+7) { animation-delay: 360ms; }
html.motion .cover-day { animation: slam 900ms var(--ease-out) both; }
html.motion .cover-sun { animation: sunrise 1200ms var(--ease-out) both; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes slam { from { opacity: 0; transform: translateY(10%) scaleY(1.2); } to { opacity: 1; transform: none; } }
@keyframes sunrise { from { opacity: 0; transform: translateY(30%) scale(0.85); } to { opacity: 0.9; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%) skewX(var(--skew, 0deg)); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes burst { from { opacity: 1; transform: scale(0.9); } to { opacity: 0; transform: scale(1.35); } }
@keyframes echo {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-8deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); }
  70% { opacity: 1; transform: translate(-50%, -55%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1.1) rotate(-2deg); }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
}