/* ===========================================================================
   about.css — the "your voice becomes everything" experience
   A deliberate break from site.css: black void, WebGL field, scroll acts.
   Loads AFTER saytomo.css (reuses its tokens + fonts + reset).
   =========================================================================== */

.about{
  --void:#06070C; --void-2:#0B0D15;
  --neon-mag:#FF4D8D; --neon-cyan:#36E6FF;
  --paper-glass:rgba(255,255,255,.06);
  --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.07);
  background:var(--void);
  color:#EEF2FF;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.about ::selection{ background:rgba(255,77,141,.35); color:#fff; }

/* ---- persistent WebGL field (fixed behind everything) -------------------- */
#aboutGL{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  display:block; pointer-events:none;
  transition:opacity .8s var(--ease);
}
.about.no-gl #aboutGL{ display:none; }
/* CSS fallback field when WebGL is unavailable / reduced-motion */
.about.no-gl{
  background:
    radial-gradient(60% 50% at 20% 12%, rgba(92,108,242,.28), transparent 70%),
    radial-gradient(55% 45% at 82% 30%, rgba(138,123,245,.26), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(246,168,131,.18), transparent 70%),
    var(--void);
}

/* readability veil — a LIGHT edge-vignette only; keeps the field vivid (no global dulling). */
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(140% 118% at 50% 42%, transparent 66%, rgba(6,7,12,.4) 100%); }
.about.no-gl .veil{ display:none; }

/* Legibility = clean vivid text + soft BEHIND-text scrims (per section, below). No letter
   drop-shadows (they muddy gradient text). Only a faint shadow on small plain text, invisible. */
.lede,.belief,.sub,.ch-desc,.vision p,.vision .who,.demo .clean,.demo .raw{ text-shadow:0 1px 9px rgba(6,7,12,.4); }

/* top scroll-progress hairline */
.sbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:90; background:transparent; }
.sbar > i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--neon-cyan),var(--accent),var(--neon-mag));
  box-shadow:0 0 14px rgba(120,120,255,.7); transition:width .12s linear; }

