/* Clarity motion polish (docs/design/clarity/brief.md, "motion polish"). Behind the clarity-motion flag: clarity-gate.js says
   clarity-motion:on, clarity-motion.js puts .cm-on on <html> (never under reduced motion), and every rule here names a cm-
   class, so with the flag off this file styles nothing. The idea: the page comes into focus, the way Clarity cleans up a
   chart. Transform and opacity, plus one blur that runs once per piece. */
@media (prefers-reduced-motion:no-preference){

  /* 1. Focus pull: the lockup and the heading sharpen as they rise (the hero copy rise's 40ms stagger), and each band's
     art sharpens as it swings in */
  .cm-on .hero-copy > .lockup{animation:rise 480ms var(--ease-out) backwards,cm-focus 600ms var(--ease-out) backwards}
  .cm-on .hero-copy > h1{animation:rise 480ms var(--ease-out) 40ms backwards,cm-focus 600ms var(--ease-out) 40ms backwards}
  .cm-on.js-motion .band .art picture{transition:filter 820ms var(--ease-out),transform 200ms var(--ease-out)}
  .cm-on.js-motion .band:not(.is-in) .art picture{filter:blur(12px)}

  /* 2 and 3. The deck leans toward the pointer (clarity-motion.js sets --cm-tx and --cm-ty, -1 to 1) and, after the deal,
     floats up and back once (4.8s in all, under WCAG 2.2.2's 5s, then still); it waits while the hero is off screen */
  .cm-on .deck{transform:perspective(1600px) rotateX(calc(var(--cm-ty, 0) * -5deg)) rotateY(calc(var(--cm-tx, 0) * 5deg));
    transition:transform 400ms var(--ease-out);animation:cm-float 2.4s ease-in-out 900ms 2 alternate}
  .cm-on .hero.cm-away .deck{animation-play-state:paused}

  /* 4. Light sweep: once across the front cover after the deal, once across each band's art as it lands */
  .cm-sheen{position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;pointer-events:none}
  .cm-sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:36%;opacity:0;
    background:linear-gradient(100deg,rgba(233,251,255,0) 0%,rgba(233,251,255,.16) 40%,rgba(233,251,255,.3) 50%,rgba(233,251,255,.16) 60%,rgba(233,251,255,0) 100%);
    transform:translateX(-120%) skewX(-14deg)}
  .cm-on .card .cm-sheen::before{animation:cm-sweep 900ms var(--ease-out) 880ms}
  .cm-on .band.is-in .cm-sheen::before{animation:cm-sweep 900ms var(--ease-out) 450ms}

  /* 5. Art tilt and glare under the pointer (mouse only), in place of the hover zoom */
  .cm-glare{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 200ms var(--ease-out);
    background:radial-gradient(circle at var(--cm-gx, 50%) var(--cm-gy, 50%),rgba(233,251,255,.16),rgba(233,251,255,0) 42%)}
  .cm-on .band .art.cm-tilt .cm-glare{opacity:1}
  .cm-on .band .art.cm-tilt picture{transform:perspective(1200px) rotateX(calc(var(--cm-ry, 0) * -4deg)) rotateY(calc(var(--cm-rx, 0) * 4deg)) scale(1.06)}
  .cm-on .band:hover .art.cm-tilt img{transform:none}

  /* 6. City parallax: the candle city drifts at a quarter of the scroll (--cm-py, set on its wrap) */
  .cm-on .cm-drift .city{translate:0 var(--cm-py, 0px)}

  /* 7. Picker tour: once the chart has built, each layer lights in turn with its name */
  .cm-on .pick.cm-touring .chart .layer,.cm-on .pick.cm-touring .chart .candles{opacity:.22}
  .cm-on .pick.cm-touring .chart .cm-lit{opacity:1}
  .cm-on .pick.cm-touring .layers a.cm-lit{border-color:var(--frame-3);background:#122034;transform:translateY(-2px)}

  /* 8. Chips follow the band's copy, 50ms apart; the finale's mark turns in and its steps rise 80ms apart */
  .cm-on.js-motion .band .chips li{transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out);transition-delay:200ms}
  .cm-on.js-motion .band .chips li:nth-child(2){transition-delay:250ms}
  .cm-on.js-motion .band .chips li:nth-child(3){transition-delay:300ms}
  .cm-on.js-motion .band .chips li:nth-child(4){transition-delay:350ms}
  .cm-on.js-motion .band .chips li:nth-child(n+5){transition-delay:400ms}
  .cm-on.js-motion .band:not(.is-in) .chips li{opacity:0;transform:translateY(.5rem)}
  .cm-on .finale .mark{transition:transform 700ms var(--ease-out),opacity 500ms var(--ease-out)}
  .cm-on .finale .steps li{transition:transform 480ms var(--ease-out),opacity 480ms var(--ease-out)}
  .cm-on .finale .steps li:nth-child(2){transition-delay:80ms}
  .cm-on .finale .steps li:nth-child(3){transition-delay:160ms}
  .cm-on .finale.cm-wait .mark{opacity:0;transform:rotate(-90deg) scale(.8)}
  .cm-on .finale.cm-wait .steps li{opacity:0;transform:translateY(1.25rem)}
}
@keyframes cm-focus{from{filter:blur(10px)}}
@keyframes cm-float{to{translate:0 -8px}}
@keyframes cm-sweep{0%{opacity:1;transform:translateX(-120%) skewX(-14deg)}100%{opacity:1;transform:translateX(330%) skewX(-14deg)}}