/* ============================================================
   Rito Schröder — tema reveal.js
   "Loja à luz de vela + gravura iluminista"
   Eixos de cor: dourado quente (maçônico-prático) · azul frio (filosófico)
   ============================================================ */

:root {
  /* base */
  --ink:        #0b1622;
  --ink-2:      #102032;
  --ink-3:      #16293d;

  /* tinta sobre escuro (pergaminho levemente quente) */
  --parch:      #ece3d0;
  --parch-dim:  rgba(236, 227, 208, 0.58);
  --parch-faint:rgba(236, 227, 208, 0.30);

  /* eixo quente — maçônico/prático */
  --gold:       #c9a24b;   /* ênfase (dourado saturado) */
  --gold-bright:#e7c878;
  --gold-deep:  #8a6d2c;
  --amber:      #f3e6ad;   /* texto quente claro (amarelo claro) — contrasta com a ênfase dourada */

  /* eixo frio — filosófico */
  --philo:      #88abdb;
  --philo-dim:  #5d7ea6;

  --line:       rgba(236, 227, 208, 0.14);
  --line-strong:rgba(236, 227, 208, 0.28);

  --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-body:    "EB Garamond", "Iowan Old Style", Georgia, serif;
}

/* ---------- palco ---------- */
.reveal {
  font-family: var(--serif-body);
  color: var(--parch);
  font-weight: 400;
  letter-spacing: 0.005em;
}
html { background: var(--ink); }
body { background: transparent; }
.reveal-viewport { background: transparent; }
/* camada generativa (ambient.js) */
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* atmosfera por ato — o meio acompanha a mensagem (crossfade suave) */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: transparent; transition: background 1.4s var(--ease, ease); }
body.act-cool::before { background: radial-gradient(85% 65% at 50% 28%, rgba(136,171,219,0.07), transparent 62%); }
body.act-warm::before { background: radial-gradient(95% 75% at 50% 116%, rgba(201,162,75,0.09), transparent 56%); }
body.act-esoteric::before {
  background:
    radial-gradient(70% 60% at 50% 48%, rgba(201,162,75,0.10), transparent 60%),
    radial-gradient(55% 45% at 50% 52%, rgba(150,60,30,0.06), transparent 70%); }

/* atmosfera: brilho de vela + vinheta + grão */
.reveal-viewport::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(201,162,75,0.18) 0%, rgba(201,162,75,0.05) 28%, transparent 55%),
    radial-gradient(90% 70% at 50% -20%, rgba(136,171,219,0.10) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.reveal-viewport::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.reveal .slides { text-align: left; }
.reveal .slides section { z-index: 1; }
/* slides ocupam a altura toda do palco (preenche a vertical) */
.reveal .slides > section { height: 100% !important; box-sizing: border-box; }

/* ---------- tipografia base ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--serif-display);
  color: var(--parch);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: none;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.reveal p { line-height: 1.45; margin: 0 0 0.6em; }
.reveal em { font-style: italic; }
.reveal strong { font-weight: 600; color: var(--gold); }

/* ---------- kicker (rótulo do ATO) ---------- */
.kicker {
  font-family: var(--serif-body);
  font-variant: small-caps;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  font-size: 1.15rem;
  color: var(--gold);
  margin: 0 0 0.9rem;
  display: flex; align-items: center; gap: 0.7em;
}
.kicker::before {
  content: ""; width: 2.2em; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.kicker.cool { color: var(--philo); }
.kicker.cool::before { background: linear-gradient(90deg, var(--philo), transparent); }

/* ---------- palavra-monumento (display) ---------- */
.word-xl {
  font-family: var(--serif-display);
  font-size: 8rem;
  font-weight: 340;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
/* encerramento: constelação de conceitos atrás de "Era o que continha" */
.finale { position: relative; height: 100%; }
.webfield { position: absolute; inset: 0; z-index: 0; }
.webfield .wn { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; z-index: 1;
  font-family: var(--serif-display); font-style: italic; font-size: 1.75rem; color: var(--parch-faint);
  will-change: transform, filter, opacity; }
/* retratos circulares no universo 3D (random walk via JS) */
.webfield .wn.img { width: 88px; height: 88px; border-radius: 50%; background-size: cover; background-position: center top;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(231,200,120,0.30); }
.webfield .wn.img-focal { width: 124px; height: 124px; }
.finale-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100;
  text-align: center; font-family: var(--serif-display); font-style: italic; font-weight: 360;
  font-size: 5.6rem; color: var(--parch); line-height: 1.05;
  /* glow azul-escuro forte: separa a frase do universo que se move atrás */
  text-shadow: 0 0 14px var(--ink), 0 0 14px var(--ink), 0 0 30px var(--ink), 0 0 30px var(--ink), 0 0 60px var(--ink); }
.finale-center::before {
  content: ""; position: absolute; inset: -120% -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11,22,34,0.92), rgba(11,22,34,0.55) 45%, transparent 72%);
}
.finale-sig { position: absolute; right: 5.5%; bottom: 7%; z-index: 100;
  font-family: var(--serif-display); font-style: italic; font-size: 2rem; color: var(--gold-bright);
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px var(--ink), 0 0 10px var(--ink), 0 0 22px var(--ink), 0 0 40px var(--ink); }

