/* SUPER CODING · a film, then the facts. Black and white; one warm tone, taken from the meteor's fire, for the
   words that matter. Alexandria for display, IBM Plex Sans Arabic for reading, Inter for Latin. */
:root {
  --bg: #000; --ink: #fff; --dim: rgba(255,255,255,.64); --line: rgba(255,255,255,.16); --fire: #ff8a4c;
  --warm: linear-gradient(100deg, #fff 5%, #ffd9b3 45%, #ff8a4c 95%);
  --show: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; --ar: 'IBM Plex Sans Arabic', sans-serif; --en: 'Inter', sans-serif;
  --gut: clamp(20px, 4.4vw, 72px); --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { font-family: var(--ar); font-weight: 400; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
html[lang="en"] body { font-family: var(--en); line-height: 1.5; }
html[lang="en"] { --show: 'Inter', sans-serif; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* the hero's film clip is drawn on the canvas; its <video> only has to be in the page */
.clip { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
#film { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; }
main { position: relative; z-index: 1; }
.s { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* the loader: black, a thin line filling, then gone */
.loader { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; transition: opacity .9s ease .1s, visibility 0s 1s; }
.loader i { width: 120px; height: 1px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.loader i::after { content: ''; position: absolute; inset: 0; background: #fff; animation: load 1.4s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.loader.done { opacity: 0; visibility: hidden; }

/* the bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gut) 34px; background: linear-gradient(rgba(0,0,0,.6), transparent); pointer-events: none; }
.bar a { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 17px var(--en); letter-spacing: -.02em; direction: ltr; }
.logo i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ccd4 55%, #6d717c); box-shadow: 0 0 14px rgba(255,255,255,.35); }
.bar-r { display: flex; align-items: center; gap: 30px; }
.ln { font-size: 14.5px; color: var(--dim); transition: color .25s; } .ln:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 40px; background: #fff; color: #000; font-size: 16px; font-weight: 500; border: 1px solid #fff; transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.btn:hover { transform: translateY(-2px); background: #ececec; }
.btn.sm { padding: 9px 20px; font-size: 14px; }
.btn.ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.3); }
.btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn i { font-style: normal; }
.lang { font: 500 13px var(--en); color: var(--dim); transition: color .25s; } .lang:hover { color: #fff; }
html[lang="en"] .lang { font: 500 16px var(--ar); }

/* shared words */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dim); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--fire); }
.title { font-family: var(--show); font-weight: 600; font-size: clamp(46px, 6.6vw, 122px); line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
html[lang="en"] .title { letter-spacing: -.055em; line-height: 1; font-size: clamp(42px, 5.1vw, 96px); }
.title span { display: block; }
.warm { background: var(--warm); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; }
.lede { font-size: clamp(16px, 1.35vw, 20px); color: rgba(255,255,255,.78); max-width: 29em; }
.h2 { font-family: var(--show); font-weight: 600; font-size: clamp(30px, 4vw, 66px); line-height: 1.22; letter-spacing: -.025em; max-width: 16em; text-wrap: balance; }
html[lang="en"] .h2 { letter-spacing: -.045em; line-height: 1.04; }

/* the film: three designed screens, one over each shot */
.reel { height: 720vh; }
.cap { position: absolute; inset: 0; display: grid; align-items: center; padding: 100px var(--gut) 150px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.cap.on { opacity: 1; visibility: visible; transition: opacity .6s .1s, visibility 0s; }
html:not(.ready) .cap { opacity: 0; }
.opening .col { width: min(43vw, 640px); }
.col { position: relative; width: min(47vw, 680px); display: grid; gap: 24px; justify-items: start; }
/* each line of a screen comes up in turn */
.col > *, .facts > li { opacity: 0; transform: translateY(28px); transition: opacity .4s, transform .5s var(--ease); }
.cap.on .col > *, .cap.on .facts > li { opacity: 1; transform: none; transition: opacity .9s, transform 1.1s var(--ease); }
.cap.on .col > :nth-child(1) { transition-delay: .15s; } .cap.on .col > :nth-child(2) { transition-delay: .25s; } .cap.on .col > :nth-child(3) { transition-delay: .37s; } .cap.on .col > :nth-child(4) { transition-delay: .49s; }
.cap.on .facts > :nth-child(1) { transition-delay: .6s; } .cap.on .facts > :nth-child(2) { transition-delay: .68s; } .cap.on .facts > :nth-child(3) { transition-delay: .76s; } .cap.on .facts > :nth-child(4) { transition-delay: .84s; }

.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.05); font-size: 13.5px; color: rgba(255,255,255,.86); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--fire); box-shadow: 0 0 0 0 rgba(255,138,76,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(255,138,76,0); } }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.facts { position: absolute; inset: auto var(--gut) 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 250px)) 1fr; gap: clamp(20px, 3.4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 2px; align-content: start; }
.facts b { font: 600 clamp(24px, 2.2vw, 34px)/1.1 var(--en); letter-spacing: -.03em; }
.facts span { font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.facts .cue { justify-self: end; align-self: center; grid-auto-flow: column; align-items: center; gap: 12px; }
.cue i { width: 1px; height: 34px; background: linear-gradient(#fff, transparent); animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* a chapter: a shade over the words' side of the picture, a great hollow numeral, a ruled list */
.chapter::before, .opening::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.86), rgba(0,0,0,.55) 34%, transparent 62%); }
html[dir="rtl"] .chapter::before, html[dir="rtl"] .opening::before { background: linear-gradient(to left, rgba(0,0,0,.86), rgba(0,0,0,.55) 34%, transparent 62%); }
.opening::before { opacity: .75; }
.count { position: absolute; top: 76px; inset-inline-start: calc(var(--gut) - .04em); font: 700 clamp(120px, 21vw, 380px)/.8 var(--en); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.3); }
.chapter .col { margin-top: 9vh; }
.points { width: 100%; max-width: 520px; margin-top: 6px; border-top: 1px solid var(--line); }
.points li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.15vw, 17px); }
.points li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fire); }

