/* ============================================================
   IARU — base, cinema stage, overlays
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* guards against any horizontal drift */
  overscroll-behavior-y: none;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-weight: 400; line-height: var(--lh-tight); }
p { margin: 0; }

/* Safety net for long compounds (German) and narrow viewports — a single
   unbreakable word must never push the layout sideways. */
h1, h2, h3, p, li, a, button, label { overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; inset-inline-start: var(--sp-4);
  z-index: var(--z-loader);
  padding: var(--sp-3) var(--sp-5);
  background: var(--glass-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ============================================================
   LOADER — gold Eye of Horus resolving out of darkness
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--obsidian);
  transition: opacity 900ms var(--ease-cine), visibility 900ms;
}
.loader[hidden] { display: grid; }         /* keep layout while fading */
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__inner { display: grid; justify-items: center; gap: var(--sp-5); }
.loader__eye { width: clamp(84px, 16vw, 132px); height: auto; overflow: visible; }
.loader__eye path, .loader__eye circle {
  fill: none; stroke: var(--gold-light); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
  animation: draw 2.1s var(--ease-cine) forwards;
}
.loader__eye circle { animation-delay: .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.loader__word {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  letter-spacing: var(--tracking-wide);
  color: var(--gold-light);
  padding-inline-start: var(--tracking-wide);
  opacity: 0; animation: fadeUp 1s var(--ease-out) .9s forwards;
}
.loader__line {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0; animation: fadeUp 1s var(--ease-out) 1.3s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: clamp(0.8rem, 1.6vw, 1.5rem) var(--gutter);
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              backdrop-filter var(--dur-mid), box-shadow var(--dur-mid);
  border-block-end: 1px solid transparent;
}
.header.is-stuck {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-block-end-color: var(--hairline);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); margin-inline-end: auto; }
.brand__mark { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.32rem; letter-spacing: 0.34em;
  padding-inline-start: 0.34em;
  color: var(--ivory-soft);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  padding: var(--sp-2) 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--gold-light);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover { color: var(--ivory-soft); }
.nav__link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: inherit; font-size: 0.82rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.72em 1.5em;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-1px); }
.btn--solid {
  background: linear-gradient(135deg, var(--gold-antique), var(--gold-light));
  color: #1a1206; border-color: transparent; font-weight: 600;
}
.btn--solid:hover { color: #1a1206; filter: brightness(1.08); }
.btn--ghost { border-color: var(--hairline-soft); color: var(--text-dim); }

/* icon buttons: language, sound, menu */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 44px; min-height: 44px; padding: 0 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-soft);
  background: rgba(5, 8, 14, 0.4); color: var(--text-dim);
  font-family: inherit; font-size: 0.76rem; letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.iconbtn:hover { border-color: var(--hairline); color: var(--gold-light); }
.iconbtn svg { width: 17px; height: 17px; }

/* custom Eye-of-Horus menu trigger (replaces a generic hamburger) */
.menu-trigger { display: none; }
.menu-trigger svg { width: 24px; height: 24px; }

/* ============================================================
   CINEMA STAGE
   ============================================================ */
.cinema {
  position: fixed; inset: 0; z-index: var(--z-cinema);
  background: var(--obsidian);
  overflow: hidden;
}
/* One <canvas> per clip — the engine draws each frame directly (see
   cinema.js), so there is no object-fit/object-position here: the cover-fit
   crop, including clip 4's off-centre emblem focal point, is baked into
   the drawImage() call itself. */
.cinema__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 480ms var(--ease-cine);
  will-change: opacity;
}
.cinema__frame.is-active { opacity: 1; }

/* Explicit layer order. The canvases are appended by the engine, so without
   this they paint ON TOP of the scrims, bubbles and dust — which silently
   disabled all three. The glow stays behind the picture as an ambient wash. */
.cinema__glow    { z-index: 0; }
.cinema__frame   { z-index: 1; }
.cinema__scrim   { z-index: 2; }
.cinema__bubbles { z-index: 3; }
.cinema__dust    { z-index: 4; }
.cinema__veil    { z-index: 5; }

/* On the end card the copy sits centred against the side, so the top/bottom
   scrim earns nothing — and at full strength it dims the emblem's own gold
   frame, which reaches to within 7% of the edge. The side scrim still does the
   legibility work. (Phones use data-align="bottom" here, so they keep theirs.) */
.cinema[data-align='cta'] .cinema__scrim--edge { opacity: .18; }

/* The emblem keeps its natural place in every language — the artwork is fixed,
   so the copy moves around it rather than the other way round. */