/* fórmula da "definição exata": conectivos discretos, conceitos como heróis */
.formula { text-align: center; line-height: 1.08; }
.formula .lead { font-family: var(--serif-body); font-style: italic; font-size: 2.7rem; color: var(--parch-dim); letter-spacing: 0.01em; }
.formula .term { font-family: var(--serif-display); font-style: italic; font-size: 6.6rem; font-weight: 360;
  color: var(--gold-bright); line-height: 1.02; margin: 0.4rem 0 0.25rem;
  text-shadow: 0 0 34px rgba(201,162,75,0.30), 0 0 70px rgba(201,162,75,0.12); }
.formula .sub { font-family: var(--serif-display); font-size: 3.1rem; color: var(--parch); }
.formula .block { margin-top: 2.2rem; }

.word-lg {
  font-family: var(--serif-display);
  font-size: 5rem;
  font-weight: 380;
  line-height: 1.0;
}
.foreign { font-style: italic; color: var(--gold-bright); }
.foreign.cool { color: var(--philo); }
.de { font-style: italic; }

/* tradução que surge no morph */
.pt-gloss {
  font-family: var(--serif-body);
  font-size: 2.1rem;
  color: var(--parch-dim);
  font-style: italic;
  margin-top: 1.1rem;
  max-width: 28ch;
}

/* lead / âncora secundária */
.lead {
  font-size: 2.3rem;
  color: var(--parch-dim);
  max-width: 32ch;
  line-height: 1.38;
}

/* ---------- título FLIP (medição + transform, sem refluxo) ---------- */
.flip-slide { position: relative; }
.flipworld { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12em; position: relative; z-index: 2; }
.flipworld .epi { position: absolute; top: 17%; font-family: var(--serif-display); font-style: italic; color: var(--gold); font-size: 1.7rem; letter-spacing: 0.01em; }
.flipworld .t-line { display: flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.seg { display: inline-block; transform-origin: center center; will-change: transform; }
/* camada de destino (decomposto) — medida, invisível, alinhada ao layout final */
.targets { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100%; z-index: 1; }
.targets .col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; }
.targets .gnum { opacity: 0; font-family: var(--serif-display); font-size: 1.6rem; color: var(--gold); letter-spacing: 0.22em; will-change: opacity; }
.targets .ghost-term { opacity: 0; font-size: 3.4rem; }

/* ---------- termos do título (FLIP) ---------- */
.term-title {
  font-family: var(--serif-display);
  font-weight: 420;
  font-size: 5.4rem;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.term-title.q { font-style: italic; color: var(--gold-bright); }
.punct {
  font-family: var(--serif-display);
  font-size: 5.4rem; font-weight: 300;
  color: var(--parch-faint); font-style: italic;
}

/* ---------- citação-artefato ---------- */
.artifact {
  border-left: 2px solid var(--gold-deep);
  padding: 0.2em 0 0.2em 1.1em;
  max-width: 42rem;
}
.artifact .de, .artifact .la {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 2.7rem;
  color: var(--parch);
  line-height: 1.32;
}
.artifact .src {
  display: block;
  margin-top: 0.8em;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--parch-faint);
}

