@import url("fonts.css");

/* ═══════════════════════════════════════════════════════════════════════
   يويو ولولو — نظام بصري مبني على اللؤلؤ والصَّدَف
   A visual system built from pearl, nacre and ink.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ink — the inside of the shell */
  --ink-900:#06070b;
  --ink-800:#0b0d13;
  --ink-700:#12141d;
  --ink-600:#1b1e2a;

  /* pearl */
  --pearl:#f5f0ea;
  --pearl-soft:#e4dbd2;
  --pearl-dim:#9a938d;
  --pearl-ghost:rgba(245,240,234,.38);

  /* nacre sheen */
  --n1:#f9d8c3;
  --n2:#dcc3ec;
  --n3:#a7e0df;
  --n4:#f3cf92;
  --amber:#e9a95d;
  --rose:#dd8c86;

  /* daylight chapter inverts to these */
  --day-bg:#efe7dd;
  --day-ink:#1a1712;

  --nacre:linear-gradient(104deg,var(--n1) 0%,var(--n2) 26%,var(--n3) 48%,var(--n4) 72%,var(--n1) 100%);

  --ar-display:"Thmanyah Display","Thmanyah Text",serif;
  --ar-text:"Thmanyah Text","Thmanyah Display",serif;
  --ar-sans:"Thmanyah Sans",system-ui,sans-serif;
  --en:"Fraunces",Georgia,serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --gutter:clamp(18px,5vw,90px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--ink-900);color:var(--pearl)}
body{
  font-family:var(--ar-text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--n2);color:var(--ink-900)}

/* ── atmospheric overlays ─────────────────────────────────────────────── */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:900}
.grain{
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}
.vignette{
  background:radial-gradient(130% 90% at 50% 45%,transparent 42%,rgba(3,4,7,.5) 82%,rgba(3,4,7,.86) 100%);
  z-index:899;
}
body.is-day .vignette{background:radial-gradient(130% 92% at 50% 45%,transparent 48%,rgba(80,62,42,.14) 86%,rgba(70,54,36,.26) 100%)}

/* ── typographic primitives ───────────────────────────────────────────── */
.nacre{
  background:var(--nacre);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 11s linear infinite;
}
@keyframes sheen{to{background-position:260% 0}}

.ar{direction:rtl;unicode-bidi:isolate}
.en{direction:ltr;unicode-bidi:isolate;font-family:var(--en)}

.kicker{
  font-family:var(--ar-sans);font-weight:500;
  font-size:clamp(10px,1.05vw,13px);letter-spacing:.42em;
  color:var(--pearl-dim);text-transform:uppercase;
}
.kicker.en{letter-spacing:.44em;font-family:var(--en);font-weight:500;font-size:clamp(9px,.9vw,11px)}

.poem{
  max-width:100%;
  font-family:var(--ar-display);font-weight:300;
  font-size:clamp(21px,2.5vw,40px);
  line-height:1.95;letter-spacing:.005em;
  color:var(--pearl);
}
.poem em{font-style:normal;font-weight:500;color:var(--n1)}
.poem--sm{font-size:clamp(18px,1.9vw,27px);line-height:1.9}
.poem-en{
  max-width:min(680px,100%);margin-inline:auto;overflow-wrap:break-word;
  font-family:var(--en);font-style:italic;font-weight:300;
  font-size:clamp(13px,1.12vw,17px);line-height:1.85;
  color:var(--pearl-ghost);letter-spacing:.012em;
  font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 1;
}

/* line-by-line reveal */
.ln{display:block;overflow:hidden}
.ln > span{display:block;transform:translateY(118%);opacity:0;will-change:transform}

/* ── photograph component ─────────────────────────────────────────────── */
.ph{position:relative;overflow:hidden;background:var(--ink-700);isolation:isolate}
.ph__lqip,.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.ph__lqip{filter:blur(18px) saturate(1.25);transform:scale(1.15);opacity:1;transition:opacity 1.1s var(--ease-soft)}
.ph__img{opacity:0;transition:opacity 1.1s var(--ease-soft)}
.ph.is-loaded .ph__img{opacity:1}
.ph.is-loaded .ph__lqip{opacity:0}
.ph::after{  /* a faint shell-light across every photograph */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(249,216,195,.07),transparent 38%,rgba(167,224,223,.06));
  mix-blend-mode:screen;
}

