/* ============================================================================
   motion.css — v3, the styling half of motion.js (GSAP + Lenis edition).

   The rule that survives every version: this file hides NOTHING. All hidden
   states are set by gsap at runtime, so a blocked CDN or disabled JS leaves a
   perfectly readable page.
   ========================================================================= */

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

/* ------------------------------------------------------- intro curtain ---- */
/* Pure CSS on purpose. The old version waited for GSAP, which made a 134 KB
   library download the thing standing between a phone and the headline (LCP 4.1s).
   Now the curtain lifts on its own schedule whatever happens to the scripts. */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--board, #101312);
  display: flex; align-items: center; justify-content: center;
  animation: intro-lift .72s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes intro-lift {
  0%, 34%  { transform: translateY(0); visibility: visible; }
  99%      { visibility: visible; }
  100%     { transform: translateY(-101%); visibility: hidden; }
}
.intro-num {
  font-size: clamp(64px, 16vw, 190px); font-weight: 900; line-height: 1;
  color: var(--signal, #FFC800); opacity: .92;
  font-variant-numeric: tabular-nums;
}
.intro-num::after { content: "%"; font-size: .34em; vertical-align: super; opacity: .6; }

/* the hero arrives as the curtain leaves — also pure CSS, also no JS needed */
[data-hero] > *:not(h1) { animation: hero-rise .5s cubic-bezier(.16,.8,.3,1) backwards; }
/* the h1 deliberately has NO entrance: it is the LCP element and paints at
   once, still covered by the curtain — Google clocks the paint, you see the lift */
[data-hero] > *:nth-child(1) { animation-delay: .34s }
[data-hero] > *:nth-child(2) { animation-delay: .40s }
[data-hero] > *:nth-child(3) { animation-delay: .46s }
[data-hero] > *:nth-child(4) { animation-delay: .52s }
[data-hero] > *:nth-child(5) { animation-delay: .58s }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  [data-hero] > *:not(h1) { animation: none; }
}

/* ------------------------------------------------------ scroll progress --- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: var(--signal, #FFC800);
  transform: scaleX(0); transform-origin: 0 50%;
}
[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* ------------------------------------------------------------ marquee ----- */
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 52s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* the giant outlined word */
.wordmark {
  font-size: clamp(70px, 15vw, 230px); font-weight: 900; line-height: 1.05;  /* .92 shaved the below-baseline tails of ر and ن inside the overflow:hidden marquee */
  color: #4C6D5D; -webkit-text-stroke: 0;   /* solid ghost fill at >=3:1 — outlines cut seams through joined Arabic letters, and the old var(--line) sat at 1.49:1 */
  white-space: nowrap; padding: 0 .18em; opacity: .85;
}

/* ------------------------------------------------- split-line headlines --- */
[data-split] .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.06em; }
[data-split] .ln-i { display: block; will-change: transform; }

/* ------------------------------------------------------ cursor preview ---- */
.cursor-preview {
  position: fixed; top: -95px; left: -130px; z-index: 900;
  width: 260px; height: 190px; border-radius: 12px; overflow: hidden;
  pointer-events: none; opacity: 0; scale: .86;
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  transition: opacity .3s ease, scale .36s cubic-bezier(.16,.8,.3,1);
}
.cursor-preview.on { opacity: 1; scale: 1; }
.cursor-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none), (pointer: coarse) { .cursor-preview { display: none; } }

/* ------------------------------------------------- horizontal pinning ----- */
[data-hscroll-track] { display: flex; gap: 18px; padding: 0 6vw; will-change: transform; }
[data-hscroll-track] > * { flex: 0 0 auto; }
/* GSAP pins .hstick itself — the CSS sticky from the inline styles must yield */
html.gsap-on [data-hscroll] .hstick,
html.gsap-on #dest .hstick { position: relative; }
/* no engine: it becomes an ordinary swipeable row, still fully usable */
html:not(.gsap-on) [data-hscroll] { height: auto !important; }
html:not(.gsap-on) [data-hscroll] .hstick,
html:not(.gsap-on) #dest .hstick { position: static; height: auto; padding: 22px 0; }
html:not(.gsap-on) [data-hscroll-track] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------- pinned shot ---- */
.pin-wrap { position: relative; }
.pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }

/* -------------------------------------------------------- video loops ----- */
/* clips fade in over their poster once actually playing — no black flashes */
video[data-vsrc] { object-fit: cover; }
.hero-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.hero-vid.playing { opacity: 1; }
.dest video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease;
}
.dest video.playing { opacity: 1; }
.pin-bg { transition: opacity .8s ease; }

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .intro { display: none; }
  * { scroll-behavior: auto !important; }
}