/* ---------- layout helpers ---------- */
.stage { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.center { align-items: center; text-align: center; }
.center .lead, .center .pt-gloss, .center .artifact { margin-left: auto; margin-right: auto; }
.center .artifact { border-left: none; border-top: 1px solid var(--gold-deep); padding: 1em 0 0; }
.rule { width: 3.2rem; height: 1px; background: var(--gold); margin: 1.4rem 0; border: 0; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- duo: um termo que se parte em dois sentidos ---------- */
.duo { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5rem; }
.duo .src-word { font-family: var(--serif-display); font-style: italic; font-size: 5rem; color: var(--parch); }
.duo .split-svg { width: min(60%, 760px); height: 70px; }
.duo .branches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 12vw, 14rem); width: 100%; max-width: 1500px; }
.duo .br { text-align: center; }
.duo .br .gk { font-family: var(--serif-display); font-style: italic; font-size: 5.5rem; line-height: 1; }
.duo .br.warm .gk { color: var(--gold-bright); }
.duo .br.cool .gk { color: var(--philo); }
.duo .br .desc { font-size: 2rem; color: var(--parch-dim); margin-top: 1rem; }

/* ---------- act opener (palavra grande, morph) ---------- */
.act-open { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; text-align: center; }
.act-open .pre { font-family: var(--serif-body); font-style: italic; font-size: 2.2rem; color: var(--parch-dim); }
.act-open .big { font-family: var(--serif-display); font-size: 8.5rem; line-height: 1; color: var(--gold-bright); font-style: italic; }

/* ---------- drift semântico (1794 -> 1842) ---------- */
.drift { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3.5rem; padding: 0 7%; }
.drift .word { text-align: center; font-family: var(--serif-display); font-style: italic; font-size: 5rem; color: var(--parch); }
.drift .track { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.drift .beam { position: absolute; left: 0; right: 0; top: 14px; height: 2px;
  background: linear-gradient(90deg, var(--philo), var(--gold-bright)); opacity: 0.7; }
.drift .pole { position: relative; padding-top: 3rem; }
.drift .pole::before { content: ""; position: absolute; top: 7px; width: 16px; height: 16px; border-radius: 50%; }
.drift .pole.l { text-align: left; }
.drift .pole.l::before { left: 0; background: var(--philo); box-shadow: 0 0 16px var(--philo); }
.drift .pole.r { text-align: right; }
.drift .pole.r::before { right: 0; background: var(--gold-bright); box-shadow: 0 0 16px var(--gold-bright); }
.drift .pole .y { display: block; font-family: var(--serif-display); font-size: 4rem; }
.drift .pole.l .y { color: var(--philo); } .drift .pole.r .y { color: var(--gold-bright); }
.drift .pole .m { display: block; font-size: 2rem; color: var(--parch-dim); margin-top: 0.6rem; max-width: 22ch; }
.drift .pole.r .m { margin-left: auto; }

/* ---------- órbita 3D (orbit3d.js) ---------- */
.orbit3d {
  position: relative;
  width: min(1640px, 99%);
  height: 640px;
  margin: 0 auto;
  perspective: none;
}
.orbit-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 100; pointer-events: none;
}
.orbit-core .ct {
  font-family: var(--serif-display); font-style: italic; font-weight: 360;
  color: var(--gold-bright); line-height: 0.98;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-shadow: 0 0 28px rgba(201,162,75,0.45), 0 0 60px rgba(201,162,75,0.18);
}
/* Aufklürung: núcleo bem maior (~3x) */
#orbit-aufk .ct { font-size: clamp(4.8rem, 10vw, 7.2rem); }
.orbit-core::after {
  content: ""; position: absolute; inset: -60% -40%; z-index: -1;
  background: radial-gradient(closest-side, rgba(201,162,75,0.18), transparent 70%);
}
.orbit-node {
  position: absolute; top: 0; left: 0;
  will-change: transform, opacity;
  text-align: center; pointer-events: none;
}
.orbit-node .lab {
  font-variant: small-caps; letter-spacing: 0.14em;
  font-size: 1.85rem; color: var(--parch-dim); white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.orbit-node.warm .lab { color: var(--gold-bright); }
.orbit-node.cool .lab { color: var(--philo); }
.orbit-node .med {
  width: 96px; height: 96px; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(231,200,120,0.25);
  margin: 0 auto;
}
.orbit-node .cap {
  display: block; margin-top: 0.5rem; font-family: var(--serif-display);
  font-size: 1.4rem; color: var(--parch); white-space: nowrap;
}

/* ---------- conectores em fita ---------- */
.conn-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }

/* ---------- duo com fitas ---------- */
.duo .src-word, .duo .branches { position: relative; z-index: 1; }

