/* ============================================================
   Clube dos 15 — Câmara das Brasas · sistema de PÁGINAS
   Fonte da verdade compartilhada pelo portal e pelas páginas
   de mestre (index.html, mestre-*.html). Pareia com js/portal.js.

   Para temperar uma página numa chama, defina no :root da página:
     :root{ --accent:#4D8DFF; --c:#4D8DFF; }   (ember / blue / gold / …)
   ============================================================ */

@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #FF6A2C;
}

:root{
  --bg:#0C0A08;
  --bg-2:#100D0A;
  --panel:#15110D;
  --bone:#EDE6DB;
  --ash:#9A8F86;
  --ash-dim:#877D72;          /* >= AA (4.5:1) em texto pequeno sobre --bg */
  --line:rgba(237,230,219,0.09);
  --line-2:rgba(237,230,219,0.16);
  --ember:#FF6A2C;
  --blue:#4D8DFF;
  --gold:#E8C547;
  --accent:#FF6A2C;
  --c:#FF6A2C;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--bone);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent);color:#0C0A08}
a{color:inherit;text-decoration:none}

/* Lenis (scroll suave) — alvo na classe `lenis` (a que a lib realmente
   adiciona). CRÍTICO: desliga o scroll-behavior:smooth do CSS, senão ele
   briga com o Lenis e o scroll fica "segurando"/laggy. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
html.lenis [data-lenis-prevent]{overscroll-behavior:contain}
html.lenis.lenis-stopped{overflow:hidden}
html.lenis iframe{pointer-events:none}

/* ── ambient layers ───────────────────────────────────────── */
#embers{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow{
  position:fixed;left:50%;top:38%;z-index:0;pointer-events:none;
  width:120vw;height:120vw;max-width:1400px;max-height:1400px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgb(from var(--accent) r g b / 0.10) 0%, rgb(from var(--accent) r g b / 0.03) 32%, transparent 62%);
  transition:background .9s ease;
}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);}

.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 7vw}
@media(min-width:900px){.wrap{padding:0 64px}}

/* ── eyebrow ──────────────────────────────────────────────── */
.ey{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash);display:inline-flex;align-items:center;gap:.85em}
.ey::before{content:"";width:34px;height:1px;background:var(--accent);transition:background .9s ease;opacity:.85}
em{font-style:italic;font-weight:400}

/* ── header ───────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:22px 7vw;transition:padding .4s ease,background .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
@media(min-width:900px){header{padding:22px 64px}}
header.scrolled{padding:14px 7vw;background:rgba(12,10,8,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
@media(min-width:900px){header.scrolled{padding:14px 64px}}
.mark{font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;letter-spacing:.01em}
.mark b{color:var(--accent);font-weight:600;transition:color .9s ease}
.head-r{display:flex;align-items:center;gap:22px}
.head-meta{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;color:var(--ash-dim);text-transform:uppercase}
@media(max-width:620px){.head-meta{display:none}}
.backlink{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);display:inline-flex;align-items:center;gap:9px;transition:color .35s ease}
.backlink .arr{transition:transform .35s ease}
.backlink:hover{color:var(--accent)}
.backlink:hover .arr{transform:translateX(-4px)}
.btn{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;
  transition:border-color .35s ease,color .35s ease,background .35s ease;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:90px;padding-bottom:60px}
.hero.short{min-height:92svh}
.hero h1{font-family:'Fraunces',serif;font-weight:430;font-size:clamp(2.7rem,8.8vw,7rem);line-height:0.97;
  letter-spacing:-0.02em;margin:26px 0 0;max-width:14ch}
.hero .sub{margin-top:30px;max-width:48ch;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ash);font-weight:300;line-height:1.6}
.hero .idx{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.2em;color:var(--ash-dim);margin-top:16px}
.hero .quote{margin-top:30px;max-width:30ch;font-family:'Fraunces',serif;font-weight:380;
  font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.18;color:var(--bone)}
.hero .quote em{color:var(--accent);transition:color .9s ease}
.scrollcue{margin-top:54px;display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}
.scrollcue .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite;transition:background .9s ease}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ── hero · entrada por máscara (palavra a palavra) ───────────
   Classes aplicadas pelo JS, que divide o título em linhas→palavras
   só quando há GSAP. O padding+margin compensados dão folga pros
   acentos/descidas sem mover o texto nem mudar o espaçamento. */
.hl-line{display:block;overflow:hidden;padding:0.15em 0;margin:-0.15em 0}
.hl-word{display:inline-block;white-space:nowrap;will-change:transform,opacity,filter}
.hl-seg{display:inline-block}

/* ── destaque "marca-texto" dirigido pelo scroll (estilo sui.io) ──
   O JS duplica a palavra em 2 camadas: a de cima é a marca em --accent
   com texto escuro, revelada da esquerda p/ direita via clip-path
   conforme o ScrollTrigger anima --hl de 0→1. A palavra "vira" ao ser
   coberta pelo marcador — igual ao initHighlight do sui.io. */
