/* Motion layer styles. Every hidden starting state below is scoped to
   html.js-motion, which motion-init.js sets before first paint and NEVER
   under prefers-reduced-motion. If GSAP fails to arrive, motion-init.js
   adds .motion-off after 2.5 s and everything shows. Crawlers, no-JS and
   reduced-motion visitors always see the full page. */

/* ---- simple reveals (driven by site.js, CSS transitions) ------------- */
.js-motion:not(.motion-off) .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js-motion .reveal.in { opacity: 1; transform: none; }

/* ---- split headings (driven by motion.js) ----------------------------- */
.js-motion:not(.motion-off):not(.gsap-ready) [data-split] { opacity: 0; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .wi { display: inline-block; will-change: transform; }

/* ---- image wipes ------------------------------------------------------ */
.js-motion:not(.motion-off):not(.gsap-ready) .img-reveal { clip-path: inset(100% 0 0 0); }
.gsap-ready .img-reveal img[data-speed] { scale: 1.16; }

/* ---- intro (home, once per session) ---------------------------------- */
.js-motion:not(.motion-off):not(.seen-intro) .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: var(--noir); color: var(--silver);
}
.intro-in { display: grid; justify-items: center; gap: 22px; }
.intro-mono { width: clamp(84px, 10vw, 120px); height: auto; }
.intro-word { display: block; }
.intro-wordmark { width: clamp(140px, 16vw, 200px); height: auto; color: var(--ivory); }
.intro-curtain { position: absolute; inset: 0; background: var(--maroon); transform: scaleY(0); }
.js-motion:not(.seen-intro) .hero-in, .js-motion:not(.seen-intro) .hero-bar { visibility: hidden; }
.gsap-ready .hero-in, .gsap-ready .hero-bar, .motion-off .hero-in, .motion-off .hero-bar { visibility: visible !important; }

/* ---- progress bar ----------------------------------------------------- */
.js-motion .progress {
  display: block; position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 60;
  background: var(--latte); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
[dir='rtl'] .progress { transform-origin: 100% 50%; }

/* ---- cursor (fine pointers only) ------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .js-motion .cursor {
    display: grid; place-items: center; position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--latte); mix-blend-mode: normal;
    transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .35s, opacity .3s;
    opacity: 0;
  }
  .js-motion .cursor.on { opacity: 1; }
  .js-motion .cursor.on-light { background: var(--maroon); }
  .js-motion .cursor.link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(212, 179, 147, .18); border: 1px solid rgba(212, 179, 147, .6); }
  .js-motion .cursor.link.on-light { background: rgba(122, 33, 46, .1); border-color: rgba(122, 33, 46, .5); }
  .js-motion .cursor.label { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--latte); border: 0; }
  .js-motion .cursor.label.on-light { background: var(--maroon); }
  .cursor-label { color: var(--ink); font: 600 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
  .cursor.label.on-light .cursor-label { color: var(--ivory); }
  .cursor.label .cursor-label { opacity: 1; }
}

/* ---- pinned horizontal gallery (desktop) ----------------------------- */
/* clip, not visible: the translated track would widen the whole page */
.gallery-sec.is-pinned .strip { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.gallery-sec.is-pinned { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
/* While pinned the whole scene must fit one screen: the cards are sized by
   the viewport HEIGHT (4:5 -> at most 56vh tall), not only by its width, and
   the section's padding shrinks. Otherwise wide-but-short screens (1920x880)
   cut the bottoms off. */
.gallery-sec.is-pinned { padding-block: clamp(20px, 4vh, 44px); }
.gallery-sec.is-pinned .section-head { margin-bottom: clamp(14px, 3vh, 32px); }
.gallery-sec.is-pinned .strip-item { flex: 0 0 auto; width: min(26vw, 44.8vh, 420px); }
.gallery-sec.is-pinned .strip-item:nth-child(even) { margin-top: 4vh; }

.gsap-ready .ribbon-track { animation: none; }

/* ---- page transitions (cross-document View Transitions) --------------
   The new page sweeps up over the old one, which dims and sinks a little.
   Supporting browsers only; others simply navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .9s; }
  ::view-transition-old(root) { animation: vt-old .8s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-new .9s var(--ease-io) both; }
  @keyframes vt-old { to { transform: translateY(-5%) scale(.98); filter: brightness(.45); } }
  @keyframes vt-new { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ---- film grain (dark pages strongest; animated by steps, cheap) ------- */
.js-motion .grain {
  display: block; position: fixed; inset: -50%; z-index: 250; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07; mix-blend-mode: overlay;
  animation: grain .9s steps(6) infinite;
}
.js-motion .theme-light .grain, .theme-light .grain { opacity: .035; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}
.grain { display: none; }

/* ---- hero: letterbox bars + char headline ------------------------------ */
.js-motion:not(.motion-off) .lb { display: block; position: absolute; inset-inline: 0; height: 12vh; background: #000; z-index: 4; pointer-events: none; }
.js-motion .lb-top { top: 0; transform-origin: 50% 0; }
.js-motion .lb-bot { bottom: 0; transform-origin: 50% 100%; }
.gsap-ready .lb { transform: scaleY(0); }
[data-split] .ch { display: inline-block; will-change: transform, filter; }

/* ---- image curtains ---------------------------------------------------- */
.img-reveal { position: relative; }
.rv-curtain { position: absolute; inset: 0; z-index: 2; background: var(--maroon); transform-origin: 50% 0; pointer-events: none; }

/* ---- cinema scene, pinned (tablet + desktop) ---------------------------- */
.cinema.is-pinned .cinema-stage { height: 100vh; height: 100svh; }
.cinema.is-pinned .cinema-frame { position: absolute; inset: 0; aspect-ratio: auto; }
.cinema.is-pinned .cinema-copy { inset-inline: 0; bottom: 0; }
.cinema.is-pinned .cinema-cards { display: grid; }
.cinema.is-pinned .cinema-card { grid-area: 1 / 1; opacity: 0; }

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