/* Motion, loaded last: transitions, keyframes, and the reduced-motion block.
 *
 *   · only opacity, transform, colour, shadow and filter are animated;
 *   · the first screen does not animate in (LCP) — the hero H1 is static, only the
 *     underline accent and the ball caller move after load;
 *   · the end state is the resting layout (transform: none, opacity: 1).
 */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 350ms; }

.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-slow); }
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }

@keyframes pulse { 50% { opacity: .25; } }
@keyframes drop { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
@keyframes daub { from { transform: scale(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes underline { to { transform: scaleX(1); } }
@keyframes heart { 40% { transform: scale(1.35); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes count-glow { from { color: var(--color-gold); } }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}