/* =============================================================================
   Mirana Labs: motion states
   GSAP sets inline values. These rules only hide elements when JavaScript is
   running (html.js) and GSAP has not yet revealed them (.is-in). Without JS,
   or when GSAP is missing (html.reveal-all), everything is visible.
   ============================================================================= */

.curtain { position: fixed; inset: 0; z-index: 150; background: var(--ink); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.curtain--in { transform-origin: top; transform: scaleY(1); }
.curtain__mark { position: absolute; left: 50%; top: 50%; width: 72px; transform: translate(-50%, -50%); color: #fff; }
.curtain__mark path:first-child { fill: #fff; }
.curtain__mark .spine { fill: var(--accent); }

html.js:not(.reveal-all) [data-reveal]:not([data-reveal="lines"]):not(.is-in) { opacity: 0; }
html.js:not(.reveal-all) [data-reveal="lines"]:not(.is-in) .line > span { transform: translateY(110%); }
html.js:not(.reveal-all) .hero__title:not(.is-in) .line > span { transform: translateY(110%); }
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  html.js [data-reveal], html.js [data-reveal="lines"] .line > span, html.js .hero__title .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}