/* ---------- citação hero (legível de longe) ---------- */
.hero-quote { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 7%; gap: 1.6rem; }
.hero-quote .q { font-family: var(--serif-body); font-style: italic; font-size: 4rem; line-height: 1.28; color: var(--parch); max-width: 26ch; }
.hero-quote .q.la { color: var(--amber); }
.hero-quote .src { font-variant: small-caps; letter-spacing: 0.18em; color: var(--parch-faint); font-size: 1.55rem; }
.hero-quote .takeaway { font-size: 2.7rem; color: var(--parch-dim); font-style: italic; margin-top: 1rem; }

/* ---------- dicotomias com fitas (1 par por seta) ---------- */
.dico { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4rem; }
.dico .head { font-variant: small-caps; letter-spacing: 0.16em; color: var(--gold); font-size: 2.4rem; margin-bottom: 2.2rem; }
.dico-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 14rem; width: min(1100px, 86%); }
.dico-row .l { text-align: right; } .dico-row .r { text-align: left; }
.dico-row .l, .dico-row .r { position: relative; z-index: 1; font-family: var(--serif-display); font-size: 3.6rem; color: var(--parch); }
.dico-row.ours .l { color: var(--gold-bright); } .dico-row.ours .r { color: var(--philo); }

/* ---------- linha do tempo "pena que escreve o caminho" ---------- */
.penline { position: relative; height: 100%; }
.penline .pen-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.penline .pl-path { fill: none; stroke: rgba(214,176,92,0.55); stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(201,162,75,0.85)) drop-shadow(0 0 16px rgba(201,162,75,0.5)) drop-shadow(0 0 30px rgba(201,162,75,0.3));
  opacity: 0.75;
  stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 2s ease; }
.reveal .slides section.present .pl-path { stroke-dashoffset: 0; }
.penline .node { position: absolute; transform: translate(-50%, -50%); text-align: center; z-index: 1; width: max-content; }
.penline .node .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--gold); margin: 0 auto 0.7rem; box-shadow: 0 0 16px var(--gold); }
.penline .node .y { font-family: var(--serif-display); font-size: 3.2rem; color: var(--gold); display: block; line-height: 1; }
.penline .node .lbl { font-size: 1.75rem; color: var(--parch-dim); display: block; margin-top: 0.4rem; }
.penline .node.cool .dot { background: var(--philo); box-shadow: 0 0 16px var(--philo); }
.penline .node.cool .y { color: var(--philo); }

/* ---------- distinção em vesica piscis ---------- */
.vledger { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.vledger .vbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* títulos sobre cada círculo (centro dos círculos: 460/1280=35.9%, 820/1280=64.1%) */
.vledger .vhead { position: absolute; top: 3.5%; transform: translateX(-50%); z-index: 2; font-family: var(--serif-display); font-size: 3rem; white-space: nowrap; }
.vledger .vhead.l { left: 35.9%; color: var(--gold-bright); }
.vledger .vhead.r { left: 64.1%; color: var(--philo); }
/* 4 linhas comprimidas na faixa larga da lente; colunas = lóbulo/mandorla/lóbulo */
.vledger .vgrid { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; grid-template-columns: 400px 360px 400px; column-gap: 0; row-gap: 1.4rem; align-items: center; }
.vledger .facet { width: max-content; margin: 0 auto; text-align: center; font-variant: small-caps; letter-spacing: 0.14em; color: var(--gold); font-size: 2rem; white-space: nowrap; }
.vledger .val { max-width: 320px; margin: 0 auto; text-align: center; font-size: 1.875rem; line-height: 1.2; color: var(--parch); }

/* ---------- rodapé/numeração discreta ---------- */
.reveal .slide-number { background: transparent; color: var(--parch-faint); font-family: var(--serif-body); font-size: 0.7rem; }

/* progresso dourado */
.reveal .progress { color: var(--gold); height: 2px; }

/* fragments: variação "subir" suave para âncoras */
.reveal .fragment.rise { transform: translateY(14px); opacity: 0; transition: all 0.5s cubic-bezier(.2,.7,.2,1); }
.reveal .fragment.rise.visible { transform: none; opacity: 1; }

/* ---------- figuras tratadas (duotone, bordas esfumadas) ---------- */
.figure { display: block; height: 520px; width: auto; object-fit: contain; }
.figure.lg { height: 600px; }
.figure.sm { height: 420px; }

/* glifo em decodificação (morph.js) */
.mg { color: var(--gold-bright); }

/* composição retrato + texto — grid que preenche a tela */
.compose { height: 100%; display: grid; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 4% 6%; box-sizing: border-box; }
.compose.imgright { grid-template-columns: 1.15fr 0.85fr; }
.compose.imgleft  { grid-template-columns: 0.85fr 1.15fr; }
.compose .fig-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.compose .figure { height: 100%; max-height: 88vh; width: auto; max-width: 100%; }
.compose .txt { max-width: none; }
.compose .txt.right { text-align: right; }
.compose .txt.right .pt-gloss, .compose .txt.right .kicker { margin-left: auto; }

/* fundo épico (Aufklärung) — placeholder de colagem/vídeo (Atos 3–8) */
.epic-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(136,171,219,0.10), transparent),
    radial-gradient(60% 60% at 70% 70%, rgba(201,162,75,0.10), transparent),
    var(--ink);
}

