/* =========================================================
   ALPHA — THEME v4  ·  "Couture" pass
   Loads AFTER styles.css + fx.css + theme-v3.css.
   Adds: Alexandria display typography, floating glass pill nav,
   hero/footer giant brand wordmarks, intro counter, comparison
   table, magnetic-CTA prep, focus rings, marquee hover-pause.
   Purely additive — every commerce hook untouched.
   ========================================================= */

:root {
  --font-display: "Alexandria", "Tajawal", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}

/* ===== Display-grade typography (Alexandria for headlines, Tajawal body) ===== */
h1, h2, h3,
.hero-wordmark, .snum, .sp-spec b, .k-word,
.chapter h2, .hpanel h3, .sr-cap h2,
.brand .txt, .hp-num, .ch-num {
  font-family: var(--font-display);
}
h1, h2 { letter-spacing: -.02em; }
/* Alexandria runs wider AND taller than Tajawal: generous line-height so Arabic
   marks (hamza/shadda) and descenders (ق ج ع) never crop or collide between lines */
.hero-h1 { font-size: clamp(2.4rem, 6.4vw, 4.7rem); line-height: 1.34 !important; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.34; }
h3 { line-height: 1.5; }
.chapter h2 { font-size: clamp(2.2rem, 5.8vw, 4.4rem); line-height: 1.3; }
.sr-cap h2 { font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: 1.28; }
.hpanel h3 { line-height: 1.32; }
/* split words need breathing room above/below inside their inline boxes */
.hero-h1 .w, .section-head h2 .w, .vband-content h2 .w, .cta h2 .w, .spotlight-pro h2 .w { padding-block: .08em; }
.kicker { font-family: var(--font-display); font-weight: 700; }

/* ===== Gold-text contrast fix =====
   v3 disabled the shimmer animation for perf but kept the shimmer GRADIENT,
   whose bright #fff3c0 band sat frozen mid-headline → words looked faded /
   "missing" (e.g. مستوى in the CTA). Static headlines now get an even-contrast
   gold; only the hero keeps the animated shimmer gradient. */
