/* DAR — mobile-first landing. Palette comes straight from the film:
   warm black, amber liquid, brass cap, green marble. */
:root {
  --ink: #0b0a08;
  --ink-2: #14120e;
  --amber: #c8862f;
  --brass: #d9b56c;
  --cream: #f1e6d2;
  --muted: rgba(241, 230, 210, .62);
  --marble: #16201b;
  --ar: "Amiri", serif;
  --fr: "Cormorant Garamond", serif;
  --ui: "Inter", system-ui, sans-serif;
  --col: min(100vw, 480px);          /* phone column: the page never grows wider */
  --pad: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #050403; -webkit-text-size-adjust: 100%; }
body {
  max-width: 480px; margin: 0 auto; background: var(--ink); color: var(--cream);
  font-family: var(--ar); font-size: 18px; line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; height: 100svh; }
a { color: inherit; text-decoration: none; }
video { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; }
.fr { font-family: var(--fr); font-style: italic; font-weight: 300; color: var(--muted); font-size: 20px; }
.kicker { font-family: var(--ui); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--brass); }

/* gradient so text stays readable on top of video */
.shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 50%, transparent 40%, rgba(11,10,8,.55)); }
.shade--bottom { background: linear-gradient(to top, rgba(11,10,8,.95) 0%, rgba(11,10,8,.4) 38%, transparent 62%); }
.shade--strong { background: linear-gradient(to top, rgba(11,10,8,.98) 0%, rgba(11,10,8,.75) 50%, rgba(11,10,8,.2) 100%); }

/* film grain: makes the AI video and the flat UI feel like one material */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-5%)} 75%{transform:translate(-2%,4%)} }

/* 0 · loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink);
  display: grid; place-content: center; gap: 22px; justify-items: center; }
.loader__word { font-family: var(--fr); font-weight: 300; font-size: 64px; letter-spacing: .4em;
  padding-left: .4em; display: flex; overflow: hidden; direction: ltr; color: var(--brass); }
.loader__word span { display: inline-block; }
.loader__bar { width: 120px; height: 1px; background: rgba(217,181,108,.2); }
.loader__bar i { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }

/* top bar */
.topbar { position: fixed; top: 0; z-index: 50; width: var(--col); display: flex; justify-content: space-between;
  align-items: center; padding: calc(14px + env(safe-area-inset-top)) var(--pad) 14px; }