/* where we are in the film */
.ticks { position: absolute; z-index: 2; top: 50%; inset-inline-end: 22px; translate: 0 -50%; display: grid; gap: 14px; }
.ticks { transition: opacity .5s; } html[data-shot="0"] .ticks, html[data-shot="-1"] .ticks { opacity: 0; }
.ticks li { --f: 0; display: grid; justify-items: center; gap: 8px; }
.ticks b { font: 500 10.5px var(--en); color: var(--dim); font-variant-numeric: tabular-nums; }
.ticks i { width: 2px; height: 46px; border-radius: 2px; background: linear-gradient(#fff, #fff) top / 100% calc(var(--f) * 100%) no-repeat, rgba(255,255,255,.2); }

/* the plain page */
.plain { background: #000; padding: clamp(90px, 15vh, 180px) var(--gut); }
.head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(44px, 8vh, 96px); opacity: 0; transform: translateY(30px); transition: opacity .9s, transform 1.1s var(--ease); }
.rise { opacity: 0; transform: translateY(40px); transition: opacity .9s, transform 1.1s var(--ease); }
.head.in, .rise.in { opacity: 1; transform: none; }

.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px) clamp(18px, 2.4vw, 36px); }
.card { display: grid; gap: 16px; }
.card:nth-child(even) { transition-delay: .12s; }
.card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #111; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover img { transform: scale(1.035); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card-meta b { font-family: var(--show); font-weight: 500; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.01em; }
.card-meta span { font-size: 14px; color: var(--dim); }

.rows { border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 70px 1fr 1.1fr; gap: 20px; align-items: baseline; padding: clamp(22px, 3.4vh, 40px) 0; border-bottom: 1px solid var(--line); }
.no { font: 400 13px var(--en); color: var(--fire); font-variant-numeric: tabular-nums; }
.rows b { font-family: var(--show); font-weight: 500; font-size: clamp(24px, 3vw, 48px); line-height: 1.25; letter-spacing: -.02em; }
html[lang="en"] .rows b { letter-spacing: -.04em; }
.d { font-size: clamp(15px, 1.2vw, 18px); color: var(--dim); }
.rows li:nth-child(2) { transition-delay: .06s; } .rows li:nth-child(3) { transition-delay: .12s; } .rows li:nth-child(4) { transition-delay: .18s; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 36px); }
.steps li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.steps b { font-family: var(--show); font-weight: 500; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.35; letter-spacing: -.01em; }
.steps li:nth-child(2) { transition-delay: .08s; } .steps li:nth-child(3) { transition-delay: .16s; } .steps li:nth-child(4) { transition-delay: .24s; }

/* the last screen: the Moon again, after */
.contact { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--gut) 22px; }
.contact::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.c-box { align-self: center; display: grid; gap: 22px; justify-items: start; padding-top: 14vh; text-shadow: 0 2px 40px rgba(0,0,0,.7); }
.c-box .btn { margin-top: 12px; text-shadow: none; }
.foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.f-links { display: flex; gap: 22px; } .f-links a:hover { color: #fff; }

/* tall screens: the picture's subject above, the words below */
@media (max-aspect-ratio: 1/1) {
  .ln { display: none; } .bar-r { gap: 16px; } .bar { padding: 14px var(--gut) 30px; }
  .cap { align-items: end; padding: 90px var(--gut) 44px; }
  .col, .opening .col { width: 100%; gap: 14px; } .title { font-size: clamp(40px, 12.4vw, 76px); } html[lang="en"] .title { font-size: clamp(38px, 11.4vw, 70px); }
  .lede { font-size: 15.5px; } .btn { padding: 13px 24px; font-size: 15px; } .chip { font-size: 12.5px; padding: 7px 13px; }
  .facts { position: static; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 14px; } .facts .cue { display: none; } .facts span { font-size: 11.5px; } .facts b { font-size: 22px; }
  .opening { align-content: end; }
  .chapter::before, html[dir="rtl"] .chapter::before, .opening::before, html[dir="rtl"] .opening::before { background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.6) 40%, transparent 70%); }
  .count { top: 70px; font-size: 34vw; } .chapter .col { margin-top: 0; } .points li { padding: 10px 0; font-size: 14.5px; }
  .ticks { inset-inline-end: 8px; } .ticks i { height: 30px; } .ticks b { display: none; }
  .w-grid { grid-template-columns: 1fr; gap: 36px; } .card:nth-child(even) { transition-delay: 0s; }
  .rows li { grid-template-columns: 34px 1fr; gap: 6px 10px; } .rows .d { grid-column: 2; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .foot { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cue i, .loader i::after, .chip i { animation: none; } .cap, .col > *, .facts > li, .rise, .head { transition-duration: .01s; } }