/* Motion layer. Transform and opacity only, one entrance beat, stagger under 0.5 s, no motion that
   carries meaning. Everything that moves sits behind .anim, which boot.js adds only when the
   visitor has not asked for reduced motion. */
:root {
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1); /* small overshoot, for the dealt cards */
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes word-up { from { transform: translateY(105%); } }
@keyframes deal { from { opacity: 0; transform: translateY(2.5rem) rotate(0deg) scale(0.92); } }

.anim .hero__text > :not(h1) { animation: rise 700ms var(--ease-out) both; animation-delay: calc(var(--n, 1) * 90ms + 350ms); }
.anim .hero__text > :nth-child(2) { --n: 1; }
.anim .hero__text > :nth-child(3) { --n: 2; }
.anim h1.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.14em 0; margin: 0 -0.04em -0.14em 0; } /* room for descenders and the tight last letter */
.anim h1[data-split]:not(.split) { opacity: 0; }
.anim h1.split .wi { display: inline-block; animation: word-up 750ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 80ms); }

/* The three cards are dealt onto the table */
.anim .fan img { animation: deal 800ms var(--spring) backwards; }
.anim .fan img:nth-child(2) { animation-delay: 120ms; }
.anim .fan img:nth-child(3) { animation-delay: 240ms; }

/* Scroll reveal: hidden only while .anim is on and the element has not been seen yet */
.anim .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.anim .reveal { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }

/* An area opens: its text rises once, the chevron turns */
.anim .area[open] .area__body { animation: rise 420ms var(--ease-out) both; }
.anim .area summary::after { transition: transform 200ms var(--ease-out); }

/* Press feedback is instant */
.anim .btn { transition: transform 120ms ease-out, box-shadow 120ms ease-out; }

/* Reduced motion wins over everything above */
@media (prefers-reduced-motion: reduce) {
  .anim *, .anim *::before, .anim *::after { animation: none !important; }
}