/* Shared motion layer for the concept sites — pairs with motion.js
   Each page sets --intro-bg / --intro-fg / --intro-accent / --intro-font on .intro */

/* JS-driven reveal states (no JS → everything visible) */
html.js [data-reveal],
html.js [data-reveal-group] > *,
html.js [data-hero],
html.js [data-hero-art],
html.js [data-clip] { opacity: 0; }
html.js.reveal-all [data-reveal],
html.js.reveal-all [data-reveal-group] > *,
html.js.reveal-all [data-hero],
html.js.reveal-all [data-hero-art],
html.js.reveal-all [data-clip] { opacity: 1; }
html.js [data-split] { visibility: hidden; }
html.js [data-split].is-split, html.js.reveal-all [data-split] { visibility: visible; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* Intro overlay */
.intro { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; color: var(--intro-fg, #fff); overflow: hidden; pointer-events: none; }
html:not(.js) .intro { display: none; }
.intro__panel { position: absolute; background: var(--intro-bg, #111); }
.intro--wipe .intro__panel { inset: 0; }
.intro--split .intro__panel:nth-child(1) { left: 0; right: 0; top: 0; height: 50.5%; }
.intro--split .intro__panel:nth-child(2) { left: 0; right: 0; bottom: 0; height: 50.5%; }
.intro--blocks .intro__panel { top: 0; bottom: 0; width: 25.5%; }
.intro--blocks .intro__panel:nth-child(1) { left: 0; }
.intro--blocks .intro__panel:nth-child(2) { left: 25%; }
.intro--blocks .intro__panel:nth-child(3) { left: 50%; }
.intro--blocks .intro__panel:nth-child(4) { left: 75%; }
.intro__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; }
.intro__mark { width: 84px; height: 84px; display: block; color: var(--intro-accent, currentColor); }
.intro__mark [data-draw] { stroke: currentColor; fill: none; }
.intro__mark [data-fill] { fill: currentColor; fill-opacity: 0; }
.intro__word { font-family: var(--intro-font, inherit); font-size: clamp(26px, 5vw, 44px); letter-spacing: 0.14em; text-transform: uppercase; display: flex; overflow: hidden; line-height: 1.2; padding: 0 0.1em; }
.intro__word span { display: inline-block; will-change: transform; }
.intro__line { display: block; width: 120px; height: 2px; background: var(--intro-accent, currentColor); transform: scaleX(0); transform-origin: left; }
/* Safety: if JS stalls the overlay still leaves */
html.js .intro { animation: intro-safety 0.6s ease 4s forwards; }
@keyframes intro-safety { to { opacity: 0; visibility: hidden; } }

/* Split-text masks */
.split-line, .split-word { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal-group] > *, html.js [data-hero], html.js [data-hero-art], html.js [data-clip] { opacity: 1; }
  html.js [data-split] { visibility: visible; }
  .intro { display: none; }
}