/* motion: owned by the motion agent.
   Everything here is scoped to html.mo, which motion.js adds only when JS runs, the page is not ?static,
   and the viewer has not asked for reduced motion. Without that class the site looks exactly as before. */
:root {
  --mo-ease: cubic-bezier(.2,.8,.2,1);
  --mo-spring: cubic-bezier(.3,1.35,.5,1);
  --mo-settle: var(--mo-ease);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Damped springs: a landing that sticks. spring overshoots about 8%, settle about 4%. */
    --mo-spring: linear(0, 0.043, 0.149, 0.29, 0.443, 0.591, 0.725, 0.838, 0.927, 0.994, 1.04, 1.067, 1.081, 1.083, 1.078, 1.069, 1.057, 1.044, 1.032, 1.021, 1.012, 1.005, 1, 0.996, 0.994, 0.993, 0.993, 0.994, 0.994, 0.996, 0.997, 0.998, 1);
    --mo-settle: linear(0, 0.032, 0.112, 0.219, 0.338, 0.459, 0.573, 0.676, 0.766, 0.84, 0.9, 0.947, 0.982, 1.007, 1.023, 1.033, 1.037, 1.038, 1.037, 1.033, 1.029, 1.024, 1.02, 1.015, 1.012, 1.008, 1.006, 1.003, 1.002, 1, 1, 0.999, 1);
  }
}

/* Anchors: every home and sponsor section already clears the fixed header with its own padding, so only
   non-section targets need room under it. */
main [id]:not(section) { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: no-preference) {
  /* Page to page: the header and HUD stay put, the page underneath trades places. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: mo-header; }
  .hud { view-transition-name: mo-hud; }
  ::view-transition-group(mo-header), ::view-transition-group(mo-hud) { animation-duration: .01s; }
  ::view-transition-old(root) { animation: mo-page-out .22s var(--mo-ease) both; }
  ::view-transition-new(root) { animation: mo-page-in .5s var(--mo-ease) both; }
}
@keyframes mo-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes mo-page-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  /* Reveals: the existing fade-up lands with a small settle, and cards in one row come in one after another. */
  html.mo .reveal { transition: opacity .7s var(--mo-ease), transform 1.05s var(--mo-settle), box-shadow .35s var(--mo-ease); transition-delay: calc(var(--mo-i, 0) * 95ms); }
  html.mo .reveal.mo-done { transition: opacity .35s var(--mo-ease), transform .6s var(--mo-spring), box-shadow .35s var(--mo-ease); }

  /* Headlines: each line drops in and sticks the landing, the slant settling to the wordmark's -5deg. */
  html.mo .display.mo-wait .ln { opacity: 0; }
  html.mo .display.mo-in .ln { animation: mo-land 1s var(--mo-spring) both, mo-fade .45s var(--mo-ease) both; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }

  /* Groups inside a card: stats, report items, chips, the home ladder, leaderboard rows. */
  html.mo .mo-seq.mo-wait > * { opacity: 0; translate: 0 16px; }
  html.mo .mo-seq.mo-in > * { transition: opacity .5s var(--mo-ease), translate .9s var(--mo-spring); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }

  /* Leaderboard boards and rows arrive as the data lands. */
  html.mo [data-leaderboards] .lb { animation: mo-rise .9s var(--mo-settle) both, mo-fade .5s var(--mo-ease) both; }
  html.mo [data-leaderboards] .lb li { animation: mo-row .75s var(--mo-spring) both, mo-fade .4s var(--mo-ease) both; }
  html.mo [data-leaderboards] .lb:nth-of-type(2) { animation-delay: 80ms; } html.mo [data-leaderboards] .lb:nth-of-type(3) { animation-delay: 160ms; }
  html.mo [data-leaderboards] .lb:nth-of-type(4) { animation-delay: 240ms; } html.mo [data-leaderboards] .lb:nth-of-type(5) { animation-delay: 320ms; }
  html.mo [data-leaderboards] .lb li:nth-child(1) { animation-delay: 200ms; } html.mo [data-leaderboards] .lb li:nth-child(2) { animation-delay: 245ms; }
  html.mo [data-leaderboards] .lb li:nth-child(3) { animation-delay: 290ms; } html.mo [data-leaderboards] .lb li:nth-child(4) { animation-delay: 335ms; }
  html.mo [data-leaderboards] .lb li:nth-child(5) { animation-delay: 380ms; } html.mo [data-leaderboards] .lb li:nth-child(6) { animation-delay: 425ms; }
  html.mo [data-leaderboards] .lb li:nth-child(7) { animation-delay: 470ms; } html.mo [data-leaderboards] .lb li:nth-child(8) { animation-delay: 515ms; }
  html.mo [data-leaderboards] .lb li:nth-child(9) { animation-delay: 560ms; } html.mo [data-leaderboards] .lb li:nth-child(10) { animation-delay: 605ms; }

  /* Buttons: a springy lift, a quick firm press, and a bouncy release. */
  html.mo .btn { transition: transform .55s var(--mo-spring), box-shadow .4s var(--mo-ease), background .2s; }
  html.mo .btn:active { transform: skewX(-5deg) translateY(4px) scale(.985); transition-duration: .06s; }
  html.mo .arr, html.mo .btn-gold > span::after { transition: transform .5s var(--mo-spring); }
  html.mo .share-btn, html.mo .filter { transition: background .2s, transform .5s var(--mo-spring), box-shadow .3s; }
  html.mo .share-btn:active, html.mo .filter:active { transform: scale(.95); transition-duration: .06s; }

  /* Hanging things */
  html.mo .sp-board { transform-origin: 50% -12px; }
  html.mo .sp-board.mo-swing { animation: mo-swing 1.6s ease-in-out both; }
  html.mo .pass { transform-origin: 50% 30px; will-change: rotate; }

  /* Cards: hovers lift on a spring once they have landed. */
  html.mo .pillar-art img { transition: transform 1s var(--mo-settle); }
  @media (hover: hover) and (pointer: fine) {
    html.mo .link-chips li { transition: translate .5s var(--mo-spring); }
    html.mo .link-chips li:hover { translate: 0 -2px; }
    html.mo .main-nav a { transition: background .2s, color .2s, translate .45s var(--mo-spring); }
    html.mo .main-nav a:hover { translate: 0 -1px; }
    /* Polaroids lean toward the pointer, like picking one up off the board. */
    html.mo .polaroid { transition: transform .5s var(--mo-spring), box-shadow .35s var(--mo-ease); }
    html.mo .polaroid.mo-tilt { transform: perspective(900px) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg)) translateY(-8px) scale(1.02); transition: transform .25s var(--mo-ease), box-shadow .35s var(--mo-ease); }
  }
}

@keyframes mo-land {
  from { transform: translateY(.6em) skewX(-16deg); }
  to { transform: skewX(-5deg); }
}
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-rise { from { transform: translateY(24px); } }
@keyframes mo-row { from { translate: -18px 0; } }
/* A hung board: pushed, swings back past centre, and settles. */
@keyframes mo-swing {
  0% { rotate: 0deg; } 12% { rotate: calc(var(--mo-dir, 1) * 1.7deg); } 30% { rotate: calc(var(--mo-dir, 1) * -1.2deg); }
  48% { rotate: calc(var(--mo-dir, 1) * .7deg); } 66% { rotate: calc(var(--mo-dir, 1) * -.35deg); } 83% { rotate: calc(var(--mo-dir, 1) * .12deg); } 100% { rotate: 0deg; }
}