/* Motion, loaded last. Rules (S5-tech): only opacity, transform, colour, shadow,
 * filter; the first screen is not hidden on load (LCP); the end state is the
 * resting layout; everything stops under prefers-reduced-motion. */

[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* without JS nothing must stay invisible */
html:not(.js) [data-reveal] { 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; }

/* Height is never animated: a row expands through grid-template-rows. */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }

@keyframes shine { 30%, 100% { transform: translateX(120%); } }
@keyframes pop { 40% { transform: scale(1.35); } }
@keyframes kenburns { from { transform: scale(1.12) translate3d(1.5%, 0, 0); } to { transform: scale(1.02); } }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes barIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes fill { from { width: 0; } to { width: 100%; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes floaty { 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }

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; }
  .lane { animation: none !important; }
}