.gold-text { background-image: linear-gradient(120deg, #ab861d, #c9a227 48%, #8f6d18); background-size: 100% 100%; }
.hero-h1 .gold-text { background-image: linear-gradient(110deg, #b8901f 0%, #c9a227 28%, #fff3c0 50%, #c9a227 72%, #8a6a1f 100%); background-size: 230% 100%; }
/* dark sections + dark theme need the LIGHT gold range to stay readable */
.chapter h2 .gold-text, .sr-cap .gold-text, .vband--dark .gold-text, .spotlight-pro .gold-text,
html[data-theme="dark"] .gold-text { background-image: linear-gradient(120deg, #f6e2ad, #e8c474 48%, #d8b03f); background-size: 100% 100%; }
html[data-theme="dark"] .hero-h1 .gold-text { background-image: linear-gradient(110deg, #e8c474 0%, #d8b03f 30%, #fff7d6 50%, #d8b03f 70%, #c9a227 100%); background-size: 230% 100%; }

/* ===== Accessibility: visible gold focus rings everywhere ===== */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible { outline-offset: 2px; }
summary { cursor: pointer; }

/* ===== Floating glass pill navbar (desktop) ===== */
@media (min-width: 980px) {
  .site-header { top: 14px; border-bottom: 0 !important; }
  .site-header, .site-header.scrolled {
    background: transparent !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important; box-shadow: none !important;
  }
  .site-header .nav {
    height: 66px; margin-top: 0; padding-inline: 12px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 10px 36px rgba(20,20,30,.07), inset 0 1px 0 rgba(255,255,255,.7);
    transition: background var(--t), box-shadow var(--t);
  }
  .site-header.scrolled .nav {
    background: rgba(255,255,255,.74);
    box-shadow: 0 18px 50px rgba(20,20,30,.12), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .nav-links a { border-radius: 999px; }
  html[data-theme="dark"] .site-header .nav { background: rgba(14,14,20,.55); border-color: rgba(255,255,255,.10); }
  html[data-theme="dark"] .site-header.scrolled .nav { background: rgba(14,14,20,.78); }
  /* fade strip behind the floating pill — without it, scrolled content (kickers,
     headlines) shows raw through the transparent gaps around the pill */
  .site-header::before { content: ""; position: absolute; inset: -14px 0 -30px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, var(--bg) 30%, transparent); opacity: 0; transition: opacity var(--t); }
  .site-header.scrolled::before { opacity: 1; }
}

/* anchor jumps must clear the floating header (Lenis offset handles smooth nav;
   this covers native jumps + browser find/refresh restores) */
section[id], div[id].kinetic-band, #top { scroll-margin-top: 104px; }

/* ===== Giant outlined ALPHA watermark behind the hero ===== */
.hero-wm {
  position: absolute; z-index: -1; inset-inline: 0; top: 2%;
  text-align: center; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(7rem, 24vw, 22rem); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(201,162,39,.14);
}
html[data-theme="dark"] .hero-wm { -webkit-text-stroke-color: rgba(232,196,116,.10); }
@media (max-width: 820px) { .hero-wm { font-size: 32vw; top: 1%; -webkit-text-stroke-width: 1px; } }

/* ===== Intro preloader counter ===== */
.intro-count {
  margin-top: 14px; font-family: var(--font-display); font-weight: 800;
  font-size: .92rem; letter-spacing: .22em; color: #d8b14a;
  font-variant-numeric: tabular-nums; direction: ltr;
}

/* ===== Comparison table — ALPHA vs others ===== */
.compare {
  max-width: 880px; margin-inline: auto; border-radius: 30px; overflow: hidden;
  background: rgba(255,255,255,.92); border: 1px solid var(--glass-brd);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px rgba(20,20,35,.08);
}
html[data-theme="dark"] .compare { background: rgba(20,20,26,.88); }
.cmp-row {
  display: grid; grid-template-columns: 1fr 130px 130px; align-items: center;
  gap: 12px; padding: 18px 26px; border-bottom: 1px solid var(--hairline-2);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-head {
  background: linear-gradient(135deg, rgba(201,162,39,.12), rgba(185,190,199,.08));
  font-weight: 800; padding-block: 15px;
}
.cmp-head .cmp-col-alpha {
  text-align: center; font-family: var(--font-display); font-weight: 900; letter-spacing: .06em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.05rem;
}
.cmp-head .cmp-col-other { text-align: center; color: var(--muted-2); font-size: .92rem; }
.cmp-feat { font-weight: 700; font-size: .98rem; }
.cmp-feat small { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; margin-top: 2px; letter-spacing: 0; }
.cmp-yes, .cmp-no { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cmp-yes .ic, .cmp-no .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cmp-yes .ic { background: var(--gold-grad); color: #2a2008; box-shadow: 0 6px 16px rgba(201,162,39,.35), inset 0 1px 0 rgba(255,255,255,.55); }
.cmp-no .ic { background: var(--bg-2); color: var(--muted-2); }
.cmp-yes .ic svg, .cmp-no .ic svg { width: 16px; height: 16px; }
.cmp-no b { color: var(--muted-2); font-size: .76rem; font-weight: 700; }
/* gold spine highlighting the ALPHA column */
.cmp-row > .cmp-yes, .cmp-head > .cmp-col-alpha { position: relative; }
.compare { position: relative; }
.compare::before {
  /* the ALPHA column: rows are [1fr | 130 | 130] with 12px gaps and 26px row
     padding → in RTL the ALPHA column spans 168..298px from the left edge */
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  inset-inline-end: 168px; width: 130px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.03));
  border: 1px solid rgba(201,162,39,.22);
  margin-block: 12px;
}
.cmp-row > * { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .cmp-row { grid-template-columns: 1fr 76px 76px; padding: 15px 14px; gap: 8px; }
  .compare::before { inset-inline-end: 98px; width: 76px; }
  .cmp-feat { font-size: .9rem; }
  .cmp-feat small { font-size: .72rem; }
  .cmp-no b { font-size: .66rem; }
}

/* ===== Footer mega brand wordmark ===== */
.footer-mega {
  font-family: var(--font-display); font-weight: 900; text-align: center;
  font-size: clamp(4.4rem, 17vw, 13rem); line-height: .95; letter-spacing: .05em;
  margin-top: 56px; pointer-events: none; user-select: none;
  background: linear-gradient(180deg, rgba(201,162,39,.34), rgba(201,162,39,.02));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .footer-mega { background: linear-gradient(180deg, rgba(232,196,116,.30), rgba(232,196,116,.01)); -webkit-background-clip: text; background-clip: text; }

/* ===== Cart drawer header icon (replaces emoji) ===== */
.cart-top h3 { display: flex; align-items: center; gap: 10px; }
.cart-h-ic { width: 22px; height: 22px; color: var(--gold-deep); flex: none; }

/* ===== Word-reveal support for section headlines (ultra.js) ===== */
.section-head h2, .vband-content h2, .cta h2, .spotlight-pro h2 { perspective: 800px; }
.section-head h2 .w, .vband-content h2 .w, .cta h2 .w, .spotlight-pro h2 .w {
  display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity;
}

/* ===== Micro-polish ===== */
/* pause marquees on hover so logos are clickable comfortably */
.marquee:hover .marquee-track { animation-play-state: paused; }
/* magnetic CTAs get a quicker transform release */
.btn-lg { transition: transform .35s var(--ease-cine), box-shadow var(--t) var(--out), background var(--t), border-color var(--t), color var(--t); }

/* =========================================================
   PERF PASS — repaint/GPU cost kills (look preserved)
   ========================================================= */
/* kickers + header icon buttons: ~15 small backdrop-filters repainted on every
   scroll frame. Solid translucent reads identically at this size. */
.kicker, .icon-btn, .btn-soft { backdrop-filter: none; -webkit-backdrop-filter: none; }
.kicker { background: rgba(255,255,255,.8); }
.icon-btn, .btn-soft { background: rgba(255,255,255,.75); }
html[data-theme="dark"] .kicker, html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .btn-soft { background: rgba(22,22,28,.75); }
.spotlight-pro .kicker { background: rgba(255,255,255,.06); }
/* film grain: full-viewport mix-blend forced whole-screen compositing each frame */
.grain, html[data-theme="dark"] .grain { mix-blend-mode: normal; opacity: .045; }
/* best-seller pulse animated box-shadow on ~10 cards = constant repaint even idle.
   Static gold ring (from styles.css) keeps the highlight. */
.product.is-best, .mini.is-best { animation: none; }

/* offscreen sections: ultra.js toggles .anim-off so looping animations stop
   burning GPU when their section isn't visible */
.anim-off .marquee-track, .anim-off .k-track { animation-play-state: paused !important; }
.hero.anim-off .rays, .hero.anim-off .glow, .hero.anim-off .sparkle,
.hero.anim-off .sheen, .hero.anim-off .tile, .hero.anim-off::before,
.hero.anim-off .gold-text { animation-play-state: paused; }

/* ===== Faster cinematic intro (was ~2.5s before interaction; now ~1.9s) ===== */
.intro { animation: introOut .7s cubic-bezier(.7,0,.2,1) 1.2s forwards; }
.intro-bar span { animation: introFill 1.05s cubic-bezier(.16,1,.3,1) .15s forwards; }
.intro-logo { animation-duration: .7s; }
.intro-inner::after { animation-delay: .45s; }

/* mobile menu sits flush under the 74px header (was tuned for the old 68px) */
.mobile-menu { inset: 74px 0 auto 0; }

/* ===== Scrollspy — current section highlighted in the nav ===== */
.nav-links a { position: relative; }
.nav-links a.active { color: var(--ink); background: rgba(201,162,39,.13); }
.nav-links a.active::after { content: ""; position: absolute; inset-inline: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
html[data-theme="dark"] .nav-links a.active { color: #fff; background: rgba(201,162,39,.18); }

/* ===== Back-to-top fab ===== */
.fab-top {
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
  opacity: 0; transform: scale(.5) translateY(10px); pointer-events: none;
  transition: opacity .35s var(--out), transform .35s var(--spring);
}
.fab-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { color: var(--gold-deep); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .fab-top { transition: none; } }

/* ===== Mobile lite + reduced motion guards ===== */
@media (max-width: 820px), (pointer: coarse) {
  .section-head h2 .w, .vband-content h2 .w, .cta h2 .w, .spotlight-pro h2 .w {
    opacity: 1 !important; transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-count { display: none; }
  .section-head h2 .w, .vband-content h2 .w, .cta h2 .w, .spotlight-pro h2 .w {
    opacity: 1 !important; transform: none !important;
  }
  .btn-lg { transition: none; }
}

/* =========================================================
   v5 "KEYNOTE" — Apple-design-team pass
   ========================================================= */

/* ---------- Hero: eyebrow + bigger, more confident headline ---------- */
.hero-eyebrow {
  font-weight: 800; font-size: .84rem; letter-spacing: .14em;
  color: var(--gold-deep); margin-bottom: 14px;
  opacity: 0; animation: v5FadeUp .8s var(--out) .45s forwards;
}
@keyframes v5FadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-h1 { font-size: clamp(2.6rem, 7vw, 5.3rem); }

/* ---------- Manifesto: giant statement, words ink-fill on scroll ---------- */
.manifesto { padding: clamp(110px, 14vw, 180px) 0; text-align: center; }
.mani-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.65rem, 3.9vw, 3.2rem); line-height: 1.95;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 980px; margin: 26px auto 0;
}
.mani-text .w { display: inline-block; padding-block: .05em; }

/* ---------- Showreel finale: video plays INSIDE giant ALPHA letters ---------- */
.showreel { isolation: isolate; }
.sr-veil { display: none; } /* keep the letter-fill footage bright */
.sr-knockout {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: #000; mix-blend-mode: multiply; pointer-events: none;
}
.sr-knockout span {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(4.6rem, 24vw, 22rem); letter-spacing: .01em; color: #fff;
  transform: translateY(-4%);
}
.sr-grain { z-index: 3; }
.sr-cap { position: absolute; inset-inline: 0; bottom: 7%; z-index: 4; }
.sr-cap h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }
.sr-cap p { font-size: clamp(.92rem, 1.7vw, 1.12rem); margin-top: 8px; }
/* phones + reduced motion hide the video → give the letters a molten-gold fill
   instead (multiply over pure black would make them vanish) */
@media (max-width: 820px), (pointer: coarse) {
  .sr-pin { background: radial-gradient(85% 75% at 50% 38%, #9c7a16 0%, #2a2008 55%, #0a0905 80%); display: grid; place-items: center; }
  .sr-cap { position: relative; bottom: auto; padding: 10px 0 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-pin { background: radial-gradient(85% 75% at 50% 38%, #9c7a16 0%, #2a2008 55%, #0a0905 80%); }
}

/* ---------- Dynamic-Island nav: compresses on scroll-down, expands on scroll-up ---------- */
@media (min-width: 980px) {
  .site-header .nav { transition: background var(--t), box-shadow var(--t), height .45s var(--ease-cine), transform .45s var(--ease-cine); }
  .site-header.nav-compact .nav { height: 54px; transform: scale(.975); box-shadow: 0 6px 22px rgba(20,20,30,.10), inset 0 1px 0 rgba(255,255,255,.7); }
  .brand .txt small { transition: opacity .3s; }
  .site-header.nav-compact .brand .txt small { opacity: 0; }
  .site-header.nav-compact .icon-btn { transform: scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow { animation: none; opacity: 1; }
  .mani-text .w { opacity: 1 !important; }
}
@media (max-width: 820px), (pointer: coarse) {
  .mani-text .w { opacity: 1 !important; }
}