/* ==========================================================================
   REVORA — keyframes & reveal initial states
   Initial states only apply when JS is running (.js on <html>), so the page
   is fully readable without scripting, and reduced-motion users get a static
   layout.
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrollcue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes dropIn { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetIn { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Initial hidden states for GSAP-driven reveals */
html.js .hero__label,
html.js .hero__lede,
html.js .hero__row .btn,
html.js .hero__scroll,
html.js .hero__index { opacity: 0; }

html.js .hero__title .mask__in { transform: translateY(110%); }
html.js .nav__brand, html.js .nav__links a, html.js .nav__actions > * { opacity: 0; }

html.js [data-reveal-image] { clip-path: inset(0 0 100% 0); }
html.js .reveal-lines { opacity: 0; transform: translateY(32px); }
html.js .featured__card,
html.js .collections__intro,
html.js .studio__copy > *:not(.studio__title),
html.js .viewer,
html.js .legends,
html.js .heritage__cta,
html.js .footer__top > * { opacity: 0; transform: translateY(28px); }

/* Reduced motion — show everything, no movement */
@media (prefers-reduced-motion: reduce) {
  html.js .hero__label, html.js .hero__lede, html.js .hero__row .btn, html.js .hero__scroll, html.js .hero__index,
  html.js .nav__brand, html.js .nav__links a, html.js .nav__actions > *,
  html.js .reveal-lines, html.js .featured__card, html.js .collections__intro,
  html.js .studio__copy > *:not(.studio__title), html.js .viewer, html.js .legends,
  html.js .heritage__cta, html.js .footer__top > * { opacity: 1 !important; transform: none !important; }
  html.js .hero__title .mask__in { transform: none !important; }
  html.js [data-reveal-image] { clip-path: none !important; }
  .hero__scroll i::after, .viewer__ring { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .intro { display: none; }
  body.is-loading { overflow: auto; }
}