/* ---- floating nav ------------------------------------------------------- */
.anav{ position:fixed; top:0; left:0; right:0; z-index:80; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);
  background:linear-gradient(180deg,rgba(6,7,12,.72),rgba(6,7,12,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.anav .brand{ display:flex; align-items:center; gap:9px; font-weight:760; letter-spacing:-.03em; font-size:18px; color:#fff; }
.anav .brand img{ height:24px; width:auto; filter:drop-shadow(0 2px 8px rgba(120,140,255,.5)); }
.anav .nlinks{ display:flex; align-items:center; gap:clamp(10px,2vw,22px); font-family:var(--mono); font-size:12.5px; color:rgba(238,242,255,.66); }
.anav .nlinks a{ transition:color .25s; }
.anav .nlinks a:hover{ color:#fff; }
.anav .lang{ border:1px solid var(--hair); padding:5px 11px; border-radius:100px; }
.anav .dlbtn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:100px;
  font-family:var(--font); font-weight:600; font-size:13.5px; color:#06070C;
  background:linear-gradient(180deg,#fff,#d9e0ff); box-shadow:0 6px 20px -8px rgba(140,160,255,.8); transition:transform .3s var(--ease-out); }
.anav .dlbtn:hover{ transform:translateY(-2px); }
.anav .dlbtn svg{ width:15px; height:15px; }
@media(max-width:680px){ .anav .nlinks .nlk{ display:none; } }

/* ---- act scaffold ------------------------------------------------------- */
main.acts{ position:relative; z-index:2; }
.act{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding:clamp(90px,12vh,150px) 0; }
.wrap{ position:relative; z-index:3; width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.eyebrow,.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(238,242,255,.55); font-weight:500; display:inline-flex; align-items:center; gap:10px; }
.eyebrow i,.kicker i{ width:22px; height:1.5px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-mag)); display:inline-block; }
.grad{ background:linear-gradient(100deg,var(--neon-cyan),var(--accent-2) 45%,var(--neon-mag)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay:calc(var(--i,0)*90ms); }
.reveal.in{ opacity:1; transform:none; }

/* ===== ACT 0 — OVERTURE / HERO ===== */
.act--hero{ min-height:100svh; text-align:left; }
/* soft, invisible-edged scrim behind the hero copy so the vivid gradient stays clean yet readable */
.hero{ position:relative; }
.hero::before{ content:""; position:absolute; left:-8%; top:-2%; width:74%; height:104%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 72% 64% at 30% 48%, rgba(6,7,12,.42), transparent 74%); filter:blur(20px); }
.hero-title{ margin:20px 0 0; font-weight:900; line-height:1.0; letter-spacing:-.05em;
  font-size:clamp(3rem,10vw,8.5rem); text-shadow:0 8px 48px rgba(60,72,170,.4); }
.hero-title .scram{ display:block; padding-bottom:.06em; }
.hero-title .ln2{ display:block; padding-bottom:.12em; }
.hero .lede{ margin-top:26px; max-width:600px; font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:rgba(238,242,255,.78); line-height:1.55; font-weight:430; }
.hero .lede b{ color:#fff; font-weight:680; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:500;
  color:rgba(238,242,255,.8); padding:8px 14px; border-radius:100px; background:var(--paper-glass); border:1px solid var(--hair); }
.chip i{ width:7px; height:7px; border-radius:50%; }
.scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(238,242,255,.5);
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.scrollcue::after{ content:""; width:1px; height:42px; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent); animation:cueDrop 1.8s var(--ease) infinite; }
@keyframes cueDrop{ 0%{ transform:scaleY(.2); transform-origin:top; opacity:0; } 40%{ opacity:1; } 100%{ transform:scaleY(1); transform-origin:top; opacity:0; } }
/* decode/scramble caret */
.scram{ white-space:pre-wrap; }
.scram .ch{ display:inline-block; }

/* ===== ACT I — MANIFESTO (raw / underground) ===== */
.act--manifesto{ overflow:hidden; }
.act--manifesto .wrap{ max-width:1280px; }
.shatter{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.mega{ position:relative; margin:18px 0 0; font-weight:900; line-height:.86; letter-spacing:-.055em;
  font-size:clamp(2.6rem,12vw,11rem); text-transform:uppercase; color:#fff; }
.mega .rip{ background:linear-gradient(100deg,var(--neon-mag),var(--neon-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* RGB-split glitch heading */
.glitch{ position:relative; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.85; }
.glitch::before{ color:var(--neon-cyan); animation:gl-x 3.4s steps(2,end) infinite; clip-path:inset(0 0 62% 0); }
.glitch::after{ color:var(--neon-mag); animation:gl-y 2.7s steps(2,end) infinite reverse; clip-path:inset(58% 0 0 0); }
@keyframes gl-x{ 0%,86%,100%{ transform:translate(0,0); } 88%{ transform:translate(-4px,-2px); } 92%{ transform:translate(3px,1px); } }
@keyframes gl-y{ 0%,80%,100%{ transform:translate(0,0); } 83%{ transform:translate(4px,2px); } 90%{ transform:translate(-3px,-1px); } }
.kana{ position:absolute; font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:rgba(54,230,255,.35); writing-mode:vertical-rl; top:8%; right:3%; }
.beliefs{ position:relative; margin-top:clamp(38px,6vw,72px); display:grid; gap:clamp(16px,2.5vw,30px); max-width:880px; }
.beliefs::before{ content:""; position:absolute; inset:-6% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 80% 74% at 34% 50%, rgba(6,7,12,.5), transparent 78%); filter:blur(18px); }
.belief{ font-size:clamp(1.3rem,3.2vw,2.4rem); line-height:1.18; letter-spacing:-.02em; font-weight:600; color:rgba(238,242,255,.92); }
.belief b{ color:#fff; }
.belief .hl{ background:linear-gradient(100deg,var(--neon-mag),var(--neon-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.belief.dim{ color:rgba(238,242,255,.5); font-size:clamp(1rem,2vw,1.35rem); font-weight:430; }

/* ===== ACT II — THE FOUR POWERS (elegant + cyber) ===== */
.act--powers .wrap{ max-width:1100px; }
.powers-head h2{ margin:14px 0 0; font-weight:850; letter-spacing:-.04em; line-height:1.02; font-size:clamp(2rem,5vw,4rem); }
.powers-head p{ margin-top:16px; max-width:600px; color:rgba(238,242,255,.7); font-size:1.05rem; }
.chapter{ min-height:88vh; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,5vw,64px); align-items:center; }
.chapter .meta{ position:sticky; top:0; }
.ch-no{ font-family:var(--mono); font-size:14px; letter-spacing:.2em; color:rgba(238,242,255,.4); }
.ch-name{ display:flex; align-items:center; gap:13px; margin:14px 0 0; font-weight:850; letter-spacing:-.03em; font-size:clamp(2.4rem,6vw,4.6rem); }
.ch-name .dot{ width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 6px rgba(255,255,255,.07); }
.ch-tag{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:5px 11px; border-radius:100px; border:1px solid var(--hair); color:rgba(238,242,255,.7); }
.ch-desc{ margin-top:18px; max-width:380px; color:rgba(238,242,255,.72); font-size:1.05rem; line-height:1.55; }
/* demo card */
.demo{ position:relative; border-radius:24px; padding:clamp(20px,3vw,34px); background:linear-gradient(180deg,rgba(10,12,22,.62),rgba(10,12,22,.46));
  border:1px solid var(--hair); box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08) inset; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.demo .lbl{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(238,242,255,.45); }
.demo .raw{ margin-top:14px; font-family:var(--mono); font-size:clamp(.95rem,1.5vw,1.1rem); color:rgba(238,242,255,.72); line-height:1.5; }
.demo .arrow{ margin:18px 0; height:1px; background:linear-gradient(90deg,transparent,var(--hair),transparent); position:relative; }
.demo .arrow::after{ content:"↓ saytomo"; position:absolute; left:50%; top:-10px; transform:translateX(-50%); background:var(--void-2); padding:2px 12px; border-radius:100px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(238,242,255,.5); border:1px solid var(--hair-2); }
.demo .clean{ font-size:clamp(1.15rem,2vw,1.5rem); font-weight:600; color:#fff; line-height:1.45; letter-spacing:-.01em; }
.demo .cur{ display:inline-block; width:2px; height:1.05em; vertical-align:-.15em; margin-left:2px; background:currentColor; animation:caret 1s steps(1) infinite; }

/* ===== ACT III — LIVING INTERFACE (futuristic HUD) ===== */
.act--core{ text-align:center; }
.act--core .wrap{ max-width:920px; display:flex; flex-direction:column; align-items:center; }
.act--core .wrap > *{ position:relative; z-index:1; }
.act--core .wrap::before{ content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:120%; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,7,12,.66), rgba(6,7,12,.32) 55%, transparent 78%);
  filter:blur(10px); }
.orb{ position:relative; width:min(340px,72vw); aspect-ratio:1; display:grid; place-items:center; margin-bottom:clamp(28px,4vw,48px); }
.orb .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--hair); }
.orb .ring.r2{ inset:13%; border-style:dashed; border-color:rgba(54,230,255,.3); animation:spin 26s linear infinite; }
.orb .ring.r3{ inset:26%; border-color:rgba(138,123,245,.4); animation:spin 18s linear infinite reverse; }
.orb .core{ width:42%; height:42%; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, #fff, var(--accent-2) 40%, var(--accent) 75%);
  box-shadow:0 0 60px rgba(120,130,255,.7), 0 0 120px rgba(138,123,245,.5); animation:floaty 5s var(--ease) infinite; }
.orb .core::after{ content:""; position:absolute; inset:-30%; border-radius:50%; border:1px solid rgba(255,255,255,.25); animation:haloPulse 2.6s var(--ease-out) infinite; }
.orb .tick{ position:absolute; top:50%; left:50%; width:3px; height:9px; background:rgba(54,230,255,.6); transform-origin:0 130px; }
.act--core h2{ font-weight:850; letter-spacing:-.04em; line-height:1.05; font-size:clamp(2rem,5.4vw,4.2rem); }
.act--core h2 .grad{ display:inline; }
.act--core .sub{ margin-top:18px; max-width:560px; color:rgba(238,242,255,.72); font-size:1.08rem; }
.cmd{ list-style:none; margin:clamp(30px,4vw,46px) auto 0; max-width:560px; width:100%; text-align:left;
  border:1px solid var(--hair); border-radius:18px; overflow:hidden; background:rgba(8,10,18,.6); backdrop-filter:blur(8px); font-family:var(--mono); }
.cmd li{ display:flex; gap:12px; align-items:baseline; padding:13px 18px; border-bottom:1px solid var(--hair-2); font-size:13.5px; color:rgba(238,242,255,.82);
  opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.cmd li.in{ opacity:1; transform:none; }
.cmd li:last-child{ border-bottom:0; }
.cmd .you{ color:var(--neon-cyan); }
.cmd .arr{ color:rgba(238,242,255,.4); }
.hudbrackets{ position:absolute; inset:clamp(16px,4vw,40px); z-index:3; pointer-events:none; }
.hudbrackets span{ position:absolute; width:26px; height:26px; border:2px solid rgba(54,230,255,.35); }
.hudbrackets .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.hudbrackets .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.hudbrackets .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.hudbrackets .br{ bottom:0; right:0; border-left:0; border-top:0; }

/* ===== ACT IV — ORIGIN / yulu (organic / zen) ===== */
.act--origin{ background:#0a1020; isolation:isolate; overflow:hidden; }
.act--origin .bg{ position:absolute; inset:0; z-index:0; background:url(/assets/about-origin.webp) center/cover no-repeat;
  transform:scale(1.14); will-change:transform; }
.act--origin .scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,7,12,.5) 0%, transparent 15%, transparent 82%, rgba(6,7,12,.52) 100%),
    linear-gradient(90deg, rgba(4,6,14,.5) 0%, rgba(4,6,14,.1) 42%, rgba(4,6,14,.4) 72%, rgba(4,6,14,.62) 100%); }
/* cool god-rays from the scene's sky light-source (additive) */
.act--origin .rays{ position:absolute; inset:-18% -10%; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.45;
  background:conic-gradient(from 202deg at 50% 20%,
    transparent 0deg, rgba(196,230,255,.16) 4deg, transparent 9deg,
    transparent 17deg, rgba(214,238,255,.12) 21deg, transparent 27deg,
    transparent 39deg, rgba(178,236,226,.13) 43deg, transparent 49deg,
    transparent 60deg, rgba(206,224,255,.10) 63deg, transparent 69deg);
  animation:rayDrift 18s var(--ease) infinite alternate; }
/* ambient drifting light-motes over the origin scene (calmer, cool-toned) */
.act--origin .embers{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
/* extra soft darkening directly behind the vision copy (right column) so paragraphs read */
.act--origin .wrap{ position:relative; z-index:2; }
.vision{ position:relative; }
.vision::before{ content:""; position:absolute; inset:-10% -14% -12% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 94% 90% at 52% 52%, rgba(5,7,14,.76), rgba(5,7,14,.4) 56%, transparent 82%); filter:blur(16px); }
.act--origin .wrap{ max-width:1180px; }
.origin{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,68px); align-items:center; }
.portrait{ position:relative; }
.portrait .frame{ position:relative; display:block; width:100%; max-width:420px; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset; }
.portrait .frame img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.portrait .frame::after{ content:""; position:absolute; inset:0; box-shadow:0 0 90px rgba(120,130,255,.45) inset; mix-blend-mode:screen; pointer-events:none; }
.portrait .glow{ position:absolute; inset:-12% -12% -18% -12%; z-index:-1; border-radius:40px; filter:blur(40px); opacity:.6;
  background:radial-gradient(circle at 60% 40%, var(--neon-mag), transparent 55%), radial-gradient(circle at 30% 70%, var(--neon-cyan), transparent 55%); animation:floaty2 9s var(--ease) infinite; }
.portrait .badge{ position:absolute; left:18px; bottom:18px; z-index:2; display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#fff; padding:8px 13px; border-radius:100px;
  background:rgba(8,10,18,.6); border:1px solid var(--hair); backdrop-filter:blur(8px); }
.portrait .badge .eye-r{ width:8px; height:8px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 8px #ff5a5a; }
.portrait .badge .eye-b{ width:8px; height:8px; border-radius:50%; background:#5aa0ff; box-shadow:0 0 8px #5aa0ff; }
.vision .kicker{ color:rgba(238,242,255,.7); }
.vision h2{ margin:16px 0 0; font-weight:850; letter-spacing:-.035em; line-height:1.08; font-size:clamp(1.9rem,4.6vw,3.4rem); }
.vision .who{ margin-top:8px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:rgba(238,242,255,.55); }
.vision p{ margin-top:20px; max-width:560px; color:rgba(238,242,255,.84); font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.62; }
.vision p + p{ margin-top:14px; }
.vision .sign{ margin-top:26px; display:flex; align-items:center; gap:14px; }
.vision .sign .name{ font-family:var(--tcs),serif; font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:.02em; }
.vision .sign .org{ font-family:var(--mono); font-size:12px; color:rgba(238,242,255,.55); border-left:1px solid var(--hair); padding-left:14px; line-height:1.4; }

/* ===== ACT V — THE VISION / CREED (cinematic, maximal) ===== */
.act--creed{ background:#0a0710; isolation:isolate; overflow:hidden; min-height:108svh; }
.act--creed .bg{ position:absolute; inset:0; z-index:0;
  background:url(/assets/about-creed.webp) center/cover no-repeat; transform:scale(1.06); will-change:transform; image-rendering:auto; }
/* cinematic colour-grade + directional scrim so the left-anchored copy reads over the sunset */
.act--creed .grade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 96% at 8% 88%, rgba(3,4,9,.92), transparent 56%),
    linear-gradient(96deg, rgba(3,4,9,.88) 0%, rgba(3,4,9,.54) 33%, rgba(3,4,9,.12) 60%, transparent 80%),
    linear-gradient(180deg, rgba(3,4,9,.62) 0%, rgba(3,4,9,.22) 16%, transparent 30%, transparent 56%, rgba(3,4,9,.76) 100%),
    radial-gradient(58% 50% at 27% 30%, rgba(255,150,86,.20), transparent 66%); }
/* drifting god-rays from the sun, additive */
.act--creed .rays{ position:absolute; inset:-22% -12%; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:conic-gradient(from 196deg at 30% 26%,
    transparent 0deg, rgba(255,206,150,.22) 3deg, transparent 7deg,
    transparent 13deg, rgba(255,184,140,.14) 16deg, transparent 21deg,
    transparent 31deg, rgba(255,222,172,.17) 34deg, transparent 39deg,
    transparent 51deg, rgba(255,196,150,.11) 54deg, transparent 61deg);
  animation:rayDrift 16s var(--ease) infinite alternate; }
@keyframes rayDrift{ 0%{ transform:rotate(-2.4deg) scale(1.02); opacity:.4; } 100%{ transform:rotate(2.6deg) scale(1.09); opacity:.6; } }
/* embers + petals canvas */
.act--creed .embers{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.act--creed .wrap{ position:relative; z-index:3; max-width:1180px; }
.act--creed .kicker{ color:rgba(255,228,210,.8); }
.act--creed .kicker i{ background:linear-gradient(90deg,#ffd9a0,var(--neon-mag)); }
.creed-title{ margin:18px 0 0; font-weight:900; letter-spacing:-.045em; line-height:1.02;
  font-size:clamp(2.4rem,6.6vw,6rem); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.6), 0 16px 60px rgba(0,0,0,.5); }
.creed-title .grad{ background:linear-gradient(100deg,#ffd27a,#ff9a6b 42%,var(--neon-mag));
  -webkit-background-clip:text; background-clip:text; color:transparent; background-size:220% 100%; animation:creedSheen 7s var(--ease) infinite; }
@keyframes creedSheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.creed-body{ position:relative; margin-top:clamp(22px,3vw,34px); max-width:600px; }
.creed-body::before{ content:""; position:absolute; inset:-10% -12% -10% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 82% 80% at 36% 52%, rgba(3,4,9,.62), transparent 76%); filter:blur(14px); }
.creed-body p{ color:rgba(245,238,255,.9); font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.64; text-shadow:0 1px 11px rgba(3,4,9,.66); }
.creed-body p + p{ margin-top:15px; }
.creed-coda{ margin-top:clamp(26px,3.6vw,42px); max-width:780px; font-weight:750; letter-spacing:-.02em;
  font-size:clamp(1.35rem,3vw,2.35rem); line-height:1.22; color:#fff; text-shadow:0 6px 34px rgba(0,0,0,.5); }
.creed-coda .spark{ background:linear-gradient(100deg,#ffe6a8 0%,#ffb27a 30%,#ff7aa8 55%,#ffe6a8 80%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:codaShine 4.5s linear infinite; }
@keyframes codaShine{ 0%{ background-position:120% 50%; } 100%{ background-position:-40% 50%; } }

/* ===== ACT VI — OUTRO / CTA ===== */
.act--outro{ text-align:center; }
.act--outro .wrap{ max-width:780px; display:flex; flex-direction:column; align-items:center; }
.act--outro .wrap > *{ position:relative; z-index:1; }
.act--outro .wrap::before{ content:""; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:118%; height:78%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 52% 54% at 50% 50%, rgba(6,7,12,.6), transparent 78%); filter:blur(12px); }
.act--outro h2{ font-weight:900; letter-spacing:-.05em; line-height:.95; font-size:clamp(2.6rem,9vw,6.5rem); }
.act--outro .sub{ margin-top:20px; color:rgba(238,242,255,.72); font-size:1.12rem; max-width:520px; }
.bigdl{ margin-top:36px; display:inline-flex; align-items:center; gap:11px; height:62px; padding:0 36px; border-radius:100px;
  font-size:17px; font-weight:650; color:#06070C; background:linear-gradient(180deg,#fff,#cfd8ff);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -18px rgba(140,160,255,.85); transition:transform .35s var(--ease-out), box-shadow .35s; }
.bigdl:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 34px 80px -20px rgba(140,160,255,.95); }
.bigdl svg{ width:19px; height:19px; }
.act--outro .fine{ margin-top:18px; font-family:var(--mono); font-size:12.5px; color:rgba(238,242,255,.45); }

/* ---- footer ------------------------------------------------------------- */
.afoot{ position:relative; z-index:2; border-top:1px solid var(--hair-2); padding:40px 0 46px; background:var(--void); }
.afoot .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13px; color:rgba(238,242,255,.45); }
.afoot a{ color:rgba(238,242,255,.7); }
.afoot a:hover{ color:#fff; }
.afoot .flinks{ display:flex; gap:20px; font-family:var(--mono); font-size:12.5px; }

/* ---- responsive --------------------------------------------------------- */
@media(max-width:860px){
  .chapter{ grid-template-columns:1fr; gap:24px; min-height:auto; padding:8vh 0; }
  .chapter .meta{ position:static; }
  .origin{ grid-template-columns:1fr; }
  .portrait .frame{ max-width:320px; margin:0 auto; }
  .act{ padding:clamp(80px,12vh,120px) 0; }
  .act--creed .rays{ opacity:.34; }
  .creed-title{ max-width:none; }
}

/* ---- reduced motion: calm everything, keep it legible -------------------- */
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .glitch::before,.glitch::after{ display:none; }
  .orb .ring,.orb .core,.orb .core::after,.portrait .glow,.scrollcue::after{ animation:none !important; }
  .act--creed .rays,.act--origin .rays,.creed-title .grad,.creed-coda .spark{ animation:none !important; }
  #aboutGL{ display:none; }
  .cmd li{ opacity:1; transform:none; }
}