/* ═══ 0 · GATE ═════════════════════════════════════════════════════════ */
#gate{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  background:var(--ink-900);
}
.gate__inner{display:grid;justify-items:center;gap:clamp(26px,4vh,46px);text-align:center;padding:var(--gutter)}
.gate__pearl{
  position:relative;width:clamp(86px,13vw,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#f2e6dc 22%,#d9c6e0 48%,#9fc9cd 68%,#6f6478 100%);
  box-shadow:0 0 70px rgba(220,195,236,.3),inset -8px -10px 26px rgba(40,30,50,.45),inset 7px 8px 18px rgba(255,255,255,.55);
  animation:breathe 4.6s var(--ease-soft) infinite;
}
.gate__pearl::after{
  content:"";position:absolute;inset:-26%;border-radius:50%;
  border:1px solid rgba(220,195,236,.2);
  animation:halo 4.6s var(--ease-soft) infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes halo{0%,100%{transform:scale(.96);opacity:.5}50%{transform:scale(1.12);opacity:0}}
.gate__count{font-family:var(--en);font-weight:300;font-size:13px;letter-spacing:.3em;color:var(--pearl-dim)}
.gate__title{font-family:var(--ar-display);font-weight:300;font-size:clamp(26px,4.2vw,56px);line-height:1.5;opacity:0}
.gate__enter{
  display:grid;gap:10px;justify-items:center;opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease-soft);
}
.gate__enter.is-ready{opacity:1;pointer-events:auto}
.gate__enter .ar{font-family:var(--ar-sans);font-size:clamp(13px,1.35vw,16px);letter-spacing:.2em;color:var(--pearl)}
.gate__enter .en{font-family:var(--en);font-size:11px;letter-spacing:.34em;color:var(--pearl-dim);text-transform:uppercase}
.gate__enter button{padding:14px 30px;border:1px solid rgba(245,240,234,.18);border-radius:999px;transition:border-color .5s,background .5s}
.gate__enter button:hover{border-color:rgba(249,216,195,.6);background:rgba(249,216,195,.05)}

/* ═══ progress rail ════════════════════════════════════════════════════ */
.rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:880;background:rgba(245,240,234,.07)}
.rail__fill{height:100%;width:0;background:var(--nacre);background-size:200% 100%;animation:sheen 11s linear infinite}

.chapter-tag{
  position:fixed;z-index:870;bottom:clamp(16px,3vh,32px);left:var(--gutter);
  font-family:var(--ar-sans);font-size:11px;letter-spacing:.3em;color:var(--pearl-dim);
  opacity:0;transition:opacity .7s var(--ease-soft),color .7s;
  pointer-events:none;mix-blend-mode:difference;
}
.chapter-tag.is-on{opacity:.75}

/* ═══ generic section ══════════════════════════════════════════════════ */
.sec{position:relative;width:100%}
.sec__pad{padding-inline:var(--gutter)}

/* ═══ 1 · OVERTURE ═════════════════════════════════════════════════════ */
#overture{height:100svh;display:grid;place-items:center;overflow:hidden}
.ov__bg{position:absolute;inset:-6%;opacity:.22;filter:blur(22px) saturate(.75) brightness(.85)}
.ov__bg .ph{position:absolute;inset:0}
.ov__veil{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 48%,rgba(6,7,11,.2),var(--ink-900) 78%)}
.ov__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(20px,3.4vh,40px);text-align:center;width:100%;padding:0 var(--gutter)}

.names{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(10px,1.6vw,26px);
  font-family:var(--ar-display);font-weight:400;
  font-size:clamp(46px,12.5vw,190px);line-height:1;
  white-space:nowrap;
}
.names span{display:inline-block;will-change:transform,opacity}
.names .waw{
  font-weight:300;font-size:1.06em;
  background:var(--nacre);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 11s linear infinite;
  transform-origin:50% 60%;
}
.names .nm{color:var(--pearl)}

.ov__latin{
  font-family:var(--en);font-weight:300;font-style:italic;
  font-size:clamp(11px,1.15vw,15px);letter-spacing:.56em;
  color:var(--pearl-dim);text-transform:uppercase;padding-inline-start:.56em;
}
.ov__line{width:min(560px,74vw);display:grid;gap:14px;justify-items:center}
.ov__rule{width:1px;height:46px;background:linear-gradient(var(--pearl-ghost),transparent)}

