/* ============================================================
   Yimberzol Foundation — QClay-inspired light/lavender build
   Continuous scroll-driven full-screen sections · Plus Jakarta Sans
   Dark hero + glass cursor + WebGL distortion preserved
   ============================================================ */

:root {
  --paper: #efe9f8;       /* light base (lavender-tinted) */
  --paper-2: #e6dcf4;
  --lav: #d9ccf2;         /* lavender accent bg */
  --lav-deep: #c6b2ee;
  --black: #0e0a18;       /* dark/black sections + hero */
  --ink: #181222;         /* dark text */
  --ink-2: #564d6e;
  --ink-3: #8b82a3;
  --light: #f3eefb;       /* light text on dark */
  --light-2: #c4bbdd;
  --iris-deep: #7c3aed;
  --iris: #8b5cf6;
  --iris-bright: #a855f7;
  --moss: #9bcf72;        /* qclay-style green dot */
  --border-d: rgba(241, 237, 248, 0.14);
  --border-l: rgba(24, 18, 34, 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --nastaliq: "Noto Nastaliq Urdu", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* native tall-document scroll; GSAP/ScrollTrigger pins drive the motion.
   overflow-x: clip prevents 3D transforms from pushing a horizontal scrollbar
   without creating a nested scroll container (unlike overflow-x: hidden). */
html, body { overflow-x: clip; }
/* anchor jumps land below the fixed header (native-scroll path) */
html { scroll-padding-top: 80px; }
.jsec { scroll-margin-top: 80px; }

::selection { background: var(--iris-deep); color: #fff; }
img { display: block; }

.container { width: min(1180px, 90vw); margin: 0 auto; }
.nastaliq { font-family: var(--nastaliq); }
.center { text-align: center; }

h1, h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 em, h2 em, .serif-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
}
.label::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: 0.5; }
.label.center { justify-content: center; }
.label .nastaliq { letter-spacing: 0; font-size: 15px; }

.card-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iris-deep);
  margin-bottom: 14px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 9px 20px; font-size: 14px; }

.btn-iris { background: var(--iris-deep); color: #fff; }
.btn-iris:hover { background: #6d28d9; }

.btn-ghost { color: var(--light); border-color: var(--border-d); background: rgba(243, 238, 251, 0.05); }
.btn-ghost:hover { background: rgba(243, 238, 251, 0.12); }

.btn-record {
  color: #fff;
  background: rgba(243, 238, 251, 0.08);
  border-color: var(--border-d);
}
.btn-record:hover { background: rgba(243, 238, 251, 0.16); }
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: recPulse 2s ease-out infinite;
}
@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------- glass cursor (kept) ---------- */

body.glass-cursor-on, body.glass-cursor-on * { cursor: none !important; }
.glass-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 5px rgba(255, 255, 255, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(3px) saturate(165%) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(165%) brightness(1.05);
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.glass-cursor.visible { opacity: 1; }

/* ---------- progress rail ---------- */

.rail {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--iris-deep), var(--iris-bright));
  z-index: 200;
  transition: width 0.1s linear;   /* scrubs with scroll progress each frame */
}

/* ---------- nav ---------- */

