/* 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(24px); 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: .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:not(.gable-frame) { clip-path: inset(100% 0 0 0); }
.gsap-ready .img-reveal img[data-speed] { scale: 1.14; }

/* ---- line-work: outline gables draw themselves ----------------------- */
.hero-gables path, .cta-gables path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion:not(.motion-off) .hero-gables path, .js-motion:not(.motion-off) .cta-gables path { stroke-dashoffset: 1; }
.motion-off .hero-gables path, .motion-off .cta-gables path { stroke-dashoffset: 0; }

/* ---- intro (home, once per session): the logo builds, gable by gable -- */
.js-motion:not(.motion-off):not(.seen-intro) .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: var(--night);
}
.intro-mark { width: 120px; height: 120px; }
.intro-mark .g { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-mark .core { opacity: 0; }
.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; }

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

/* ---- services: photo follows the pointer over the list -------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .js-motion .svc-float {
    display: block; position: fixed; top: 0; left: 0; z-index: 30; pointer-events: none;
    width: 260px; aspect-ratio: 4 / 5; overflow: hidden; clip-path: var(--gable);
    opacity: 0; scale: .85; transition: opacity .35s var(--ease), scale .45s var(--ease);
  }
  .js-motion .svc-float.on { opacity: 1; scale: 1; }
  .js-motion .svc-float img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---- 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(--bronze);
    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: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(138, 101, 52, .16); }
  .js-motion .cursor.label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--ink); }
  .cursor-label { color: var(--stone); font: 700 .66rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 8px; opacity: 0; transition: opacity .2s; }
  html[lang='ar'] .cursor-label { letter-spacing: 0; font-size: .78rem; }
  .cursor.label .cursor-label { opacity: 1; }
}

/* ---- pinned horizontal work strip (desktop) -------------------------- */
/* clip, not visible: the translated track would widen the whole page */
.work-sec.is-pinned .strip { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.work-sec.is-pinned { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

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

/* ---- page transitions (cross-document View Transitions) --------------
   Supporting browsers wipe 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 .6s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes vt-in { from { opacity: 0; clip-path: inset(6% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
}

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