/* Direction B · mukth, take 2 (alternative): the ayah on the night pool, a fall through the word into the
   Dusk Pool world (copied from directions/b), the pull-back to the ayah, the Ramadan line.
   Below is B's stylesheet with the stage split in two: .world (B's art + words, scaled as one) and the
   lens canvas + the ayah above it. Additions are at the end of the file.
   (B header:) Dusk Pool · round 2: day → night
   Default CSS = the still, flowing composition (no JS, or reduced motion): day at the top of the page,
   night at the bottom. html.film = the pinned, scroll-scrubbed film (b.js drives transform/opacity).
   Palette aligned with the app (WaslLowPoly env.gd sky keys + UI theme): see docs/DESIGN-B.md. */

/* ---------- fonts (OFL, self-hosted subsets; see docs/DESIGN-B.md) ---------- */
@font-face {
  font-family: "SB Naskh";
  src: url("fonts/sb-ar.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0020, U+002C-002E, U+003A, U+00A0, U+0600-06FF, U+200C-200F, U+2013-2014, U+00B7, U+00AB, U+00BB, U+2026;
}
@font-face {
  font-family: "SB Text";
  src: url("fonts/sb-lat.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2026;
}
@font-face {
  font-family: "SB Display";
  src: url("fonts/sb-disp.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2026;
}
@font-face {
  font-family: "SB Display";
  src: url("fonts/sb-disp-it.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2026;
}

/* the vine's line colour eases between day ink-gold and night gold (one short transition) */
@property --vine-c { syntax: "<color>"; inherits: true; initial-value: #e6c37e; }
@property --vine-g { syntax: "<color>"; inherits: true; initial-value: rgba(255, 200, 120, .16); }

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --deep: #081a28;
  /* night text (app night theme: ink #eee6d3, gold #e6c271) */
  --ink: #f7efdf;
  --ink-soft: #d8cdbb;
  --gold-text: #f2d08c;
  --gold: #e9c476;
  /* day text (app day theme: ink #2e2a22, gold #94661a, darkened for AA on the day sky) */
  --day-ink: #2a2620;
  --day-soft: #3a3428;
  --day-gold: #563c0c;
  --day-name: #6a4814;
  --focus: #f6d995;
  --edge-h: 18px;
  --ph: clamp(150px, 26svh, 250px);
  /* waterline (percent of the visible stage height) at each beat; b.js reads these */
  --wl-bank: 60;
  --wl-lines: 37;
  --wl-ayah: 71;
  --wl-fin: 44;
  --line-y: 67;
  /* motif line-style tokens (dusk gold) */
  --sd-bg: #0c1630;
  --sd-line: #e6c37e;
  --sd-outline: #cba15a;
  --sd-gold: #d1a85a;
  --sd-glow: rgba(255, 204, 120, .66);
  --sd-glow-2: rgba(255, 186, 96, .22);
  --sd-vein: rgba(239, 211, 154, .8);
  --font-ar: "SB Naskh", "SB Text", "Geeza Pro", serif;
  --font-en: "SB Text", "Iowan Old Style", Georgia, serif;
  --font-disp-en: "SB Display", "SB Text", Georgia, serif;
}
@media (min-width: 760px) {
  :root { --edge-h: 24px; --ph: clamp(220px, 34svh, 340px); --wl-bank: 62; --wl-lines: 40; --wl-ayah: 72; --wl-fin: 52; --line-y: 69; }
}
@media (max-height: 520px) {
  :root { --ph: clamp(96px, 30svh, 150px); --edge-h: 14px; --wl-fin: 46; }
}

html { background: var(--deep); }
body {
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 1.0625rem;
}
html[lang="ar"] body { font-family: var(--font-ar); }
main { outline: none; display: block; }
::selection { background: rgba(242, 208, 140, .35); color: #fff; }

/* ---------- header: plain-text language toggle, with a soft feathered shade (no box) ---------- */
.top {
  position: absolute; z-index: 30;
  inset-block-start: max(14px, env(safe-area-inset-top));
  inset-inline-end: max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  --shade: rgba(250, 246, 236, .7);
  color: var(--day-ink);
}
html.film .top { position: fixed; transition: color .5s; }
html.film.is-night .top { --shade: rgba(8, 14, 36, .52); color: var(--ink-soft); }
.top::before {
  content: ""; position: absolute; z-index: -1; inset: -.9rem -1rem; pointer-events: none;
  background: radial-gradient(closest-side, var(--shade) 40%, transparent);
  transition: opacity .5s;
}
.top .lang-toggle {
  font: 500 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: inherit; border-bottom-color: currentColor;
  padding-block: .35em .2em;
}
html[lang="en"] .top .lang-toggle { font-family: var(--font-ar); font-size: 1.05rem; }
.skip-link { background: #0a1230; color: var(--ink); }

/* ============================================================
   ART
   ============================================================ */
.stage { position: relative; overflow-x: clip; }
.world { position: relative; }
.art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.art > * { position: absolute; }
.art i { display: block; position: absolute; }
.glint, .ripples { position: absolute; }

/* sky layers: night is the base; dusk, golden hour and day sit above it and fade out in turn */
.sky { inset: -14svh 0 auto 0; height: calc(100lvh + 28svh); }
.sky-night { background: linear-gradient(180deg, #080d26 0%, #0e1640 30%, #1a2152 56%, #2b2a5c 78%, #3d3266 100%); }
.sky-dusk  { background: linear-gradient(180deg, #4a3a78 0%, #7c5890 30%, #b16986 60%, #db776b 84%, #f2a36e 100%); }
.sky-gold  { background: linear-gradient(180deg, #4f5c98 0%, #8e94c4 32%, #d9b3a4 62%, #f6bf8a 86%, #ffd29e 100%); }
.sky-day   { background: linear-gradient(180deg, #6f9bd4 0%, #9dbde2 34%, #c9dbe9 62%, #ece6dc 84%, #f6e8d6 100%); }

/* stars: three sparse layers of box-shadows, night only, twinkling very slowly */
.night-sky { inset: 0; opacity: 0; }
.night-sky .stars { position: absolute; }
.stars { top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.stars-a {
  box-shadow: 4vw 28svh 0 0 rgba(255,240,215,.55), 53vw 16.5svh 0 0 rgba(255,240,215,.5), 67vw 30svh 0 0 rgba(255,240,215,.45),
    69vw 9.5svh 0 0 rgba(255,240,215,.5), 88.9vw 21.4svh 0 0 rgba(255,240,215,.62), 74vw 24svh 0 .6px rgba(255,244,222,.9),
    87.6vw 11.7svh 0 .6px rgba(255,244,222,.95), 34.6vw 7.2svh 0 0 rgba(255,240,215,.45), 18vw 33svh 0 .6px rgba(255,244,222,.85);
}
.stars-b {
  box-shadow: 9.4vw 12.7svh 0 0 rgba(255,240,215,.5), 21.8vw 21.9svh 0 0 rgba(255,240,215,.45), 61vw 36svh 0 0 rgba(255,240,215,.4),
    30.1vw 14.4svh 0 0 rgba(255,240,215,.52), 46.5vw 5.6svh 0 .6px rgba(255,244,222,.9), 82vw 32svh 0 0 rgba(255,240,215,.5),
    95vw 6.7svh 0 0 rgba(255,240,215,.5), 40vw 25svh 0 0 rgba(255,240,215,.5), 12vw 4.6svh 0 0 rgba(255,240,215,.4);
}
.stars-c {
  box-shadow: 26vw 3.4svh 0 0 rgba(255,240,215,.4), 57vw 27svh 0 0 rgba(255,240,215,.42), 78vw 4.2svh 0 .5px rgba(255,244,222,.8),
    7vw 19svh 0 0 rgba(255,240,215,.38), 92vw 29svh 0 0 rgba(255,240,215,.42), 37vw 34svh 0 0 rgba(255,240,215,.36),
    63vw 2.4svh 0 0 rgba(255,240,215,.45), 15vw 9svh 0 .5px rgba(255,244,222,.75), 49vw 31.5svh 0 0 rgba(255,240,215,.36),
    84vw 15.6svh 0 0 rgba(255,240,215,.4), 31vw 38svh 0 0 rgba(255,240,215,.32), 72vw 37svh 0 0 rgba(255,240,215,.34);
}

/* the sun: a soft disc with a wide warm halo (pre-baked gradients) */
.sun { left: 0; top: 0; width: 0; height: 0; }
.sun-halo {
  left: -40vmax; top: -40vmax; width: 80vmax; height: 80vmax;
  background: radial-gradient(closest-side, rgba(255, 248, 220, .62) 0%, rgba(255, 228, 176, .26) 28%, rgba(255, 214, 160, .08) 55%, transparent 75%);
}
.sun-core {
  left: -7vmin; top: -7vmin; width: 14vmin; height: 14vmin; border-radius: 50%;
  background: radial-gradient(closest-side, #fffdf2 0%, #fff6d8 58%, rgba(255, 238, 196, .55) 80%, rgba(255, 236, 190, 0) 100%);
}

/* afterglow: warm light on the horizon (golden hour → dusk → a faint warmth at night) */
.afterglow {
  left: -70vw; width: 240vw; top: -60svh; height: 120svh; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 214, 150, .95) 0%, rgba(255, 178, 120, .72) 12%, rgba(232, 132, 116, .42) 30%,
    rgba(160, 92, 140, .2) 52%, rgba(90, 60, 120, 0) 72%);
}

/* ayah light (night) */
.halo { left: 50%; width: 0; height: 0; opacity: 0; }
.halo-soft {
  left: -80vmax; top: -80vmax; width: 160vmax; height: 160vmax;
  background: radial-gradient(closest-side, rgba(255, 196, 128, .3) 0%, rgba(240, 160, 120, .15) 30%, rgba(170, 110, 150, .06) 55%, transparent 75%);
}
.halo-core {
  left: -42vmin; top: -32vmin; width: 84vmin; height: 64vmin;
  background: radial-gradient(closest-side, rgba(255, 220, 160, .18) 0%, rgba(255, 190, 130, .09) 45%, transparent 100%);
}

/* the pool: water layers crossfade like the sky (app: turquoise by day, teal-violet at dusk, night teal) */
.pool { left: 0; right: 0; top: 0; height: 140lvh; }
.water { inset: 0; }
.water-night { background: linear-gradient(180deg, #4a3a62 0%, #33395f 4%, #1d3354 13%, #142f47 26%, #0f2a3e 42%, #0b2233 62%, var(--deep) 100%); }
.water-dusk  { background: linear-gradient(180deg, #c27a82 0%, #8a5f86 4%, #4f557e 12%, #2f4a6c 24%, #1f3d5a 40%, #15304a 60%, #0d2236 100%); }
.water-gold  { background: linear-gradient(180deg, #f2c194 0%, #c9a99a 4%, #6fa3ab 13%, #3f8f99 26%, #2a7380 44%, #1d5866 64%, #123c4a 100%); }
.water-day   { background: linear-gradient(180deg, #e2ecec 0%, #a5d8d6 4%, #66c8c4 13%, #3aaeae 28%, #24949e 46%, #1c7d88 66%, #145c68 100%); }
.pool-glow {
  left: -70vw; width: 240vw; top: -46svh; height: 92svh; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 200, 140, .5) 0%, rgba(232, 140, 120, .26) 22%, rgba(140, 90, 140, .1) 48%, transparent 70%);
}
.glint { left: 50%; top: var(--edge-h); width: 0; height: 60svh; }
.glint i {
  height: 3px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .95), rgba(255, 206, 140, .4) 55%, transparent);
}
.glint i:nth-child(1) { top: 1.2svh; width: 34vw; left: -17vw; }
.glint i:nth-child(2) { top: 3.4svh; width: 22vw; left: -12vw; height: 2px; }
.glint i:nth-child(3) { top: 6svh;  width: 30vw; left: -14vw; }
.glint i:nth-child(4) { top: 9.5svh; width: 16vw; left: -9vw; height: 2px; }
.glint i:nth-child(5) { top: 14svh; width: 26vw; left: -12vw; height: 4px; }
.glint i:nth-child(6) { top: 19.5svh; width: 12vw; left: -5vw; height: 3px; }
.glint i:nth-child(7) { top: 26svh; width: 20vw; left: -11vw; height: 4px; opacity: .7; }
.glint i:nth-child(8) { top: 34svh; width: 9vw; left: -3vw; height: 4px; opacity: .55; }
@media (min-width: 760px) { .glint i { transform: scaleX(.55); } }

.ripples { inset: 0; }
.ripples i { height: 2px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 200, .6), transparent); }
.ripples i:nth-child(1)  { top: 4svh;  left: 8vw;  width: 14vw; }
.ripples i:nth-child(2)  { top: 6svh;  left: 70vw; width: 18vw; }
.ripples i:nth-child(3)  { top: 9svh;  left: 30vw; width: 10vw; }
.ripples i:nth-child(4)  { top: 13svh; left: 82vw; width: 16vw; height: 3px; }
.ripples i:nth-child(5)  { top: 17svh; left: 4vw;  width: 24vw; height: 3px; }
.ripples i:nth-child(6)  { top: 21svh; left: 58vw; width: 12vw; height: 3px; }
.ripples i:nth-child(7)  { top: 27svh; left: 22vw; width: 30vw; height: 3px; opacity: .8; }
.ripples i:nth-child(8)  { top: 33svh; left: 74vw; width: 22vw; height: 4px; opacity: .7; }
.ripples i:nth-child(9)  { top: 40svh; left: 6vw;  width: 28vw; height: 4px; opacity: .6; }
.ripples i:nth-child(10) { top: 48svh; left: 52vw; width: 34vw; height: 4px; opacity: .5; }
.ripples i:nth-child(11) { top: 57svh; left: 18vw; width: 26vw; height: 5px; opacity: .4; }
.ripples i:nth-child(12) { top: 66svh; left: 66vw; width: 30vw; height: 5px; opacity: .35; }

.mist {
  left: 0; right: 0; top: -9svh; height: 18svh;
  background: linear-gradient(180deg, rgba(255, 214, 170, 0) 0%, rgba(255, 210, 170, .16) 50%, rgba(255, 214, 170, 0) 100%);
}
.wash {
  left: 0; top: -30svh; width: 100%; height: 60svh; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 150, .55) 0%, rgba(240, 150, 110, .22) 45%, transparent 70%);
}
html:not(.film) .wash { display: none; }

/* the bank: inlaid pool edge, waterline, plants with reflections */
.bank { left: 0; right: 0; top: 0; height: 0; }
.edge {
  position: absolute; left: 0; right: 0; top: 0; height: var(--edge-h);
  display: flex; justify-content: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 228, 186, .14), rgba(255, 228, 186, .05));
  --sm-lw: .9px; --sm-lsw: 1px; --sm-lf: none;
}
.edge svg { height: 100%; width: auto; max-width: none; flex: none; }
.waterline {
  left: 0; right: 0; top: var(--edge-h); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 168, .75) 18%, rgba(255, 236, 200, .95) 50%, rgba(255, 222, 168, .75) 82%, transparent);
}
.plants { position: absolute; left: 0; right: 0; top: 0; height: 0; transform-origin: 50% 0; }
.plant {
  position: absolute; top: 0; left: var(--x);
  --hh: calc(var(--ph) * var(--h));
  width: calc(var(--hh) * var(--ar, .667)); height: 0;
  margin-left: calc(var(--hh) * var(--ar, .667) / -2);
  --sm-lf: rgba(14, 18, 44, .62);
}
.plant[data-motif="spray"] { --ar: .5; }
.plant .up { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hh); transform-origin: 50% 100%; }
.plant .up svg, .plant .rv svg { width: 100%; height: 100%; }
.plant.e .up svg { transform: scaleX(-1); }
.plant .refl {
  position: absolute; left: 0; right: 0; top: calc(var(--edge-h) + 1px); height: calc(var(--hh) * .9);
  opacity: .5; transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
  --sm-lf: rgba(10, 26, 44, .5);
}
.band { position: absolute; inset: 0; }
.band.b1 { clip-path: inset(0 -10% 46% -10%); }
.band.b2 { clip-path: inset(54% -10% 0 -10%); }
.rv { position: absolute; inset: 0; }
.plant .rv svg { transform: scaleY(-1); }
.plant.e .rv svg { transform: scale(-1, -1); }
@media (max-width: 759px) { .plant.p-in { display: none; } }
.plant .flare {
  left: 50%; top: calc(var(--hh) * -.76);
  width: calc(var(--hh) * .8); height: calc(var(--hh) * .8);
  margin-left: calc(var(--hh) * -.4); margin-top: calc(var(--hh) * -.4);
  border-radius: 50%; opacity: .2;
  background: radial-gradient(closest-side, rgba(255, 226, 172, .6) 0%, rgba(255, 184, 120, .2) 45%, transparent 100%);
}

/* the main vine (generated in b.js) */
.vine {
  top: 0; left: 0; height: 100%; width: 110px;
  --sm-lf: rgba(14, 18, 44, .5); --sm-lw: 1px; --sm-vw: .6px;
  --sd-line: var(--vine-c);
  transition: --vine-c .9s, --vine-g .9s;
}
html.film.is-day .vine { --vine-c: #8a6418; --vine-g: rgba(255, 252, 240, .45); }
[dir="rtl"] .vine { left: auto; right: 0; transform: scaleX(-1); }
.vine-in { position: absolute; left: 0; top: 0; width: 100%; }
.vine svg { overflow: visible; max-width: none; }
.v-line { fill: none; stroke: var(--vine-c); stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; }
.v-glow { fill: none; stroke: var(--vine-g); stroke-width: 6px; stroke-linecap: round; }
.v-tendril, .v-stalk { stroke-width: 1px; }
.vine .tip {
  left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 248, 226, 1) 0%, rgba(255, 214, 150, .6) 38%, rgba(255, 190, 120, 0) 100%);
}
html:not(.film) .vine .tip { display: none; }
@media (min-width: 760px) { .v-line { stroke-width: 1.6px; } .v-glow { stroke-width: 8px; } }

.pearls { inset: 0; }
.pearls i {
  width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; left: var(--px); top: var(--py);
  background: radial-gradient(closest-side, rgba(255, 246, 225, .95) 0%, rgba(255, 220, 160, .55) 35%, rgba(255, 200, 130, 0) 100%);
}
.pearls i:nth-child(1) { --px: 12vw; --py: 78svh; --s: 8px;  --d: 19s; --dl: -3s; }
.pearls i:nth-child(2) { --px: 31vw; --py: 92svh; --s: 6px;  --d: 23s; --dl: -11s; }
.pearls i:nth-child(3) { --px: 47vw; --py: 70svh; --s: 9px;  --d: 27s; --dl: -7s; }
.pearls i:nth-child(4) { --px: 62vw; --py: 88svh; --s: 7px;  --d: 21s; --dl: -15s; }
.pearls i:nth-child(5) { --px: 79vw; --py: 74svh; --s: 8px;  --d: 25s; --dl: -2s; }
.pearls i:nth-child(6) { --px: 90vw; --py: 95svh; --s: 6px;  --d: 18s; --dl: -9s; }
.motes { inset: 0; }
.motes i {
  left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 248, 228, 1) 0%, rgba(255, 214, 150, .6) 40%, transparent 100%);
}
html:not(.film) .motes { display: none; }

/* ============================================================
   TEXT
   ============================================================ */
.hero, .lines, .turn, .ayah-sec, .coda { position: relative; text-align: center; padding-inline: max(16px, 5vw); }

/* hero: by day, ink on the bright sky */
.hero { color: var(--day-ink); }
.tag { color: var(--day-gold); font-size: 1rem; line-height: 1.5; }
@media (min-width: 760px) { .tag { font-size: 1.2rem; } }
html[lang="en"] .tag { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.name { font-size: clamp(3.2rem, 14.5vw, 7.4rem); margin-block: .12em .08em; font-weight: 500; line-height: 1.2;
  color: var(--day-name); text-shadow: 0 0 30px rgba(255, 252, 240, .7); }
html[lang="en"] .name { font-family: var(--font-disp-en); letter-spacing: .01em; font-size: clamp(2.8rem, 12.6vw, 6.8rem); }
.hero-line { font-size: clamp(1.55rem, 6.6vw, 2.6rem); line-height: 1.35; color: var(--day-ink); }
html[lang="en"] .hero-line { font-family: var(--font-disp-en); font-style: italic; }
.hero-sub { margin-top: .5em; font-size: clamp(1.05rem, 4.3vw, 1.3rem); color: var(--day-soft); max-width: 26em; margin-inline: auto; }
.cue { display: none; }

/* lines: cream on the dusk water */
.line {
  font-size: clamp(2.5rem, 12.5vw, 5.4rem); line-height: 1.25; font-weight: 500;
  color: var(--ink); text-shadow: 0 0 3px rgba(10, 20, 40, .35), 0 0 22px rgba(10, 22, 44, .35);
}
html[lang="en"] .line { font-family: var(--font-disp-en); font-style: italic; font-size: clamp(2.3rem, 11vw, 5rem); }
.ring { display: none; }

/* the turn: day becomes night */
.turn-line {
  font-size: clamp(1.9rem, 8.6vw, 3.6rem); line-height: 1.35; font-weight: 500;
  color: var(--gold-text); text-shadow: 0 0 26px rgba(255, 200, 120, .35);
}
html[lang="en"] .turn-line { font-family: var(--font-disp-en); font-style: italic; }

/* the ayah: the brightest light */
.ayah { position: relative; max-width: 36rem; margin-inline: auto; }
.ayah .quran {
  font-size: clamp(2rem, 9vw, 4.1rem); line-height: 2;
  color: #fffaf0;
  text-shadow: 0 0 2px rgba(255, 236, 200, .5), 0 0 22px rgba(255, 206, 140, .5);
}
.ayah .ayah-line { display: block; text-wrap: balance; }
.ayah-meaning {
  font-family: var(--font-disp-en); font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: 1.45;
  color: #fff6e8; max-width: 28em; margin-inline: auto;
  text-shadow: 0 0 14px rgba(8, 14, 36, .6);
}
.ayah-ref { color: #fbefd6; opacity: 1; font-style: normal; font-size: 1.1rem; margin-top: .9em; letter-spacing: .02em;
  text-shadow: 0 0 12px rgba(8, 14, 36, .75); }
html[lang="ar"] .ayah-ref { font-family: var(--font-ar); }

/* the Ramadan line under the ayah */
.ramadan { font-size: clamp(1.45rem, 6.2vw, 2rem); color: var(--gold-text); line-height: 1.4; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.hero :focus-visible, .top :focus-visible { outline-color: #2a4f8a; }
html.film.is-night .top :focus-visible { outline-color: var(--focus); }

.foot { position: relative; text-align: center; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--ink-soft); font-size: .92rem; background: var(--deep); }
.foot-legal { margin: .5rem 0 0; font-size: .8rem; opacity: .85; }
.foot-privacy { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(242, 208, 140, .5); }
.foot-privacy:hover { color: var(--gold-text); }

/* ============================================================
   STILL COMPOSITION (default: no JS / reduced motion)
   Day at the top of the page, golden hour at the bank, the lines on dusk water, night below.
   ============================================================ */
html:not(.film) .sky-night, html:not(.film) .sky-dusk, html:not(.film) .sky-gold { display: none; }
html:not(.film) .sky-day { top: 0; height: 100svh; }
html:not(.film) .sun { transform: translate(72vw, 17svh); }
html[dir="rtl"]:not(.film) .sun { transform: translate(28vw, 17svh); }
html:not(.film) .sun-halo { opacity: .8; }
html:not(.film) .afterglow { top: calc(100svh - 60svh); opacity: .55; }
html:not(.film) .pool { top: 100svh; height: auto; bottom: 0;
  background: linear-gradient(180deg, #f2c194 0, #6fa3ab 30px, #3a8a96 70px, #2a6680 150px, #2f4a6c 240px, #23395e 60svh, #1d3354 100svh, #142f47 150svh, #0d2638 100%); }
html:not(.film) .water { display: none; }
html:not(.film) .pool .ripples, html:not(.film) .pool .glint { height: 100svh; }
html:not(.film) .pool-glow { opacity: .5; }
html:not(.film) .mist { top: calc(100svh - 9svh); }
html:not(.film) .bank { top: 100svh; }
html:not(.film) .halo { display: none; }
html:not(.film) .vine { height: auto; bottom: auto; --vine-c: #b8892c; --vine-g: rgba(255, 236, 200, .22); }
html:not(.film) .hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 84px calc(var(--ph) + 40px);
}
html:not(.film) .lines {
  padding-inline-start: max(16px, 5vw, 62px);
  padding-block: calc(var(--ph) * .75 + 56px) 24px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 2.4svh, 1.4rem);
}
html:not(.film) .turn { padding-block: 10svh 2svh; }
html:not(.film) .night-sky { opacity: .9; bottom: auto; height: 100svh; display: none; }
html:not(.film) .night-sky.placed { display: block; }

/* ============================================================
   FILM MODE (pinned stage, everything scrubbed by b.js)
   ============================================================ */
html.film .story { height: calc(100svh * var(--screens, 9.4)); }
html.film .stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
html.film .cam, html.film .vine-in { will-change: transform; }
html.film .sky, html.film .water, html.film .afterglow, html.film .halo, html.film .glint, html.film .night-sky { will-change: opacity; }
html.film .sun { will-change: transform, opacity; }
html.film .hero, html.film .lines, html.film .turn, html.film .ayah-sec, html.film .coda {
  position: absolute; inset: 0 0 auto 0; height: 100svh; pointer-events: none;
}
html.film .hero {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-bottom: 12svh;
}
html.film .hero > * { will-change: transform, opacity; }
html.film .cue {
  display: block; position: absolute; left: 50%; bottom: calc(5svh + env(safe-area-inset-bottom));
  width: 1px; height: 44px; margin-left: -.5px; overflow: hidden;
  background: linear-gradient(180deg, rgba(86, 60, 12, 0), rgba(86, 60, 12, .5));
}
html.film .cue i {
  position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 2px;
  background: #8a6418; animation: cue 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes cue { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

html.film .lines .ln, html.film .turn-line {
  position: absolute; left: 0; right: 0; top: calc(var(--line-y) * 1%);
  padding-inline: max(16px, 5vw);
  transform: translateY(-50%);
}
html.film .turn-line { top: calc(var(--line-y) * 1% - 2svh); }
/* keep the words clear of the vine column at the inline-start edge */
html.film .lines .ln, html.film .turn-line { padding-inline-start: max(16px, 5vw, 62px); }
@media (min-width: 760px) { html.film .lines .ln, html.film .turn-line { padding-inline: 200px; } }
html.film .lines .line, html.film .turn-line { opacity: 0; will-change: transform, opacity; transform-origin: 50% 70%; }
html.film .ring {
  display: block; position: absolute; left: 50%; top: 62%;
  width: min(84vw, 620px); aspect-ratio: 5.2; margin-left: calc(min(84vw, 620px) / -2);
  transform: translateY(-50%); opacity: 0;
}
html.film .ring::before, html.film .ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255, 222, 168, .55);
}
html.film .ring::after { inset: 18% 14%; border-color: rgba(255, 222, 168, .35); }

html.film .ayah-sec {
  height: calc(var(--wl-ayah) * 1svh);
  display: flex; align-items: center; justify-content: center;
  padding-top: 4svh;
}
html.film .halo { top: calc(var(--wl-ayah) * .52svh + 2svh); }


/* short screens (phone landscape, 200 % zoom): smaller words */
@media (max-height: 520px) {
  .name { font-size: clamp(2.4rem, 9svh + 2vw, 3.6rem); }
  .hero-line { font-size: 1.35rem; }
  .hero-sub { font-size: 1rem; }
  .line { font-size: clamp(2rem, 13svh, 3rem); }
  .turn-line { font-size: clamp(1.6rem, 10svh, 2.4rem); }
  .ayah .quran { font-size: clamp(1.6rem, 10svh, 2.4rem); line-height: 1.9; }
  .ramadan { font-size: 1.25rem; }
}

/* ambient life (film only; compositor-only transforms/opacity) */
html.film .stars-a { animation: twinkle 11s ease-in-out infinite alternate; }
html.film .stars-b { animation: twinkle 14s ease-in-out -5s infinite alternate-reverse; }
html.film .stars-c { animation: twinkle 17s ease-in-out -9s infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .45; } }
html.film .ripples i { animation: drift var(--rd, 9s) ease-in-out infinite alternate; will-change: transform, opacity; }
html.film .ripples i:nth-child(odd) { --rd: 11s; animation-direction: alternate-reverse; }
html.film .ripples i:nth-child(3n) { --rd: 7.5s; }
@keyframes drift { from { transform: translateX(-3vw) scaleX(.8); opacity: .25; } to { transform: translateX(3vw) scaleX(1.15); opacity: 1; } }
html.film .glint i { animation: glint 3.2s ease-in-out infinite alternate; }
html.film .glint i:nth-child(even) { animation-duration: 4.4s; animation-direction: alternate-reverse; }
@keyframes glint { from { opacity: .35; translate: -1.5vw 0; } to { opacity: 1; translate: 1.5vw 0; } }
html.film .band.b1 .rv { animation: wave-a 5.2s ease-in-out infinite alternate; }
html.film .band.b2 .rv { animation: wave-b 3.9s ease-in-out infinite alternate; }
@keyframes wave-a { from { transform: translateX(-1.5px) scaleX(1.01); } to { transform: translateX(2px) scaleX(.99); } }
@keyframes wave-b { from { transform: translateX(4px) scaleX(1.03); } to { transform: translateX(-4px) scaleX(.97); } }
html.film .pearls i { animation: rise var(--d) linear var(--dl) infinite; opacity: 0; will-change: transform, opacity; }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: .85; }
  70% { opacity: .55; }
  100% { transform: translate3d(2vw, -58svh, 0); opacity: 0; }
}
html.film .plant .flare { opacity: 0; will-change: opacity; }
html.film .plant .up, html.film .plant .refl { will-change: transform, opacity; }
html.film .motes i { will-change: transform, opacity; }
@media (min-width: 760px) { .stars { width: 1.6px; height: 1.6px; } }

/* ============================================================
   M2 ADDITIONS: the ayah on the night pool, the lens, the two stars, the Ramadan line
   ============================================================ */
.lens, .kstars { display: none; }
.ayah .w { display: inline; }
.coda .cue { display: none; }

/* still (no JS / reduced motion): the ayah on night water, then B's still world (day → night),
   then the Ramadan line and the footer */
html:not(.film) .ayah-sec {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding-block: 84px 16svh;
  background:
    radial-gradient(70vmax 60vmax at 50% 40%, rgba(255, 196, 128, .2), rgba(240, 160, 120, .08) 45%, transparent 75%),
    linear-gradient(180deg, #080d26 0%, #0e1640 28%, #1a2152 50%, #2b2a5c 68%, #3d3266 76%, #33395f 77%, #1d3354 82%, #0f2a3e 92%, #0b2233 100%);
}
html:not(.film) .world::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 22svh; pointer-events: none;
  background: linear-gradient(180deg, #0b2233, rgba(11, 34, 51, 0));
}
html:not(.film) .coda { padding-block: 10svh 6svh; background: var(--deep); }

/* film */
html.film .stage {
  background: linear-gradient(180deg, #080d26 0%, #0e1640 22%, #1a2152 40%, #2b2a5c 55%, #3d3266 71%, #1d3354 74%, #0b2233 100%);
}
html.film .world { position: absolute; inset: 0; z-index: 1; visibility: hidden; }
html.film .lens { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
html.film .kstars { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.film .kstars i {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0;
  will-change: transform, opacity;
  background: radial-gradient(closest-side, #fffdf4 0%, rgba(255, 244, 214, .95) 14%, rgba(255, 214, 150, .38) 42%, rgba(255, 200, 130, 0) 100%);
}
html.film .ayah-sec { z-index: 4; }
html.film .ayah { transform-origin: 0 0; will-change: transform, opacity; }
html.film .coda { z-index: 4; }
html.film .ramadan {
  position: absolute; left: 0; right: 0; padding-inline: max(16px, 5vw);
  top: calc(var(--wl-ayah) * 1svh + var(--edge-h) + 6svh);
  opacity: 0; will-change: transform, opacity;
  text-shadow: 0 0 3px rgba(8, 14, 36, .6), 0 0 18px rgba(8, 14, 36, .75);
}
html.film .coda .cue {
  display: block; opacity: 0; transition: opacity .6s; position: absolute; left: 50%; bottom: calc(5svh + env(safe-area-inset-bottom));
  width: 1px; height: 44px; margin-left: -.5px; overflow: hidden;
}
html.film .coda .cue i {
  position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 2px;
  background: #f2d08c; animation: cue 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
html.film .coda .cue i { width: 5px; height: 5px; left: -2px; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 214, 150, .8); }
@media (max-height: 520px) {
  .foot { padding-block: 8px calc(10px + env(safe-area-inset-bottom)); }
  .foot p { display: inline; }
  .foot .foot-legal { margin: 0; }
  .foot p:first-child::after { content: " · "; }
}
/* still: the page opens at night, so the language toggle uses its night shade */
html:not(.film) .top { --shade: rgba(8, 14, 36, .52); color: var(--ink-soft); }
html:not(.film) .top :focus-visible { outline-color: var(--focus); }

/* ---------- review fixes (docs/REVIEW-MUKTH.md) ---------- */
/* the second ayah exists for the still page's ending only */
html.film .ayah-end { display: none; }
html:not(.film) .coda {
  padding-block: 14svh 8svh;
  background:
    radial-gradient(70vmax 50vmax at 50% 38%, rgba(255, 196, 128, .16), transparent 70%),
    linear-gradient(180deg, #0d2638 0%, #0e1d44 22%, #1a2152 60%, #0b2233 100%);
}
html:not(.film) .ayah-end { margin-bottom: 6svh; }
/* film: the footer slides over the bottom of the pool instead of pushing the stage (and the ayah) up */
html.film .foot {
  margin-top: calc(-1 * var(--foot-h, 92px)); height: var(--foot-h, 92px); z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(8, 26, 40, 0), rgba(8, 26, 40, .85) 45%, var(--deep));
}
/* English and short screens: the ayah, its meaning and the reference always fit */
html[lang="en"] .ayah .quran { font-size: clamp(1.7rem, 7.6vw, 3.4rem); line-height: 1.9; }
html[lang="en"] .ayah-meaning { font-size: clamp(1rem, 4.2vw, 1.3rem); line-height: 1.38; }
@media (max-height: 520px) {
  .ayah { max-width: 46rem; }
  .ayah .quran, html[lang="en"] .ayah .quran { font-size: clamp(1.2rem, 7.4svh, 1.9rem); line-height: 1.72; }
  .ayah-meaning { font-size: .86rem; line-height: 1.3; max-width: 40em; }
  .ayah-ref { font-size: .85rem; margin-top: .35em; }
  html.film .ayah-sec { padding-top: 7svh; }
  html.film .foot { --foot-h: 44px; }
  html.film .ramadan { top: calc(var(--wl-ayah) * 1svh + var(--edge-h) + 3svh); }
}
@media (min-height: 521px) and (max-height: 960px) and (min-width: 760px) {
  html[lang="en"] .ayah .quran { font-size: clamp(1.8rem, 5.2svh, 3rem); }
}