.scrollcue{position:absolute;bottom:clamp(18px,4vh,46px);left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:9px;z-index:3}
.scrollcue span{font-family:var(--ar-sans);font-size:10px;letter-spacing:.34em;color:var(--pearl-dim)}
.scrollcue i{display:block;width:1px;height:52px;background:linear-gradient(var(--pearl-ghost),transparent);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--n1);box-shadow:0 0 10px var(--n1);animation:drop 2.4s var(--ease-soft) infinite}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}100%{transform:translateY(52px);opacity:0}}

/* ═══ 2 · PEARL ════════════════════════════════════════════════════════ */
#pearl{height:420svh}
.pearl__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.pearl__orb{
  position:relative;width:min(96vw,96svh);aspect-ratio:1;display:grid;place-items:center;
}
.pearl__photo{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(150vw,150svh);aspect-ratio:1;border-radius:50%;overflow:hidden;
  transform:scale(.04);will-change:transform;
}
.pearl__photo .ph{position:absolute;inset:0;border-radius:50%}
.pearl__photo .ph__img,.pearl__photo .ph__lqip{object-position:50% 30%}
.pearl__photo::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 120px rgba(6,7,11,.8),inset -30px -40px 90px rgba(6,7,11,.55);
}
.pearl__gloss{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(150vw,150svh);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.5),rgba(255,255,255,0) 36%);
  mix-blend-mode:screen;
}
.pearl__ring{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(150vw,150svh);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid transparent;
  background:conic-gradient(from 0deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n1)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;
}
.pearl__words{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 var(--gutter);z-index:4;pointer-events:none;
}
.pearl__words .poem{text-shadow:0 2px 40px rgba(6,7,11,.9)}
.pearl__word{position:absolute;opacity:0;width:min(720px,88vw)}
.pearl__word::before{content:"";position:absolute;inset:-34% -16%;background:radial-gradient(54% 52% at 50% 50%,rgba(6,7,11,.84),rgba(6,7,11,0) 72%);z-index:-1;pointer-events:none}
.pearl__words .poem-en{text-shadow:0 2px 22px rgba(6,7,11,.95)}

/* ═══ 3 · WARM (film strip) ════════════════════════════════════════════ */
#warm{background:linear-gradient(180deg,var(--ink-900),#0e0a08 45%,var(--ink-900))}
.warm__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.warm__glow{position:absolute;inset:0;background:radial-gradient(60% 46% at 50% 52%,rgba(233,169,93,.16),transparent 70%);pointer-events:none}
.strip{display:flex;align-items:center;gap:clamp(18px,2.6vw,52px);padding-inline:12vw;will-change:transform}
.strip__frame{position:relative;flex:0 0 auto;border-radius:3px;overflow:hidden}
.strip__frame .ph{width:100%;height:100%}
.strip__frame .ph__img,.strip__frame .ph__lqip{will-change:transform}
.strip__frame::before,.strip__frame::after{
  content:"";position:absolute;left:0;right:0;height:14px;z-index:3;
  background:repeating-linear-gradient(90deg,rgba(6,7,11,.92) 0 7px,transparent 7px 20px);
  opacity:.55;
}
.strip__frame::before{top:0}.strip__frame::after{bottom:0}
.f-tall{width:clamp(220px,25vw,400px);aspect-ratio:9/16}
.f-mid{width:clamp(190px,21vw,330px);aspect-ratio:3/4}
.f-wide{width:clamp(260px,34vw,560px);aspect-ratio:4/3}
.f-sm{width:clamp(130px,14vw,220px);aspect-ratio:1}
.strip__note{flex:0 0 auto;width:clamp(230px,26vw,400px);text-align:center;padding-inline:10px}
.strip__caption{
  position:absolute;bottom:18px;inset-inline-start:14px;z-index:4;
  font-family:var(--ar-sans);font-size:10px;letter-spacing:.28em;color:rgba(245,240,234,.62);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}