.hl-mark{position:relative;display:inline-block;--hl:0}
.hl-mark .hl-fill{position:absolute;left:0;top:0;z-index:1;white-space:nowrap;
  padding:0.04em 0.08em;margin:-0.04em -0.08em;border-radius:3px;
  background:var(--accent);color:var(--accent-ink,#14100B);pointer-events:none;
  clip-path:inset(0 calc((1 - var(--hl)) * 100%) 0 0);
  transition:background .9s ease}

/* ── sections ─────────────────────────────────────────────── */
section.block{padding:clamp(90px,14vh,170px) 0}
.seclabel{margin-bottom:46px}
.lead{font-family:'Fraunces',serif;font-weight:420;font-size:clamp(2rem,5.5vw,3.9rem);line-height:1.04;letter-spacing:-0.015em;max-width:18ch}
.lead.sm{font-size:clamp(1.8rem,4.6vw,3.2rem)}
.para{margin-top:28px;max-width:54ch;color:var(--ash);font-size:1.06rem;font-weight:300;line-height:1.65}
.para + .para{margin-top:18px}

/* ── axes / feature lines ─────────────────────────────────── */
.axes{margin-top:60px;border-top:1px solid var(--line)}
.axis{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:28px 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.axis{grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:baseline}}
.axis .k{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.axis .v{color:var(--ash);font-size:1.1rem;font-weight:300}
.axis .v b{color:var(--bone);font-weight:500}

/* ── masters (porta de mestre) ────────────────────────────── */
.m-intro{color:var(--ash);font-size:1.1rem;max-width:42ch;margin-bottom:34px;font-weight:300}
.masters{border-top:1px solid var(--line)}
.masters-list:hover .master:not(:hover),
.masters-list:focus-within .master:not(:focus-within){opacity:.34}
.master{--c:var(--ember);display:block;position:relative;border-bottom:1px solid var(--line);padding:36px 0;transition:opacity .45s ease}
.master:focus-visible{outline:2px solid var(--c);outline-offset:-4px;border-radius:4px}
.master .row{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;position:relative}
@media(min-width:820px){.master .row{grid-template-columns:34px 2.3fr 3fr auto;gap:34px}}
.m-idx{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--ash-dim);display:flex;align-items:center;gap:12px}
.m-flame{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 rgb(from var(--c) r g b / 0.5);transition:box-shadow .5s ease,transform .5s ease}
.m-name{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:480;line-height:1.05;letter-spacing:-0.01em;transition:color .4s ease}
.m-role{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-top:8px}
.m-line{color:var(--ash);font-size:1.02rem;font-weight:300;line-height:1.5;max-width:40ch}
.m-go{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-dim);display:inline-flex;align-items:center;gap:9px;transition:color .4s ease;white-space:nowrap}
.m-go .arr{transition:transform .4s ease}
.tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);border:1px solid rgb(from var(--c) r g b / 0.4);border-radius:100px;padding:3px 10px;margin-left:12px;vertical-align:middle}
.master:hover .m-name,.master:focus-within .m-name{color:var(--c)}
.master:hover .m-go,.master:focus-within .m-go{color:var(--c)}
.master:hover .m-go .arr,.master:focus-within .m-go .arr{transform:translateX(5px)}
.master:hover .m-flame,.master:focus-within .m-flame{box-shadow:0 0 14px 2px rgb(from var(--c) r g b / 0.65);transform:scale(1.25)}
.master::before{content:"";position:absolute;inset:0 -7vw;background:linear-gradient(90deg,rgb(from var(--c) r g b / 0.06),transparent 70%);
  opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:-1}
@media(min-width:900px){.master::before{inset:0 -64px}}
.master:hover::before,.master:focus-within::before{opacity:1}

/* ── trilha das brasas (timeline da seção Mestres, dirigida pelo scroll) ──
   Pavio pontilhado (frio) + preenchimento ember que cresce com o scroll
   (scaleY var(--p)) + brasa viajante (top var(--y) em px medidos). Cada
   mestre acende na SUA chama (--c) quando a brasa passa. fill/brasa leem
   --accent (recoloram junto com o accent-shift). Guardado por .trilha-armed
   (só com JS); sem JS/reduced-motion → pavio estático com chamas acesas. */