.logo { font-family: var(--fr); font-size: 20px; letter-spacing: .45em; color: var(--cream); }
.topbar__cta { font-size: 15px; padding: 6px 16px; border: 1px solid rgba(217,181,108,.5); border-radius: 99px; color: var(--brass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(11,10,8,.25); }

/* 1 · hero */
.hero { position: relative; height: 100svh; overflow: hidden; }
.hero__media, .hero__video { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero__text { position: absolute; inset: auto 0 0; padding: 0 var(--pad) calc(96px + env(safe-area-inset-bottom)); }
/* Arabic diacritics (ḍamma, shadda) sit above the cap height: give them air */
.hero__title { font-size: clamp(64px, 21vw, 96px); line-height: 1.3; margin: 18px 0 2px; }
/* French lines follow the Arabic edge, so each block reads as one column */
main p[dir="ltr"]:not(.small) { text-align: right; }
.hero__title .line { display: inline-block; }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; width: 1px; height: 44px; background: rgba(241,230,210,.18); overflow: hidden; }
.scroll-hint i { position: absolute; inset: 0; background: var(--brass); animation: hint 2.2s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes hint { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* 2 · manifesto */
.manifesto { padding: 30svh var(--pad) 26svh; }
.manifesto__ar { font-size: 38px; line-height: 1.45; }
.manifesto__ar .w { opacity: .14; transition: none; }
.manifesto__fr { margin-top: 28px; font-size: 22px; }

/* 3–4 · scrubbed video scenes (pinned by GSAP) */
.scrub { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
.scrub > video { position: absolute; inset: 0; }
.scrub__copy { position: absolute; inset: 0; padding: 0 var(--pad); }
.beat { position: absolute; inset: auto var(--pad) 18svh; opacity: 0; }
.beat h2 { font-size: 44px; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.beat .fr { margin-top: 8px; }
.beat--low { bottom: 12svh; }

/* the "portal": the Casbah opens from the middle of the bottle */
.portal { position: absolute; inset: 0; clip-path: circle(0% at 50% 58%); }
.portal video { position: absolute; inset: 0; }

/* 5 · notes (horizontal) */
.notes { position: relative; height: 100svh; overflow: hidden; background: var(--ink-2); }
.notes__head { position: absolute; z-index: 2; top: calc(76px + env(safe-area-inset-top)); inset-inline: var(--pad); }
.notes__head h2 { font-size: 34px; margin-top: 6px; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.notes::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 34%; pointer-events: none;
  background: linear-gradient(rgba(11,10,8,.85), transparent); }
/* row-reverse: card 01 sits on the right, like an Arabic page; GSAP slides the track rightwards */
.notes__track { display: flex; flex-direction: row-reverse; height: 100%; width: calc(var(--col) * 3); }
.note { position: relative; flex: 0 0 var(--col); height: 100%; overflow: hidden; }
.note video { position: absolute; inset: 0; transform: scale(1.15); }
.note__text { position: absolute; inset: auto var(--pad) 90px; }
.note__num { font-family: var(--ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.note h3 { font-size: 48px; margin: 6px 0 4px; }
.notes__dots { position: absolute; z-index: 2; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; direction: rtl; }
.notes__dots i { width: 22px; height: 2px; background: rgba(241,230,210,.25); }
.notes__dots i.on { background: var(--brass); }

/* 6 · facts */
.facts { padding: 20svh var(--pad); background:
  radial-gradient(80% 60% at 50% 0%, rgba(200,134,47,.14), transparent 70%), var(--marble); }
.facts ul { list-style: none; display: grid; gap: 54px; }
.facts li { border-top: 1px solid rgba(217,181,108,.25); padding-top: 18px; }
.facts b, .facts li > span { font-family: var(--fr); font-weight: 300; font-size: 88px; line-height: 1; color: var(--brass); direction: ltr; }
.facts li > span { font-size: 40px; margin-inline-start: 4px; }
.facts p { font-size: 19px; margin-top: 10px; }
.facts em { font-family: var(--fr); color: var(--muted); }

/* 7 · order */
.order { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.order > video { position: absolute; inset: 0; }
.order__card { position: relative; padding: 0 var(--pad) 36px; }
.order h2 { font-size: 52px; margin: 8px 0 12px; }
.price b { font-family: var(--fr); font-weight: 500; font-size: 38px; color: var(--brass); }
.perks { list-style: none; margin: 16px 0 26px; display: grid; gap: 6px; font-size: 17px; }
.perks li::before { content: "◆"; color: var(--amber); font-size: 9px; margin-inline-end: 10px; vertical-align: middle; }
.btn { position: relative; display: flex; justify-content: center; align-items: center; height: 60px; border-radius: 99px;
  background: linear-gradient(180deg, #e2c27c, #b88a3c); color: #1a120a; font-size: 21px; font-weight: 700; overflow: hidden;
  box-shadow: 0 10px 40px rgba(200,134,47,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn:active { transform: scale(.97); }
.small { font-size: 16px; text-align: center; margin-top: 14px; }
.foot { position: relative; text-align: center; font-family: var(--ui); font-size: 10px; letter-spacing: .2em; color: rgba(241,230,210,.35);
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); text-transform: uppercase; }

/* sticky order bar (thumb zone) */
.sticky { position: fixed; z-index: 60; bottom: calc(12px + env(safe-area-inset-bottom)); left: 0; right: 0; margin-inline: auto;
  width: calc(var(--col) - 2 * 16px); transform: translateY(140%);
  display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 8px 0 20px; border-radius: 99px;
  background: rgba(20,18,14,.72); border: 1px solid rgba(217,181,108,.3);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.sticky span { font-family: var(--fr); letter-spacing: .2em; font-size: 14px; color: var(--muted); direction: ltr; }
.sticky b { background: var(--brass); color: #1a120a; padding: 9px 20px; border-radius: 99px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-hint i, .btn::after { animation: none; }
}