/* 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(22px); transition: opacity .9s var(--ease), transform .9s 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: .08em; margin-bottom: -.08em; }
[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.14; }

/* ---- 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(--paper);
}
.intro-sun { position: absolute; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--red); scale: 0; }
.intro .crane-line { position: relative; width: 150px; color: var(--ink); stroke-width: 1.4; margin: 0; translate: 22px -6px; }
.js-motion:not(.seen-intro) .hero-copy, .js-motion:not(.seen-intro) .hero-media { visibility: hidden; }
.gsap-ready .hero-copy, .gsap-ready .hero-media, .motion-off .hero-copy, .motion-off .hero-media { visibility: visible !important; }

/* stroke drawing: pathLength="1" on the path makes the dash maths trivial */
.crane-line path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion:not(.motion-off) .crane-line path { stroke-dashoffset: 1; }

/* ---- progress bar ----------------------------------------------------- */
.js-motion .progress {
  display: block; position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 60;
  background: var(--red); 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: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--red); mix-blend-mode: multiply;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s;
    opacity: 0;
  }
  .js-motion .cursor.on { opacity: 1; }
  .js-motion .cursor.link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(176, 40, 24, .16); }
  .js-motion .cursor.label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--red); mix-blend-mode: normal; }
  .cursor-label { color: var(--paper); font: 600 .72rem/1 var(--sans); letter-spacing: .14em; opacity: 0; transition: opacity .2s; }
  .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; }

/* ---- hero scroll cue ------------------------------------------------- */
@media (min-width: 821px) {
  .js-motion .scroll-cue { display: block; position: absolute; bottom: 10px; inset-inline-start: 50%; width: 1px; height: 46px; background: var(--line); overflow: hidden; }
  .js-motion .scroll-cue span { position: absolute; inset: 0; background: var(--red); animation: cue 2.2s var(--ease) infinite; }
  @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
}

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

/* ---- page transitions (cross-document View Transitions) --------------
   Supporting browsers fade between pages; others simply navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .35s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
}

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