:root{--trilha-w:34px;--trilha-x:11px}
@media(max-width:560px){:root{--trilha-w:22px;--trilha-x:7px}}
.masters[data-trilha]{position:relative;padding-left:var(--trilha-w)}
.trilha{position:absolute;top:0;bottom:0;left:var(--trilha-x);width:2px;transform:translateX(-1px);pointer-events:none;z-index:0}
.trilha-track{position:absolute;inset:0;width:2px;background:var(--line-2);opacity:.7;
  -webkit-mask:repeating-linear-gradient(#000 0 3px,transparent 3px 10px);mask:repeating-linear-gradient(#000 0 3px,transparent 3px 10px)}
.trilha-fill{position:absolute;left:0;top:0;width:2px;height:100%;transform-origin:top center;transform:scaleY(var(--p,0));
  background:linear-gradient(180deg,rgb(from var(--accent) r g b / .9),rgb(from var(--accent) r g b / .4));
  -webkit-mask:repeating-linear-gradient(#000 0 3px,transparent 3px 10px);mask:repeating-linear-gradient(#000 0 3px,transparent 3px 10px);
  filter:drop-shadow(0 0 6px rgb(from var(--accent) r g b / .5));transition:background .9s ease,filter .9s ease}
.trilha-marker{position:absolute;left:0;top:var(--y,0);width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);opacity:0;will-change:top;
  background:radial-gradient(circle at 50% 38%,#FFF3E6 0%,rgb(from var(--accent) r g b) 55%,rgb(from var(--accent) r g b / .15) 100%);
  box-shadow:0 0 13px 3px rgb(from var(--accent) r g b / .85),0 0 30px 9px rgb(from var(--accent) r g b / .34);transition:background .9s ease}
@media(max-width:560px){.trilha-marker{width:12px;height:12px}}
.trilha[data-on] .trilha-marker{opacity:1}
.trilha-marker::after{content:"";position:absolute;left:50%;top:-13px;width:6px;height:18px;transform:translateX(-50%);
  border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(180deg,transparent,rgb(from var(--accent) r g b / .5));filter:blur(2px)}
.master.is-on .m-name{color:var(--c)}
.master.is-on .m-go{color:var(--c)}
.master.is-on .m-flame{box-shadow:0 0 16px 3px rgb(from var(--c) r g b / .7);transform:scale(1.3)}
.master.igniting .m-flame{animation:ember-spark .6s ease-out}
@keyframes ember-spark{0%{transform:scale(1)}55%{box-shadow:0 0 24px 7px rgb(from var(--c) r g b / .55);transform:scale(1.6)}100%{box-shadow:0 0 16px 3px rgb(from var(--c) r g b / .7);transform:scale(1.3)}}
[data-trilha].trilha-armed .master:not(.is-on){opacity:.6}
[data-trilha].trilha-armed .master:hover,[data-trilha].trilha-armed .master:focus-within{opacity:1}
[data-trilha]:not(.trilha-armed) .trilha-fill,[data-trilha]:not(.trilha-armed) .trilha-marker{display:none}
[data-trilha]:not(.trilha-armed) .master .m-flame{box-shadow:0 0 10px 1px rgb(from var(--c) r g b / .5);transform:scale(1.15)}
[data-trilha]:not(.trilha-armed) .master .m-name{color:var(--c)}

/* ── LUMEN (memórias) ─────────────────────────────────────── */
.reveal-grid{display:grid;grid-template-columns:1fr;gap:46px;align-items:center;margin-top:8px}
@media(min-width:900px){.reveal-grid{grid-template-columns:1.05fr 1fr;gap:70px}}
.photo{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;border:1px solid var(--line);background-color:var(--panel)}
/* placeholder enquanto não há retrato do mestre */
.photo--ph{display:flex;align-items:flex-end;justify-content:center;
  background:
    radial-gradient(120% 80% at 30% 20%, rgb(from var(--accent) r g b / 0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--panel))}
.ph-note{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:18px}
.point{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border:none;background:none;cursor:pointer;z-index:3}
.point::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgb(from var(--accent) r g b / 0.55);animation:beacon 2.6s ease-out infinite;transition:background .9s ease}
.point::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#FFF6EE;opacity:.95}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgb(from var(--accent) r g b / 0.5)}70%{box-shadow:0 0 0 16px rgb(from var(--accent) r g b / 0)}100%{box-shadow:0 0 0 0 rgb(from var(--accent) r g b / 0)}}
.point:focus-visible{outline:2px solid var(--bone);outline-offset:4px;border-radius:50%}
.cap{position:absolute;z-index:4;min-width:160px;max-width:230px;background:rgba(12,10,8,0.92);border:1px solid var(--line-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:13px 15px;border-radius:6px;
  opacity:0;transform:translateY(6px) scale(.97);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.cap.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.cap .ck{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:color .9s ease}
.cap .cv{margin-top:5px;font-size:.92rem;color:var(--bone);font-weight:300;line-height:1.4}
.reveal-note{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim);margin-top:30px}

/* ── CTA ──────────────────────────────────────────────────── */
.entrance{text-align:left}
.cta-big{font-family:'Fraunces',serif;font-weight:430;font-size:clamp(2.4rem,7vw,5.4rem);line-height:0.98;letter-spacing:-0.02em}
.cta-big em{color:var(--accent);transition:color .9s ease}
.cta-row{margin-top:42px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.cta-btn{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:#0C0A08;font-weight:500;padding:16px 28px;border-radius:100px;
  transition:transform .3s ease,box-shadow .3s ease,background .9s ease;box-shadow:0 0 30px rgb(from var(--accent) r g b / 0.25)}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgb(from var(--accent) r g b / 0.4)}
.cta-meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}

/* ── footer ───────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:46px 0 60px;position:relative;z-index:2}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.foot .fmark{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500}
.foot .fmeta{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.foot a.fl{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);transition:color .3s}
.foot a.fl:hover{color:var(--accent)}

/* ── reveal-on-scroll ─────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,.84,.44,1),transform 1s cubic-bezier(.16,.84,.44,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  [data-trilha] .trilha-fill,[data-trilha] .trilha-marker{display:none}
}