@media (max-width: 767px) {
  /* Compact the end card — it carries more content than most chapters
     (eyebrow, title, body, two store rows, a note, two buttons) and the
     video now fills the full screen height behind it like every other
     mobile chapter, so keeping it short matters more here, not less. */
  .chapter--cta .chapter__title { font-size: clamp(1.55rem, 6.8vw, 2.05rem); }
  .chapter--cta .chapter__box { gap: var(--sp-3); }
  .chapter--cta .chapter__body { font-size: 0.98rem; }
  .chapter--cta .cta-note { font-size: 0.68rem; }
  .chapter--cta .store-btn { padding: 0.5rem 0.8rem; }
  .chapter--cta .store-btn__big { font-size: 0.82rem; }
  .chapter--cta .cta-actions .btn { padding: 0.62em 1.1em; font-size: 0.76rem; }
}

/* legibility scrims — directional, so they only darken where copy sits */
.cinema__scrim {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.cinema__scrim--edge {
  background:
    linear-gradient(to bottom, rgba(5,5,5,.62) 0%, rgba(5,5,5,0) 26%),
    linear-gradient(to top,    rgba(5,5,5,.72) 0%, rgba(5,5,5,0) 34%);
}
/* Scrims follow the footage, not the reading direction: a chapter's align value
   describes where the picture's empty space physically is, so these never flip. */
:root { --scrim-start: to right; --scrim-end: to left; }

.cinema__scrim--side { opacity: 0; }
.cinema[data-align='left']         .cinema__scrim--side,
.cinema[data-align='bottom-left']  .cinema__scrim--side,
.cinema[data-align='top-left']     .cinema__scrim--side {
  opacity: 1;
  background: linear-gradient(var(--scrim-start), rgba(5,5,5,.78) 0%, rgba(5,5,5,.30) 34%, rgba(5,5,5,0) 58%);
}
.cinema[data-align='right']        .cinema__scrim--side,
.cinema[data-align='bottom-right'] .cinema__scrim--side,
.cinema[data-align='cta']          .cinema__scrim--side {
  opacity: 1;
  background: linear-gradient(var(--scrim-end), rgba(5,5,5,.80) 0%, rgba(5,5,5,.32) 34%, rgba(5,5,5,0) 58%);
}
@media (max-width: 767px) {
  /* mobile copy always sits at the bottom, so use a single bottom scrim */
  .cinema__scrim--side { opacity: 0 !important; }
  .cinema__scrim--edge {
    background:
      linear-gradient(to bottom, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 22%),
      linear-gradient(to top,    rgba(5,5,5,.86) 0%, rgba(5,5,5,.40) 30%, rgba(5,5,5,0) 56%);
  }
}

/* ambient Egyptian-blue glow, extremely low opacity */
.cinema__glow {
  position: absolute; inset: -20%;
  pointer-events: none; opacity: .5;
  background: radial-gradient(60% 50% at 50% 60%, var(--glow) 0%, transparent 70%);
  transition: background var(--dur-cine) var(--ease-out);
  mix-blend-mode: screen;
}

/* transition veil — blackout + gold dust between non-matching clips */
.cinema__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--obsidian);
  opacity: 0;
}
.cinema__dust {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 32%, rgba(229,190,103,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 18%, rgba(229,190,103,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 78% 66%, rgba(201,151,58,.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 36% 78%, rgba(245,241,232,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 40%, rgba(229,190,103,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 60%, rgba(229,190,103,.65), transparent 60%);
}

/* underwater bubbles for the diving chapter — light, CSS-only */
.cinema__bubbles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow); }
.cinema.is-diving .cinema__bubbles { opacity: .5; }
.bubble {
  position: absolute; bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(190,235,240,.14) 62%, transparent 72%);
  border: 1px solid rgba(255,255,255,.16);
  animation: rise-bubble linear infinite;
}
@keyframes rise-bubble {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .75; }
  to   { transform: translateY(-118vh) translateX(var(--drift, 14px)); opacity: 0; }
}

/* ============================================================
   SCROLL TRACK + CHAPTER OVERLAYS
   ============================================================ */
.track { position: relative; z-index: var(--z-overlay); }

.chapter {
  position: relative;
  display: flex;
  /* --len is written per chapter from the timeline data.
     svh (not vh) keeps the height stable while mobile browser chrome moves. */
  height: calc(var(--len, 1.5) * 100svh);
  padding: 0 var(--gutter);
  pointer-events: none;
}
@supports not (height: 100svh) {
  .chapter { height: calc(var(--len, 1.5) * 100vh); }
  .chapter__inner { height: 100vh; }
}
.chapter__inner {
  position: sticky; top: 0;
  width: 100%; height: 100svh;
  display: flex;
  padding-block: calc(var(--sp-9) + 2rem) var(--sp-9);
  /* A chapter's align value says where the PICTURE's empty space is — a fact
     about the footage, which does not mirror. Forcing LTR here makes
     flex-start/flex-end physical, so Arabic copy lands in the same safe zone
     as English instead of flipping onto the subjects. Text flow is restored
     to RTL on the box below, so the Arabic itself still reads correctly. */
  direction: ltr;
}
[dir='rtl'] .chapter__box { direction: rtl; }
.chapter__box {
  max-width: min(var(--measure), 92vw);
  display: grid; gap: var(--sp-4);
  align-content: start;
  pointer-events: auto;
  will-change: transform, opacity;
}
/* The emblem ends at 49.1% of the frame, so the CTA is held inside the free
   half — it can never ride over the artwork at any desktop width. */