/* ═══ 4 · NIGHT (floating polaroids) ═══════════════════════════════════ */
#night{height:360svh;background:linear-gradient(180deg,var(--ink-900),#070a12 40%,#05070d)}
.night__stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1400px;display:grid;place-items:center}
.night__bokeh{position:absolute;inset:0;pointer-events:none}
.night__bokeh i{position:absolute;border-radius:50%;filter:blur(14px);opacity:.3;mix-blend-mode:screen}
.night__field{position:absolute;inset:0;transform-style:preserve-3d}
.polaroid{
  position:absolute;top:50%;left:50%;
  width:clamp(118px,15vw,230px);
  padding:9px 9px 34px;border-radius:2px;
  background:linear-gradient(170deg,#f6f1ea,#ddd4c8);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.25) inset;
  transform-style:preserve-3d;will-change:transform;
}
.polaroid .ph{aspect-ratio:1;border-radius:1px}
.polaroid b{
  display:block;margin-top:9px;text-align:center;
  font-family:var(--ar-sans);font-weight:400;font-size:10px;letter-spacing:.22em;color:#6d6459;
}
.night__words{position:relative;z-index:5;text-align:center;width:min(700px,86vw);padding:0 var(--gutter)}
.night__words::before{content:"";position:absolute;inset:-18% -26%;background:radial-gradient(58% 54% at 50% 50%,rgba(5,7,13,.88),rgba(5,7,13,0) 74%);z-index:-1;pointer-events:none}
.night__words .poem{text-shadow:0 2px 34px rgba(5,7,13,.96),0 0 90px rgba(5,7,13,.8)}
.night__words .poem-en{text-shadow:0 2px 20px rgba(5,7,13,.95)}

/* ═══ 5 · LAUGH (dealt deck + pout marquee) ════════════════════════════ */
#laugh{height:420svh}
.laugh__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.deck{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(92vw,1180px);height:min(84svh,820px)}
.card{
  position:absolute;top:50%;left:50%;
  width:clamp(130px,17vw,255px);aspect-ratio:9/13;
  margin:0;translate:-50% -50%;border-radius:4px;overflow:hidden;
  box-shadow:0 26px 52px rgba(0,0,0,.6);will-change:transform;
  border:1px solid rgba(245,240,234,.08);
}
.card .ph{position:absolute;inset:0}
.laugh__words{position:relative;z-index:6;text-align:center;width:min(640px,84vw);padding:0 var(--gutter);pointer-events:none}
.laugh__words::before{content:"";position:absolute;inset:-26% -34%;background:radial-gradient(56% 52% at 50% 50%,rgba(6,7,11,.9),rgba(6,7,11,0) 72%);z-index:-1;pointer-events:none}
.laugh__words .poem{text-shadow:0 4px 40px rgba(6,7,11,.95)}
.laugh__words .poem-en{text-shadow:0 2px 22px rgba(6,7,11,.95)}

.marquee{position:relative;overflow:hidden;padding:clamp(66px,12vh,140px) 0;background:var(--ink-900)}
.marquee__row{display:flex;width:max-content;gap:14px;will-change:transform}
.marquee__row .ph{width:clamp(96px,11vw,168px);aspect-ratio:3/4;border-radius:2px;flex:0 0 auto}
.marquee__label{
  position:absolute;z-index:4;top:50%;left:50%;translate:-50% -50%;
  background:rgba(6,7,11,.72);backdrop-filter:blur(7px);
  padding:16px clamp(20px,3vw,38px);border-radius:999px;border:1px solid rgba(245,240,234,.1);
  text-align:center;
}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:18vw;z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--ink-900),transparent)}

/* ═══ 6 · DAY (the palette flips) ══════════════════════════════════════ */
#day{position:relative;background:var(--day-bg);color:var(--day-ink);padding:clamp(70px,13vh,160px) 0}
#day .poem{color:var(--day-ink)}
#day .poem em{color:#9a5f3c}
#day .poem-en{color:rgba(26,23,18,.5)}
#day .kicker{color:rgba(26,23,18,.46)}
.day__head{text-align:center;display:grid;gap:18px;justify-items:center;padding:0 var(--gutter);margin-bottom:clamp(40px,8vh,96px)}
.day__sun{
  width:clamp(60px,9vw,120px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff,#f7dcae 44%,#e9a95d 78%,#d08a4a);
  box-shadow:0 0 70px rgba(233,169,93,.55);
}
.day__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,34px);padding:0 var(--gutter);align-items:start}
.day__col{display:grid;gap:clamp(12px,2vw,34px);will-change:transform}
.day__col .ph{width:100%;border-radius:3px;box-shadow:0 20px 44px rgba(90,66,44,.22)}
.r-tall{aspect-ratio:9/16}.r-port{aspect-ratio:3/4}.r-sq{aspect-ratio:1}
.day__quote{
  padding:clamp(18px,3vw,40px) clamp(14px,2vw,26px);text-align:center;
  border-block:1px solid rgba(26,23,18,.14);
}
/* the split loaf */
.split{display:grid;place-items:center;gap:clamp(18px,3vh,40px);padding:clamp(60px,11vh,140px) var(--gutter) 0;text-align:center}
.split__pair{display:flex;gap:clamp(6px,1.4vw,26px);width:min(760px,88vw)}
.split__half{flex:1;aspect-ratio:3/4;overflow:hidden;border-radius:3px;box-shadow:0 22px 48px rgba(90,66,44,.24);will-change:transform}
.split__half{position:relative;direction:ltr}
.split__half .ph{position:absolute;top:0;right:auto;bottom:0;width:200%;height:100%}
.split__half--a .ph{left:0}
.split__half--b .ph{left:-100%}