.nav-shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  transition: color 0.6s var(--ease);
}
.nav-inner {
  width: min(1280px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease);
}
.nav-links a:hover { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* theme-aware nav text */
.nav--dark { color: var(--light); }
.nav--light { color: var(--ink); }
.nav--light .btn-record { color: var(--ink); border-color: var(--border-l); background: rgba(24, 18, 34, 0.05); }
.nav--light .btn-record:hover { background: rgba(24, 18, 34, 0.1); }

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; padding: 8px; cursor: pointer; }
.burger span { width: 22px; height: 1.6px; background: currentColor; transition: transform 0.3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================
   STAGE & SECTIONS — native tall scroll, 3D scene root
   ScrollTrigger pins/scrubs drive the motion; the page is never
   locked, so it stays usable even if the motion libs fail to load.
   ============================================================ */

.stage { position: relative; perspective: 1500px; perspective-origin: 50% 50%; }

.jsec {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 110px 0 70px;
  transform-style: preserve-3d;   /* lets the section tip in 3D during scene hand-offs */
}
.jsec[data-theme="light"] { background: var(--paper); color: var(--ink); }
.jsec[data-theme="lav"] { background: var(--lav); color: var(--ink); }
.jsec[data-theme="dark"] { background: var(--black); color: var(--light); }

/* ---------- section reveals ---------- */

.sreveal, .sreveal-r {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.sreveal { transform: translateY(38px); }
.sreveal-r { transform: translateX(60px); }
.jsec.play .sreveal, .jsec.play .sreveal-r { opacity: 1; transform: none; }

/* ---------- gradient blobs (qclay-style clay shapes) ---------- */

.blob {
  position: absolute;
  border-radius: 56% 44% 52% 48% / 50% 52% 48% 50%;
  filter: blur(4px);
  opacity: 0.95;
  animation: blobFloat 9s var(--ease) infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-16px) rotate(8deg) scale(1.04); }
}
.blob-a { inset: 8% 12% 30% 12%; background: radial-gradient(circle at 32% 30%, #c9b6f3, #8b5cf6 55%, #5b21b6); }
.blob-b { width: 70%; aspect-ratio: 1; top: 8%; left: 15%; background: radial-gradient(circle at 35% 30%, #d8c8f6, #a78bfa 55%, #7c3aed); }
.blob-c { width: 70%; aspect-ratio: 1; top: 8%; left: 15%; background: radial-gradient(circle at 35% 30%, #f0c8ee, #c98bd6 50%, #8b3aa6); border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%; }
.blob-d { width: 70%; aspect-ratio: 1; top: 8%; left: 15%; background: radial-gradient(circle at 35% 30%, #c8d4f6, #8ba0e8 52%, #4f63c9); border-radius: 52% 48% 56% 44% / 44% 56% 44% 56%; }
.blob-e { width: 70%; aspect-ratio: 1; top: 8%; left: 15%; background: radial-gradient(circle at 35% 30%, #cdeede, #84cfae 52%, #3f9f78); border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; }

/* ============================================================
   0 · HERO
   ============================================================ */

.hero { padding: 0; }
.hero-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-media canvas.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.hero-media canvas.hero-gl.on { opacity: 1; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14, 10, 24, 0.5) 0%, rgba(14, 10, 24, 0.2) 35%, rgba(14, 10, 24, 0.72) 85%, var(--black) 100%),
    radial-gradient(ellipse 90% 70% at 28% 60%, rgba(14, 10, 24, 0.32), transparent 60%);
}
.hero-inner { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1.02;
  max-width: 17ch;
  text-shadow: 0 2px 40px rgba(14, 10, 24, 0.5);
}
.hero h1 em { color: var(--light); }
.hero-sub {
  margin-top: 26px;
  max-width: 470px;
  font-size: 17.5px;
  color: var(--light-2);
}
.hero-sub .nastaliq { color: #d7caf6; }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

.orbit-badge { position: absolute; right: clamp(24px, 6vw, 90px); bottom: 12%; width: 116px; height: 116px; z-index: 2; }
.orbit-ring { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.orbit-ring text { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(243, 238, 251, 0.8); }
.orbit-center { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); }
@keyframes spin { to { transform: rotate(1turn); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--light-2);
}
.scroll-cue span { width: 22px; height: 34px; border: 1.5px solid var(--border-d); border-radius: 99px; position: relative; }
.scroll-cue span::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--light); animation: cueDot 1.8s ease-in-out infinite;
}
@keyframes cueDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }

/* ============================================================
   1 · ABOUT
   ============================================================ */

.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about-copy h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); margin-bottom: 26px; }
.about-copy h2 em { color: var(--iris-deep); }
.about-lead { color: var(--ink-2); font-size: 17px; max-width: 46ch; }
.about-meta { margin-top: 22px; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-3); }

.about-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 30px;
  background: linear-gradient(160deg, #fbf8ff, #e9def9);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 70px rgba(91, 33, 182, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 34px;
}
.about-iris { position: relative; width: 96px; filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.6)); margin-bottom: 6px; }
.about-card-word { position: relative; font-family: var(--nastaliq); font-size: 42px; line-height: 1.5; color: var(--iris-deep); }
.about-card-sub { position: relative; font-size: 14px; color: var(--ink-2); max-width: 26ch; }

/* ============================================================
   2 · PROGRAMS DECK (horizontal)
   ============================================================ */

.deck { padding: 0; flex-direction: row; overflow: hidden; background: #ffffff; }
/* QClay-style: narrower cards centered in the viewport, next card peeking, gap top (under nav) + bottom */
.deck-track { display: flex; align-items: center; height: 100svh; will-change: transform; padding: 0 16px; }

.deck-panel {
  position: relative;
  flex: none;
  width: min(72vw, 1080px); height: calc(100svh - 150px);
  margin: 0 14px;
  border-radius: 36px;
  display: flex; align-items: flex-end;
  padding: clamp(34px, 4vw, 72px);
  overflow: hidden;
  text-decoration: none;
  color: #111;
}
.deck-panel-inner { position: relative; z-index: 2; max-width: 780px; will-change: transform; }

.deck-index {
  position: absolute; bottom: clamp(28px, 4vh, 56px); right: clamp(34px, 5vw, 80px);
  font-size: clamp(6rem, 18vw, 16rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.78;
  color: rgba(0, 0, 0, 0.05); z-index: 1; pointer-events: none;
}
.deck-panel .card-kicker { color: #8a8780; font-size: clamp(12px, 1vw, 15px); margin-bottom: clamp(14px, 2vh, 22px); }
.deck-panel h3 {
  font-size: clamp(2.1rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.02; margin-bottom: clamp(16px, 2.2vh, 26px); max-width: 15ch; color: #0e0e0e;
}
.deck-desc { font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.5; color: #6f6c65; max-width: 46ch; }

/* per-panel fills — warm off-white cards with a faint pastel tint (QClay-style) */
.deck-intro { background: #f7f4f4; }
.deck-intro .label { color: #8a8780; }
.deck-intro h2 { font-size: clamp(2.6rem, 7.5vw, 6.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #0e0e0e; }
.deck-intro h2 em { color: var(--iris-bright); }
.deck-hint { margin-top: clamp(24px, 4vh, 40px); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #9a978f; }

.deck-panel[data-fill="violet"]  { background: #f4f1fb; }
.deck-panel[data-fill="emerald"] { background: #f1fbf9; }
.deck-panel[data-fill="rose"]    { background: #fbf1f4; }
.deck-panel[data-fill="indigo"]  { background: #f1f4fb; }
.deck-panel[data-fill="cta"]     { background: #f6f1fb; }

.deck-cta-link {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 3vh, 34px);
  padding: 15px 30px; border-radius: 100px;
  background: #111; color: #fff; font-weight: 700; font-size: 16px;
}

/* no-GSAP / mobile: native full-screen horizontal swipe */
body:not(.gsap-on) .deck-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
body:not(.gsap-on) .deck-panel { scroll-snap-align: center; }

/* ============================================================
   2.5 · FACETS — QClay-style 3D perspective text wall (light)
   left: one line repeated, tilted in perspective; right: bold list.
   ============================================================ */

.wall { position: relative; overflow: hidden; background: #ffffff; min-height: 100svh; display: flex; align-items: center; }
.wall-inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 70px);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 4vw, 70px);
}
/* left: one line repeated, tilted in perspective so it recedes back-left */
.wall-echo {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  transform: perspective(900px) rotateY(38deg) rotateX(2deg);
  transform-origin: right center;
}
.wall-echo span {
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(12px, 1.5vw, 21px); line-height: 1.2; color: #111; white-space: nowrap;
}
/* right: big bold list of fronts */
.wall-list { flex: none; list-style: none; margin: 0; padding: 0; text-align: right; }
.wall-list li {
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em;
  font-size: clamp(2rem, 6vw, 5.2rem); line-height: 1.03; color: #0e0e0e;
}
/* scattered confetti dots */
.wall-dots i { position: absolute; width: 9px; height: 9px; border-radius: 50%; }

@media (max-width: 760px) {
  .wall-inner { flex-direction: column; gap: clamp(20px, 5vh, 36px); }
  .wall-echo { transform: none; align-items: center; text-align: center; opacity: 0.45; }
  .wall-list { text-align: center; }
}

/* ============================================================
   3 · PROJECT ZOON (giant text, dark)
   ============================================================ */

.zoon { padding: 0; }
.zoon-bg { position: absolute; inset: 0; z-index: 0; }
.zoon-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.zoon-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(14, 10, 24, 0.4), var(--black) 92%); }
.zoon-inner { position: relative; z-index: 2; text-align: center; }
.zoon .label { justify-content: center; color: var(--light-2); }
.giant {
  font-size: clamp(4rem, 16vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--light);
}
.giant-fill {
  background: linear-gradient(100deg, #a855f7, #8b5cf6 52%, #6d28d9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.zoon-sub { margin: 28px auto 0; max-width: 540px; font-size: 18px; color: var(--light-2); }
.zoon-sub em { font-family: var(--serif); font-style: italic; color: #e2d6fb; }
/* in normal flow below the subtext (no overlap); centred by .zoon-inner's text-align */
.zoon-rec { display: inline-flex; margin-top: clamp(36px, 6vh, 64px); z-index: 3; }

/* small -> huge scrubbed scale: .giant grows from tiny to full and "becomes different" past the midpoint */
.zoon .giant { will-change: transform; transform-origin: 50% 50%; }
/* one iris gradient throughout — no colour shift past the midpoint */
.giant.zoom-state { filter: drop-shadow(0 24px 60px rgba(124, 58, 237, 0.5)); }

/* ============================================================
   4 · NUMBERS
   ============================================================ */

/* Project Zoon — moon comes closer on scroll while the stats rise up from below */
.numbers { padding: 0; justify-content: center; }
#numbers { background: #000000; }   /* matches the moon photo's black so it blends seamlessly */
.moon-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gsap-on .moon-stage { clip-path: circle(0% at 50% 50%); }   /* portal starts closed; the scrub opens it */
.moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.moon img {
  width: min(80vmin, 780px); height: auto; user-select: none; -webkit-user-drag: none;
  clip-path: circle(34% at 48% 48%);   /* crop the square photo down to just the moon disc */
  filter: drop-shadow(0 0 70px rgba(150, 160, 220, 0.35));
}
/* vignette: keeps the moon visible but darkens behind the numbers for legibility */
.moon-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.85)); }

.moon-content { position: relative; z-index: 2; width: 100%; max-width: 900px; padding: 0 24px; text-align: center; }

/* Apple-style: number + label on one centered line, stacked, each line a touch dimmer */
.moon-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
.mstat {
  font-size: clamp(1.3rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
  color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
}
.mstat strong { font-weight: 700; margin-right: 0.4ch; }
.mstat:nth-child(2) { color: rgba(255, 255, 255, 0.88); }
.mstat:nth-child(3) { color: rgba(255, 255, 255, 0.72); }
.mstat:nth-child(4) { color: rgba(255, 255, 255, 0.56); }

/* ============================================================
   5 · MANIFESTO (giant mixed-fill)
   ============================================================ */

.manifesto { justify-content: center; text-align: center; }
.manifesto .label { color: var(--light-2); }
.statement-lines { font-size: clamp(2.4rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-transform: uppercase; }
.sline { display: block; color: #615b73; }   /* grey initial, on the black manifesto */
/* words brighten grey -> purple, one by one, driven by GSAP while the section is pinned */
.sline .word { display: inline-block; will-change: color; }
/* static / no-lib path: show the bright purple end state */
body:not(.gsap-on) .sline .word { color: #b07cff; }

/* ============================================================
   6 · DONATE + footer
   ============================================================ */

.donate { flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 56px); position: relative; }
.donate-inner { position: relative; z-index: 2; }
.donate-head { text-align: center; margin-bottom: 8px; }
.donate-head h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); }
.donate-head h2 em { color: var(--iris-deep); }

.roller-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.roller-intro { color: var(--ink-2); font-size: 17px; }
.roller { position: relative; display: inline-block; width: 240px; height: 46px; border-radius: 100px; background: #fff; box-shadow: 0 8px 22px rgba(91, 33, 182, 0.14); overflow: hidden; perspective: 400px; }
.roller span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: var(--iris-deep); opacity: 0; transform: translateY(70%) rotateX(-70deg); transition: transform 0.55s var(--ease), opacity 0.45s var(--ease); }
.roller span.on { opacity: 1; transform: none; }
.roller span.out { opacity: 0; transform: translateY(-70%) rotateX(70deg); }

.donate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; gap: 20px; }
.donate-card {
  position: relative; display: block; padding: 34px 32px;
  border-radius: 26px; text-decoration: none; color: var(--ink);
  background: #fbf8ff; border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 48px rgba(91, 33, 182, 0.14);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.donate-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(91, 33, 182, 0.24); }
.donate-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.donate-card > p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.donate-url { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; color: var(--iris-deep); border: 1px solid var(--border-l); border-radius: 100px; padding: 7px 16px; }
.donate-arrow { position: absolute; top: 30px; right: 30px; font-size: 22px; color: var(--ink-3); transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
.donate-card:hover .donate-arrow { transform: translate(4px, -4px); color: var(--iris-deep); }

.cursor-blob { position: absolute; top: 0; left: 0; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply; filter: blur(70px); opacity: 0; transition: opacity 0.7s var(--ease); background: radial-gradient(circle, #c9b6f3, #a78bfa 40%, transparent 72%); transform: translate(-50%, -50%); z-index: 1; }
.cursor-blob.live { opacity: 0.55; }

.foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  width: min(1180px, 90vw); margin: 30px auto 0;
  padding-top: 22px; border-top: 1px solid var(--border-l);
  font-size: 13px; color: var(--ink-2);
}
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--ink-2); text-decoration: none; transition: color 0.25s var(--ease); }
.foot-links a:hover { color: var(--iris-deep); }
.foot .nastaliq { color: var(--iris-deep); }

/* ---------- donate: dark theme (deeper colours for the closing section) ---------- */
.donate .label { color: var(--light-2); }
.donate-head h2 { color: var(--light); }
.donate-head h2 em { color: var(--iris-bright); }
.roller-intro { color: var(--light-2); }
.roller { background: rgba(243, 238, 251, 0.08); box-shadow: inset 0 0 0 1px var(--border-d); }
.roller span { color: var(--iris-bright); }
.donate-card {
  background: radial-gradient(130% 130% at 25% 12%, rgba(124, 58, 237, 0.22), rgba(16, 10, 26, 0.92));
  border: 1px solid rgba(243, 238, 251, 0.12);
  color: var(--light);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 251, 0.05), 0 26px 64px rgba(0, 0, 0, 0.45);
}
.donate-card:hover { box-shadow: inset 0 0 0 1px rgba(243, 238, 251, 0.1), 0 34px 76px rgba(124, 58, 237, 0.4); }
.donate-card .card-kicker { color: var(--iris-bright); }
.donate-card h3 { color: var(--light); }
.donate-card > p { color: var(--light-2); }
.donate-url { color: var(--iris-bright); border-color: var(--border-d); }
.donate-arrow { color: var(--light-2); }
.donate-card:hover .donate-arrow { color: var(--iris-bright); }
.donate .foot { border-top-color: var(--border-d); color: var(--light-2); }
.donate .foot-links a { color: var(--light-2); }
.donate .foot-links a:hover { color: var(--iris-bright); }
.donate .foot .nastaliq { color: var(--iris-bright); }
.donate .cursor-blob {
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.5), rgba(124, 58, 237, 0.3) 45%, transparent 72%);
}

/* ============================================================
   3D SCENE TRANSITIONS + PER-SECTION DEPTH
   The .stage supplies the shared perspective; sections and direct
   children tip/rise in that space as GSAP scrubs them.
   ============================================================ */

.scene-out { transform-origin: 50% 100%; will-change: transform, opacity; }  /* tips back from its bottom edge */
.scene-in  { transform-origin: 50% 0%;   will-change: transform, opacity; }  /* rises in from its top edge */

.hero-media, .hero-inner { will-change: transform; }

/* near-ancestor perspective so direct children render with real depth */
.about-grid   { perspective: 1100px; }
.about-card   { will-change: transform; }
.donate-inner { perspective: 1000px; }
.donate-grid  { perspective: 1100px; }
.donate-card  { will-change: transform; transform-style: preserve-3d; }
.manifesto-pin { transform-style: preserve-3d; }

/* CSS-driven 3D entrance for numbers + donate cards — revealed by the .play
   class (same mechanism as every other .sreveal), so no GSAP/opacity conflict.
   The grids above supply the perspective; .jsec.play .sreveal resets transform. */
.donate-card.sreveal { transform: translateY(48px) rotateX(-16deg); transform-origin: 50% 100%; }
.about-card.sreveal-r { transform: translateX(40px) rotateY(-22deg) rotateX(6deg); }

/* ============================================================
   RESPONSIVE  (≤ 900px → native scroll, static motion path)
   ============================================================ */

@media (max-width: 900px) {
  .nav-links {
    position: fixed; top: 60px; left: 0; right: 0; z-index: 130;
    flex-direction: column; gap: 0;
    background: rgba(14, 10, 24, 0.97); color: var(--light);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-d);
    padding: 8px 0 16px;
    transform: translateY(-130%); transition: transform 0.5s var(--ease);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 13px 6vw; font-size: 16px; opacity: 0.9; }
  .burger { display: flex; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-card { max-width: 380px; }
  /* deck horizontal swipe only when GSAP is off; otherwise the GSAP pin drives it */
  .deck-panel { padding: clamp(28px, 8vw, 70px); }
  .deck-index { font-size: clamp(6rem, 30vw, 12rem); }
  .donate-grid { grid-template-columns: 1fr; }
  .orbit-badge { display: none; }
  .foot { justify-content: center; text-align: center; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .giant { font-size: clamp(3.2rem, 22vw, 6rem); }
  .statement-lines { font-size: clamp(2rem, 12vw, 3.4rem); }
}

/* ============================================================
   MOBILE DECK (≤ 900px) — heading on top, cards stacked below at
   natural height (no elongated full-screen panels). The horizontal
   pin stays desktop-only (see buildDeck in js/main.js).
   ============================================================ */
@media (max-width: 900px) {
  .deck { flex-direction: column; overflow: visible; padding: 96px 0 64px; }
  .deck-track { flex-direction: column; align-items: stretch; height: auto;
    width: min(540px, 88vw); margin: 0 auto; padding: 0; gap: 18px; }

  /* cards: natural height, stacked, with a soft lift */
  .deck-panel { width: 100%; height: auto; margin: 0; border-radius: 26px;
    align-items: flex-start; padding: 30px 26px; box-shadow: 0 16px 38px rgba(124, 58, 237, 0.1); }
  /* each panel rises in as it scrolls into view (class toggled by buildDeck) */
  .deck-panel.deck-rise { opacity: 0; transform: translateY(40px) scale(0.97);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .deck-panel.deck-rise.in { opacity: 1; transform: none; }
  .deck-panel h3 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); max-width: none; margin-bottom: 12px; }
  .deck-desc { font-size: 1rem; max-width: none; }
  .deck-panel .card-kicker { margin-bottom: 10px; }
  .deck-index { top: 22px; right: 24px; bottom: auto; font-size: 3.2rem; line-height: 1; }
  .deck-cta-link { margin-top: 20px; }

  /* intro is the section heading, not a card */
  .deck-intro { background: transparent; box-shadow: none; padding: 0 4px 4px; }
  .deck-intro h2 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .deck-hint { display: none; }
}

/* cute cartoon sky is mobile-only */
.kid-sky { display: none; }

/* ============================================================
   CUTE / CHILDISH MOBILE VIEW (≤ 900px)
   A separate playful world for phones: pastel blue/pink/lavender,
   rounded Fredoka type, cartoon SVG critters with gentle, always-on
   CSS animations. Desktop keeps the cinematic build untouched.
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --cute: "Fredoka", "Baloo 2", var(--font);
    --cute-pink: #ff8fc7; --cute-blue: #6ab7ff; --cute-lav: #b794f6;
    --cute-ink: #5a4a7a; --cute-deep: #5a3fa0;
  }

  body { background: #fdf2fb; color: var(--cute-ink); }

  /* content is always visible on mobile — no fragile scroll-reveals;
     the life comes from the always-on cartoon animations instead */
  .sreveal, .sreveal-r { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* rounded chunky type everywhere */
  h1, h2, h3, .brand-name, .label, .card-kicker, .deck-cta-link,
  .btn, .deck-intro h2, .giant, .statement-lines, .mstat { font-family: var(--cute); }
  h1, h2, h3 { letter-spacing: -0.005em; }

  /* nav */
  .nav-shell, .nav--dark, .nav--light { color: var(--cute-ink); }
  .jsec[data-theme="dark"] { color: var(--cute-ink); }
  .nav-actions .btn-record { display: none; }
  .nav-inner { padding: 12px 0; }
  .btn { border-radius: 100px; }
  .btn-iris { background: linear-gradient(135deg, #ff8fc7, #b794f6); box-shadow: 0 8px 18px rgba(183, 148, 246, 0.4); }
  .btn-iris:hover { background: linear-gradient(135deg, #ff7dbd, #a986f0); }

  /* roomier, softer sections */
  .jsec { padding: 92px 22px 72px; }
  .container { width: 100%; }

  /* ---------- HERO: pastel sky + cartoon critters ---------- */
  .hero-media, .hero-scrim, .orbit-badge { display: none; }
  .jsec.hero { background: linear-gradient(180deg, #bfe6ff 0%, #ecdcff 50%, #ffe1f0 100%); align-items: center; }
  .kid-sky { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .hero-inner { position: relative; z-index: 2; text-align: center; padding-top: 188px; }
  .hero .label { color: #8a5cc4; justify-content: center; }
  .hero h1 { color: var(--cute-deep); text-shadow: 0 2px 0 #fff; font-weight: 700; }
  .hero h1 em { color: var(--cute-pink); font-family: var(--cute); font-style: normal; }
  .hero-sub { color: #6a5a8a; margin: 22px auto 0; }
  .hero-sub .nastaliq { color: #8a5cc4; }
  .hero-actions { justify-content: center; }
  .hero .btn-ghost { color: var(--cute-deep); background: #fff; border: 2px solid #ffd0e6;
    box-shadow: 0 8px 18px rgba(255, 143, 199, 0.25); }
  .scroll-cue { color: #8a6cc4; }
  .scroll-cue span { border-color: #c8a6f0; }
  .scroll-cue span::after { background: var(--cute-lav); }

  /* cartoon critters */
  .kd { position: absolute; }
  .kd-sun { width: 82px; top: 16px; right: 14px; animation: kdFloat 6s ease-in-out infinite; }
  .kd-rays { transform-origin: 50px 50px; animation: kdSpin 24s linear infinite; }
  .kd-cloud { filter: drop-shadow(0 6px 9px rgba(120, 140, 200, 0.18)); }
  .kd-cloud1 { width: 108px; top: 78px; left: -18px; animation: kdDrift 15s ease-in-out infinite; }
  .kd-cloud2 { width: 80px; top: 150px; right: -8px; animation: kdDrift 19s ease-in-out infinite reverse; }
  .kd-star { width: 26px; animation: kdTwinkle 3s ease-in-out infinite; }
  .kd-star1 { top: 128px; left: 12%; }
  .kd-star2 { top: 64px; right: 30%; width: 20px; animation-delay: 0.7s; }
  .kd-star3 { top: 196px; left: 26%; width: 17px; animation-delay: 1.3s; }
  .kd-spark { animation: kdTwinkle 2.4s ease-in-out infinite; }
  .kd-spark1 { width: 22px; top: 58px; left: 44%; animation-delay: 0.3s; }
  .kd-spark2 { width: 15px; top: 168px; right: 20%; animation-delay: 0.9s; }
  .kd-heart1 { width: 22px; top: 150px; left: 8%; animation: kdFloat 5s ease-in-out infinite; }
  .kd-mascot { width: 118px; left: 50%; margin-left: -59px; top: 62px; }
  .kd-bob { transform-origin: 65px 65px; animation: kdBob 4s ease-in-out infinite; }

  /* ---------- PROGRAMS deck → candy cards ---------- */
  .jsec.deck { background: linear-gradient(180deg, #ffe2f1, #ecdcff); }
  .deck-intro h2 { color: var(--cute-deep); }
  .deck-intro h2 em { color: var(--cute-pink); font-family: var(--cute); font-style: normal; }
  .deck-panel { border: 3px solid #fff; box-shadow: 0 16px 34px rgba(183, 148, 246, 0.22); }
  .deck-panel[data-fill="violet"]  { background: #efe2ff; }
  .deck-panel[data-fill="emerald"] { background: #d8f7ed; }
  .deck-panel[data-fill="rose"]    { background: #ffe1ee; }
  .deck-panel[data-fill="indigo"]  { background: #dbe8ff; }
  .deck-panel[data-fill="cta"]     { background: #f4e2ff; }
  .deck-panel h3 { color: var(--cute-deep); }
  .deck-panel .card-kicker { color: var(--cute-pink); }
  .deck-desc { color: #7a6a9a; }
  .deck-index { color: rgba(183, 148, 246, 0.2); }
  .deck-cta-link { background: linear-gradient(135deg, #ff8fc7, #b794f6); }
  .deck-intro { border: none; box-shadow: none; background: transparent; }
  .deck-intro h2 em { color: var(--cute-pink); }

  /* ---------- FACETS wall ---------- */
  .jsec.wall { background: linear-gradient(180deg, #d9f1ff, #ecdcff); }
  .wall-echo span { color: #b9a6e4; }
  .wall-list li { color: var(--cute-deep); font-family: var(--cute); }

  /* ---------- ZOON ---------- */
  .zoon-bg, .zoon-scrim { display: none; }
  .jsec.zoon { background: linear-gradient(180deg, #e7dcff, #d6e6ff); }
  .zoon .label { color: #8a5cc4; }
  .zoon .giant { color: var(--cute-deep); }
  .giant-fill { background: linear-gradient(100deg, #ff8fc7, #b794f6 55%, #6ab7ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .zoon-sub { color: #6a5a8a; }
  .zoon-sub em { color: var(--cute-pink); font-family: var(--serif); }

  /* ---------- NUMBERS → cute stat bubbles (moon retired) ---------- */
  .moon, .moon-scrim { display: none; }
  #numbers { background: linear-gradient(180deg, #cfe4ff, #ecdcff); }
  .moon-stage, .gsap-on .moon-stage { clip-path: none; height: auto; }
  .moon-content { padding: 0 6px; }
  .moon-stats { gap: 14px; }
  .mstat { color: var(--cute-deep) !important; background: #fff; border: 3px solid #ffd0e6;
    border-radius: 24px; padding: 18px 22px; text-align: left; text-shadow: none;
    box-shadow: 0 12px 26px rgba(183, 148, 246, 0.2); }
  .mstat strong { font-size: 1.3em; }
  .mstat:nth-child(1) strong { color: var(--cute-pink); }
  .mstat:nth-child(2) strong { color: var(--cute-blue); }
  .mstat:nth-child(3) strong { color: var(--cute-lav); }
  .mstat:nth-child(4) strong { color: #ffb02e; }

  /* ---------- MANIFESTO → multicolour lines ---------- */
  .jsec.manifesto { background: linear-gradient(180deg, #ffe2f1, #e7dcff); }
  .manifesto .label { color: #8a5cc4; }
  .manifesto .sline { color: #c8b4ec; }
  .manifesto .sline:nth-child(1) .word { color: #ff8fc7; }
  .manifesto .sline:nth-child(2) .word { color: #6ab7ff; }
  .manifesto .sline:nth-child(3) .word { color: #b794f6; }

  /* ---------- DONATE → soft pink/blue cards ---------- */
  .jsec.donate { background: linear-gradient(180deg, #e7dcff, #ffe2f1); }
  .donate .label { color: #8a5cc4; }
  .donate-head h2 { color: var(--cute-deep); }
  .donate-head h2 em { color: var(--cute-pink); font-family: var(--cute); font-style: normal; }
  .roller-intro { color: #6a5a8a; }
  .roller { background: #fff; box-shadow: 0 8px 20px rgba(183, 148, 246, 0.25); }
  .roller span { color: var(--cute-lav); }
  .donate-card { background: #fff; border: 3px solid #ffd0e6; color: var(--cute-deep);
    box-shadow: 0 16px 34px rgba(255, 143, 199, 0.22); }
  .donate-card .card-kicker { color: var(--cute-pink); }
  .donate-card h3 { color: var(--cute-deep); }
  .donate-card > p { color: #7a6a9a; }
  .donate-url { color: var(--cute-lav); border-color: #e6d0ff; }
  .donate-arrow { color: var(--cute-pink); }
  .donate .foot { color: #7a6a9a; border-top-color: #e6d0ff; }
  .donate .foot-links a { color: #7a6a9a; }
  .donate .foot .nastaliq { color: var(--cute-pink); }
  .cursor-blob { display: none; }

  /* ---------- gentle, always-on animations ---------- */
  @keyframes kdFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes kdBob     { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
  @keyframes kdDrift   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
  @keyframes kdTwinkle { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 0.45; } }
  @keyframes kdSpin    { to { transform: rotate(360deg); } }
}

/* ---------- accessibility ---------- */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 400;
  padding: 10px 18px; border-radius: 100px;
  background: var(--iris-deep); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
*:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }

/* ============================================================
   STATIC / FALLBACK MOTION PATH
   Used when GSAP is absent, on mobile, or under reduced motion.
   Everything must be visible and readable with no transforms.
   ============================================================ */

.static-fallback .giant,
.static-fallback .scene-out,
.static-fallback .scene-in,
.static-fallback .about-card,
.static-fallback .donate-card,
.static-fallback .donate-head { transform: none !important; opacity: 1 !important; }
.static-fallback .giant { letter-spacing: -0.05em !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .sreveal, .sreveal-r { opacity: 1 !important; transform: none !important; }
  .sline .word { color: #b07cff !important; }
  .giant { transform: none !important; letter-spacing: -0.05em !important; }
  .scene-out, .scene-in, .about-card, .donate-card { transform: none !important; opacity: 1 !important; }
  .wall-echo { transform: none; }
}