.chapter--cta .chapter__box { max-width: min(42ch, 44vw); }
@media (max-width: 767px) { .chapter--cta .chapter__box { max-width: 100%; } }

/* alignment inside the sticky stage */
.chapter[data-align='bottom-left']  .chapter__inner { align-items: flex-end;    justify-content: flex-start; }
.chapter[data-align='top-left']     .chapter__inner { align-items: flex-start;  justify-content: flex-start; }
.chapter[data-align='left']         .chapter__inner { align-items: center;      justify-content: flex-start; }
.chapter[data-align='right']        .chapter__inner { align-items: center;      justify-content: flex-end; }
.chapter[data-align='bottom-right'] .chapter__inner { align-items: flex-end;    justify-content: flex-end; }
.chapter[data-align='cta']          .chapter__inner { align-items: center;      justify-content: flex-end; }
/* Right-hand chapters: copy hugs the right edge of its column in both scripts.
   In LTR that is `end`; inside the RTL box the same physical edge is `start`. */
.chapter[data-align='right']        .chapter__box,
.chapter[data-align='bottom-right'] .chapter__box,
.chapter[data-align='cta']          .chapter__box { text-align: end; justify-items: end; }
[dir='rtl'] .chapter[data-align='right']        .chapter__box,
[dir='rtl'] .chapter[data-align='bottom-right'] .chapter__box,
[dir='rtl'] .chapter[data-align='cta']          .chapter__box { text-align: start; justify-items: start; }

@media (max-width: 767px) {
  /* every chapter resolves to bottom-anchored copy on phones */
  .chapter .chapter__inner { align-items: flex-end !important; justify-content: center !important; }
  .chapter .chapter__box {
    max-width: 100%; text-align: start !important; justify-items: start !important;
    padding-block-end: max(var(--sp-6), env(safe-area-inset-bottom));
  }
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  padding-inline-end: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.chapter__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.chapter--sub .chapter__title { font-size: var(--fs-h2); }
.chapter__body { font-size: var(--fs-lead); color: var(--text-dim); text-wrap: pretty; }
.chapter__extra { font-size: var(--fs-body); color: var(--text-faint); font-style: italic; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.chip {
  font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.5em 1em;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  background: rgba(5, 8, 14, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.scroll-hint {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid);
  text-transform: uppercase; color: var(--text-faint);
  margin-block-start: var(--sp-3);
}
.scroll-hint::after {
  content: ''; width: 42px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  animation: hint 2.4s var(--ease-inout) infinite;
}
[dir='rtl'] .scroll-hint::after { background: linear-gradient(to left, var(--accent), transparent); }
@keyframes hint { 0%,100% { transform: scaleX(.4); opacity: .5 } 50% { transform: scaleX(1); opacity: 1 } }

/* CTA block inside the final chapter */
.cta-store { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.store-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(6, 10, 18, 0.55);
  color: var(--text);
  text-align: start;
  cursor: not-allowed;
  opacity: .82;
}
.store-btn svg { width: 22px; height: 22px; flex: none; color: var(--text-dim); }
.store-btn span { display: block; line-height: 1.2; }
.store-btn .store-btn__small { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.store-btn .store-btn__big { font-size: 0.92rem; letter-spacing: 0.02em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.cta-note { font-size: 0.78rem; color: var(--text-faint); }

/* ============================================================
   SCROLL PROGRESS — 1px hairline with a travelling gold marker
   ============================================================ */
.progress {
  position: fixed; inset-inline-end: 14px; inset-block: 22vh;
  width: 1px; z-index: var(--z-progress);
  background: rgba(245, 241, 232, 0.14);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease-out);
}
/* inset-inline-end already resolves to the left edge in RTL — no override. */
.progress.is-visible { opacity: 1; }
.progress__marker {
  position: absolute; inset-inline-start: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 12px 2px rgba(229, 190, 103, 0.6);
  transform: translateY(-50%);
}
.progress__tick {
  position: absolute; inset-inline-start: -2px;
  width: 5px; height: 1px; background: rgba(245, 241, 232, 0.3);
}
@media (max-width: 767px) { .progress { display: none; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cinema__frame, .cinema__scrim, .chapter__box { transition-duration: 1ms !important; }
  .bubble, .scroll-hint::after, .loader__eye path, .loader__eye circle { animation: none !important; }
  .loader__eye path, .loader__eye circle { stroke-dashoffset: 0 !important; }
  .loader__word, .loader__line { opacity: 1 !important; animation: none !important; }
  .cinema__bubbles { display: none; }
}