/* ═══ 7 · STRING (the yo-yo) ═══════════════════════════════════════════ */
#string{height:380svh;background:linear-gradient(180deg,var(--day-bg) 0%,#6d6054 14%,var(--ink-900) 40%,var(--ink-900))}
.string__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.string__line{position:absolute;top:0;left:50%;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(245,240,234,.4) 18%,rgba(245,240,234,.4) 70%,transparent);transform-origin:50% 0}
.yoyo{
  position:absolute;top:0;left:50%;
  width:clamp(108px,13.5vw,198px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  translate:-50% 0;cursor:grab;touch-action:none;
  box-shadow:0 0 0 1px rgba(245,240,234,.18),0 30px 70px rgba(0,0,0,.65),inset 0 0 50px rgba(6,7,11,.5);
  will-change:transform;
}
.yoyo:active{cursor:grabbing}
.yoyo .ph{position:absolute;inset:0;border-radius:50%}
.yoyo::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.42),transparent 40%);
  mix-blend-mode:screen;
}
.string__words{position:absolute;bottom:7.5%;left:50%;transform:translateX(-50%);z-index:5;text-align:center;width:min(680px,86vw);padding:0 var(--gutter);pointer-events:none}
.string__words::before{content:"";position:absolute;inset:-24% -30%;background:radial-gradient(56% 54% at 50% 50%,rgba(6,7,11,.9),rgba(6,7,11,0) 74%);z-index:-1;pointer-events:none}
.string__words .poem{text-shadow:0 2px 30px rgba(6,7,11,.95)}
.string__words .poem-en{text-shadow:0 2px 18px rgba(6,7,11,.95)}
.string__hint{
  position:absolute;bottom:clamp(12px,2.6vh,30px);left:50%;translate:-50% 0;z-index:6;
  font-family:var(--ar-sans);font-size:11px;letter-spacing:.26em;color:var(--pearl-dim);opacity:.8;
}

/* ═══ 8 · MOSAIC ═══════════════════════════════════════════════════════ */
#mosaic{padding:clamp(70px,13vh,160px) 0;background:var(--ink-900)}
.mos__head{text-align:center;display:grid;gap:16px;justify-items:center;padding:0 var(--gutter);margin-bottom:clamp(36px,7vh,82px)}
.mos__count{font-family:var(--en);font-weight:200;font-size:clamp(70px,16vw,230px);line-height:.84;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1}
.mos__grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(5px,.7vw,11px);
  padding:0 var(--gutter);
}
.mos__grid .ph{aspect-ratio:3/4;border-radius:2px;will-change:transform,opacity;cursor:pointer;transition:filter .5s var(--ease-soft)}
.mos__grid .ph{filter:grayscale(.55) brightness(.78)}
.mos__grid .ph:hover{filter:none}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:950;display:grid;place-items:center;
  background:rgba(4,5,8,.92);backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease-soft);
}
.lightbox.is-on{opacity:1;pointer-events:auto}
.lightbox .ph{width:min(86vw,440px);aspect-ratio:9/16;border-radius:5px;box-shadow:0 40px 90px rgba(0,0,0,.7);transform:scale(.93);transition:transform .6s var(--ease-out)}
.lightbox.is-on .ph{transform:scale(1)}
.lightbox__close{position:absolute;top:var(--gutter);inset-inline-end:var(--gutter);font-family:var(--ar-sans);font-size:11px;letter-spacing:.28em;color:var(--pearl-dim)}