/* ---------- medalhão reutilizável (retrato circular) ---------- */
.medallion { border-radius: 50%; background-size: cover; background-position: center top;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(231,200,120,0.3); }
.medallion.cool { box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(136,171,219,0.4); }

/* ---------- twin: dois termos-âncora lado a lado ---------- */
/* texto original de Kant flutuando, borrado, ao fundo (Sapere aude) */
.kant-bg { position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 0 7%;
  font-family: var(--serif-display); font-style: italic; font-size: 11rem; line-height: 1.1;
  white-space: nowrap; text-align: center; color: var(--parch-faint); opacity: 0.75; filter: blur(4.5px);
  --kx: 0%; --ky: 0%;   /* posição inicial aleatória (definida via JS) */
  animation: kantdrift 19s ease-in-out infinite alternate; will-change: transform; }
.kant-bg .sa { color: var(--gold-bright); }
@keyframes kantdrift {
  0%   { transform: translate(calc(var(--kx) - 7%), calc(var(--ky) - 5%)) scale(1.05) rotate(-1deg); }
  50%  { transform: translate(calc(var(--kx) + 5.5%), calc(var(--ky) + 6%)) scale(1.1) rotate(0.9deg); }
  100% { transform: translate(calc(var(--kx) + 7%), calc(var(--ky) - 4%)) scale(1.06) rotate(-0.4deg); }
}
.twin { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(4rem, 11vw, 12rem); padding: 0 7%; }
.twin .t { text-align: center; width: clamp(22rem, 30%, 28rem); }
.twin .t .w { font-family: var(--serif-display); font-style: italic; font-size: 5.2rem; color: var(--gold-bright); line-height: 1.02; }
.twin .t.cool .w { color: var(--philo); }
.twin .t .rule { width: 64px; height: 2px; margin: 1.7rem auto; border-radius: 2px; background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(201,162,75,0.4); opacity: 0.65; }
.twin .t.cool .rule { background: var(--philo); box-shadow: 0 0 10px var(--philo), 0 0 22px rgba(136,171,219,0.4); }
.twin .t .g { font-size: 2.5rem; color: var(--parch); line-height: 1.42; }
/* halo escuro (cor do fundo) p/ leitura quando o "Sapere aude" passa atrás */
.twin .t .w, .twin .t .g { text-shadow: 0 0 10px var(--ink), 0 0 18px var(--ink), 0 0 26px var(--ink); }

/* ---------- grafo da rede (nós curados + linhas via connectors) ---------- */
.netgraph { position: relative; height: 100%; }
.nnode { position: absolute; transform: translate(-50%, -50%); text-align: center; z-index: 2; width: max-content;
  animation: nodefloat 8s ease-in-out infinite alternate; will-change: transform; }
/* flutuação leve dos nós (deriva por nó via --dx/--dy); os elos acompanham */
@keyframes nodefloat {
  from { transform: translate(-50%, -50%); }
  to   { transform: translate(calc(-50% + var(--dx, 6px)), calc(-50% + var(--dy, -6px))); }
}
.nnode .medallion { width: 104px; height: 104px; margin: 0 auto; }
.nnode .nm { display: block; margin-top: 0.5rem; font-family: var(--serif-display); font-size: 1.55rem; color: var(--parch); white-space: nowrap; }
/* halo azul-escuro (cor do fundo) p/ o rótulo não ser comido pelas linhas */
.nnode .nm, .nnode .role2 { text-shadow: 0 0 7px var(--ink), 0 0 7px var(--ink), 0 0 14px var(--ink), 0 0 14px var(--ink); }
/* nós-ideia (só texto, sem medalhão) sempre à frente das linhas */
.nnode.idea { z-index: 4; }
.nnode .role2 { display: block; font-size: 1.05rem; color: var(--parch-faint); font-variant: small-caps; letter-spacing: 0.12em; }
.nnode.cool .nm { color: var(--philo); }
.nnode.warm .nm { color: var(--gold-bright); }
.nnode.focal .medallion { width: 168px; height: 168px; }
.nnode.focal .nm { font-size: 2.4rem; color: var(--gold-bright); }
.nnode.idea .nm { font-style: italic; color: var(--parch-dim); }

