/* =========================================================
   Motion: page transitions, entrance and scroll-reveal animations.
   Everything here is decorative and switched off for reduced motion.
   ========================================================= */

/* ---- Cross-page transitions (View Transitions API; browsers without it just navigate) ---- */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

::view-transition-old(root) { animation: vt-out 160ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 300ms var(--ease) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- Entrance (only during the first moments: motion.js removes .motion-intro,
   so these never override the game's own cell animations like shake / win pulse) ---- */
.motion-intro main > section > *,
.motion-intro main > .container > * { animation: rise-in 520ms var(--ease) both; }
.motion-intro main > section > *:nth-child(2) { animation-delay: 90ms; }
.motion-intro main > section > *:nth-child(3) { animation-delay: 170ms; }
.motion-intro main > section > *:nth-child(4) { animation-delay: 240ms; }
.motion-intro main > section > *:nth-child(n+5) { animation-delay: 300ms; }

.motion-intro .hero-copy > * { animation: rise-in 600ms var(--ease) both; }
.motion-intro .hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.motion-intro .hero-copy > *:nth-child(3) { animation-delay: 170ms; }
.motion-intro .hero-copy > *:nth-child(4) { animation-delay: 250ms; }
.motion-intro .hero-copy > *:nth-child(5) { animation-delay: 320ms; }
.motion-intro .hero-copy > *:nth-child(6) { animation-delay: 380ms; }
.motion-intro .hero-visual { animation: float-in 800ms 180ms var(--ease) both; }

/* Board: axes and cells pop in one after another (delay set per element by motion.js) */
.motion-intro .board .cell,
.motion-intro .board .axis { animation: cell-pop 420ms var(--ease) both; }
.motion-intro .board > :nth-child(2) { animation-delay: 60ms; }
.motion-intro .board > :nth-child(3) { animation-delay: 90ms; }
.motion-intro .board > :nth-child(4) { animation-delay: 120ms; }
.motion-intro .board > :nth-child(5) { animation-delay: 150ms; }
.motion-intro .board > :nth-child(6) { animation-delay: 180ms; }
.motion-intro .board > :nth-child(7) { animation-delay: 210ms; }
.motion-intro .board > :nth-child(8) { animation-delay: 240ms; }
.motion-intro .board > :nth-child(9) { animation-delay: 270ms; }
.motion-intro .board > :nth-child(10) { animation-delay: 300ms; }
.motion-intro .board > :nth-child(11) { animation-delay: 330ms; }
.motion-intro .board > :nth-child(12) { animation-delay: 360ms; }
.motion-intro .board > :nth-child(13) { animation-delay: 390ms; }
.motion-intro .board > :nth-child(14) { animation-delay: 420ms; }
.motion-intro .board > :nth-child(15) { animation-delay: 450ms; }
.motion-intro .board > :nth-child(16) { animation-delay: 480ms; }

/* Lists rendered by JavaScript after load */
.history-list > * { animation: rise-in 420ms var(--ease) both; }
.history-list > :nth-child(2) { animation-delay: 60ms; }
.history-list > :nth-child(3) { animation-delay: 120ms; }
.history-list > :nth-child(4) { animation-delay: 180ms; }
.history-list > :nth-child(n+5) { animation-delay: 230ms; }

/* ---- Scroll reveal (motion.js adds .is-visible) ---- */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Small interaction polish ---- */
.main-nav a { position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--med) var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.card { transition: border-color var(--med), transform var(--med) var(--ease), box-shadow var(--med); }
a.card:hover, .feature.card:hover, .choice:hover .choice-body { transform: translateY(-2px); }
.main-nav ul.open { animation: drop-in 220ms var(--ease); }
.answer-form:not([hidden]) { animation: rise-in 260ms var(--ease); }
.panel-empty { animation: fade 300ms ease; }

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cell-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Reduced motion: show everything immediately ---- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .motion-intro *, .motion-intro *::before { animation: none !important; }
  .history-list > * { animation: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}
:root[data-reduce-motion="true"] .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
:root[data-reduce-motion="true"] ::view-transition-old(root),
:root[data-reduce-motion="true"] ::view-transition-new(root) { animation: none; }