/* ═══ 9 · FINALE ═══════════════════════════════════════════════════════ */
#finale{position:relative;min-height:150svh;display:grid;align-items:center;overflow:hidden;background:var(--ink-900)}
.fin__bg{position:absolute;inset:-8%;opacity:.1;filter:blur(30px) saturate(.6)}
.fin__bg .ph{position:absolute;inset:0}
.fin__inner{position:relative;z-index:3;display:grid;justify-items:center;gap:clamp(26px,5vh,64px);text-align:center;padding:clamp(80px,16vh,200px) var(--gutter)}
.fin__waw{
  font-family:var(--ar-display);font-weight:300;font-size:clamp(120px,27vw,420px);line-height:.9;
  background:var(--nacre);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 11s linear infinite,float 7s var(--ease-soft) infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.fin__sign{display:grid;gap:12px;justify-items:center}
.fin__sign .ar{font-family:var(--ar-display);font-weight:400;font-size:clamp(19px,2.4vw,34px)}
.fin__sign .en{font-family:var(--en);font-style:italic;font-size:clamp(12px,1.1vw,15px);color:var(--pearl-dim);letter-spacing:.1em}
.fin__replay{
  margin-top:10px;padding:13px 28px;border:1px solid rgba(245,240,234,.16);border-radius:999px;
  font-family:var(--ar-sans);font-size:12px;letter-spacing:.24em;color:var(--pearl-dim);
  transition:border-color .5s,color .5s,background .5s;
}
.fin__replay:hover{border-color:var(--n1);color:var(--pearl);background:rgba(249,216,195,.06)}
.fin__dust{position:absolute;inset:0;pointer-events:none;z-index:2}
.fin__dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--n1);opacity:0;box-shadow:0 0 8px var(--n1)}

/* ═══ cursor ═══════════════════════════════════════════════════════════ */
.cursor{
  position:fixed;top:0;left:0;z-index:990;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#e8d9ea 40%,#9fb7c9 75%,#6f6478);
  pointer-events:none;mix-blend-mode:screen;opacity:0;
  transition:opacity .4s,width .35s var(--ease-out),height .35s var(--ease-out);
}
.cursor.is-on{opacity:.9}
.cursor.is-big{width:44px;height:44px}
@media (pointer:coarse){.cursor{display:none}}

/* ═══ responsive ═══════════════════════════════════════════════════════ */
@media (max-width:900px){
  .mos__grid{grid-template-columns:repeat(4,1fr)}
  .day__cols{grid-template-columns:repeat(2,1fr)}
  #night{height:300svh}
  #laugh{height:360svh}
  #pearl{height:340svh}
  #string{height:320svh}
}
@media (max-width:620px){
  .night__words::before{inset:-26% -40%;background:radial-gradient(62% 56% at 50% 50%,rgba(5,7,13,.94),rgba(5,7,13,0) 76%)}
  .pearl__word::before{inset:-38% -26%;background:radial-gradient(60% 56% at 50% 50%,rgba(6,7,11,.9),rgba(6,7,11,0) 76%)}
  .string__words{bottom:8%}
  .string__words::before{inset:-28% -40%;background:radial-gradient(60% 56% at 50% 50%,rgba(6,7,11,.94),rgba(6,7,11,0) 76%)}
  .names{font-size:clamp(42px,15vw,86px);gap:8px}
  .ov__latin{letter-spacing:.38em;font-size:10px}
  .mos__grid{grid-template-columns:repeat(3,1fr)}
  .day__cols{grid-template-columns:1fr;gap:16px}
  .day__col{gap:16px}
  .polaroid{width:clamp(104px,34vw,150px);padding:7px 7px 26px}
  .card{width:clamp(112px,36vw,170px)}
  .marquee__row .ph{width:clamp(82px,24vw,120px)}
  .chapter-tag{font-size:9px;letter-spacing:.22em}
  .split__pair{gap:5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .ln > span{transform:none;opacity:1}
}

/* ── the film strip becomes a column on small screens ─────────────────── */
body.warm-stack #warm{height:auto}
body.warm-stack .warm__stage{position:relative;height:auto;display:block;padding:clamp(60px,11vh,110px) 0}
body.warm-stack .strip{
  flex-direction:column;align-items:center;gap:clamp(22px,4vh,40px);
  padding-inline:var(--gutter);transform:none !important;width:100%;
}
body.warm-stack .strip__frame{width:min(76vw,360px) !important}
body.warm-stack .strip__note{width:min(80vw,420px)}