/* ---------- reforma: subtração / destilação (fade-out por seta) ---------- */
.reforma { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem; padding: 0 6%; }
.reforma .cloud { display: flex; flex-wrap: wrap; gap: 1.3rem 2.6rem; max-width: 1150px; justify-content: center; }
.reforma .item { font-family: var(--serif-display); font-size: 2.1rem; color: var(--parch-dim); }
.reforma .rule2 { width: 36%; height: 1px; background: var(--line); border: 0; margin: 0; }
.reforma .keepwrap { display: flex; flex-wrap: wrap; gap: 1.4rem 2.8rem; justify-content: center; }
.reforma .keep { font-family: var(--serif-display); font-size: 2.7rem; color: var(--gold-bright); text-shadow: 0 0 18px rgba(201,162,75,0.35); }
/* fade-out do reveal: item começa visível e some/cai quando a seta passa por ele */
.reveal .reforma .item.fade-out { opacity: 1; transition: opacity .8s ease, transform .8s cubic-bezier(.6,.04,.98,.34); }
.reveal .reforma .item.fade-out.visible { opacity: 0; transform: translateY(70px) rotate(6deg); }

/* ---------- nest: Humanität contém os dois ---------- */
.nest { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.nest .outer { width: 600px; height: 600px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.nest .outer .ol { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); font-family: var(--serif-display); font-style: italic; font-size: 3.2rem; color: var(--parch); white-space: nowrap; text-align: center; }
.nest .outer .ol .yr { display: block; font-style: normal; font-size: 1.3rem; letter-spacing: 0.14em; color: var(--parch-faint); margin-top: 0.25rem; }
.nest .inner { position: absolute; top: 57%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 1.4rem; }
.nest .ic { width: 236px; height: 236px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.08; font-family: var(--serif-display); font-style: italic; font-size: 1.95rem; }
.nest .ic .yr { font-style: normal; font-size: 1.25rem; letter-spacing: 0.08em; opacity: 0.85; margin-top: 0.3rem; }
.nest .ic .d { font-style: italic; font-size: 1.2rem; color: var(--parch-dim); margin-top: 0.15rem; }
.nest .ic.warm { border: 1px solid var(--gold); color: var(--gold-bright); background: radial-gradient(closest-side, rgba(201,162,75,0.07), transparent); }
.nest .ic.cool { border: 1px solid var(--philo); color: var(--philo); background: radial-gradient(closest-side, rgba(136,171,219,0.07), transparent); margin-left: -52px; }

/* ---------- modo debug (?debug): contornos para ver o DOM ---------- */
.debug .reveal .slides section * { outline: 1px solid rgba(231,200,120,0.22); }
.debug .reveal .slides section { outline: 2px solid rgba(255,80,80,0.5); }
.debug .flipworld, .debug .targets, .debug .compose, .debug .duo,
.debug .dico, .debug .orbit3d, .debug .penline, .debug .vledger,
.debug .hero-quote, .debug .drift, .debug .act-open { outline: 2px solid rgba(136,171,219,0.7) !important; }
.debug .targets .col, .debug .dico-row, .debug .compose .txt,
.debug .compose .fig-wrap, .debug .vledger .grid { outline: 1.5px dashed rgba(120,255,160,0.6) !important; }
.debug .seg, .debug .ghost-term, .debug .gnum, .debug .term-title { outline: 1.5px solid rgba(255,120,200,0.8) !important; }
/* centro horizontal e vertical do palco, p/ checar alinhamento */
.debug .reveal .slides section::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.25); z-index: 9999; pointer-events: none;
}

/* auto-animate: suaviza o morph de texto */
.reveal [data-auto-animate] .word-xl,
.reveal [data-auto-animate] .word-lg { transition-timing-function: cubic-bezier(.4,0,.1,1); }