/* ============================================================
   A VIDA INTEIRA — folha de estilo
   Tudo que muda com a idade vem de variáveis CSS que o app.js
   reescreve a cada quadro: --bg, --ink, --accent, --accent2,
   --band, --paper e os eixos da fonte variável (--wght/--opsz/...).
   ============================================================ */

:root{
  /* valores de partida (idade 0) — sobrescritos em runtime */
  --bg:      #0b0e22;
  --ink:     #ece7ff;
  --accent:  #ff9678;
  --accent2: #8278ff;
  --band:    #282c50;
  --paper:   rgba(255,255,255,.05);
  --line:    rgba(255,255,255,.14);

  /* eixos da fonte variável, dirigidos pela idade */
  --wght: 300;
  --opsz: 40;
  --soft: 70;
  --wonk: 0;

  --ease: cubic-bezier(.22,.61,.36,1);
  --edge: clamp(18px, 4.5vw, 64px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:auto; }              /* a rolagem é escrava do driver */
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background .18s linear, color .18s linear;
}

.skip{
  position:fixed; left:-999px; top:8px; z-index:50;
  background:var(--ink); color:var(--bg); padding:.6em 1em; border-radius:8px;
}
.skip:focus{ left:8px; }

/* -------- Palco fixo: uma única "tela" que se transforma -------- */
.stage{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns: 1fr;
  place-items:center;
  padding: var(--edge);
  overflow:hidden;
  isolation:isolate;
}

.aura{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.vignette{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 40%, color-mix(in srgb, var(--bg) 78%, black) 100%);
  mix-blend-mode:normal;
  transition: background .2s linear;
}
/* grão de filme original (feTurbulence) — textura premium, custo ~zero */
.grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

/* -------- Cabeçalho da marca -------- */
.brand{
  position:absolute; top:var(--edge); left:var(--edge);
  display:flex; align-items:center; gap:.6em;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  z-index:5;
}
.brand__dot{
  width:.6em; height:.6em; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
  animation: beat var(--beat, 1s) var(--ease) infinite;
}
.brand__name{ font-weight:500; letter-spacing:.18em; color:color-mix(in srgb,var(--ink) 85%,transparent); }
.brand__sep{ opacity:.5; }
.brand__hint{ font-size:.72rem; letter-spacing:.08em; opacity:.7; text-transform:none; }
@media (max-width:720px){ .brand__hint,.brand__sep{ display:none; } }

@keyframes beat{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.5); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.28); }
  60%{ transform:scale(1); }
}

/* -------- Núcleo: idade + capítulo + legendas -------- */
.core{
  position:relative; z-index:4;
  text-align:center; max-width:min(56ch, 88vw);
  display:flex; flex-direction:column; align-items:center; gap:.35em;
}
.core__chapter{
  margin:0; font-family:"Fraunces", serif;
  font-variation-settings:"opsz" 20,"wght" 450,"SOFT" var(--soft),"WONK" var(--wonk);
  font-size:clamp(.85rem, 2.1vw, 1.05rem);
  letter-spacing:.34em; text-transform:uppercase;
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  transition: color .2s linear;
}
.core__age{ display:flex; align-items:baseline; gap:.2em; line-height:.86; }
.core__num{
  font-family:"Fraunces", serif;
  font-variation-settings:"opsz" var(--opsz),"wght" var(--wght),"SOFT" var(--soft),"WONK" var(--wonk);
  font-size:clamp(6rem, 26vw, 20rem);
  letter-spacing:-.02em;
  color:var(--ink);
  cursor:ew-resize; user-select:none; outline:none;
  text-shadow: var(--weather, none);
  transition: text-shadow .25s var(--ease);
}
.core__num:focus-visible{ text-decoration:underline dotted color-mix(in srgb,var(--accent) 70%,transparent); text-underline-offset:.12em; }
.core__unit{
  font-family:"Fraunces", serif;
  font-variation-settings:"opsz" 24,"wght" 380,"SOFT" 60;
  font-size:clamp(1.1rem, 3.5vw, 2.4rem);
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.core__line{
  margin:.2em 0 0; max-width:34ch;
  font-family:"Fraunces", serif; font-style:italic;
  font-variation-settings:"opsz" 30,"wght" 360,"SOFT" var(--soft);
  font-size:clamp(1.05rem, 2.6vw, 1.5rem);
  line-height:1.35; color:color-mix(in srgb,var(--ink) 90%,transparent);
  transition: opacity .2s linear;
}
.core__clin{
  margin:.9em 0 0; max-width:44ch;
  font-size:clamp(.78rem,1.7vw,.92rem); line-height:1.55;
  letter-spacing:.01em; color:color-mix(in srgb,var(--ink) 58%,transparent);
}

/* -------- Painéis de biomarcadores -------- */
.panel{
  position:absolute; z-index:4; display:flex; flex-direction:column; gap:14px;
  width:min(24vw, 230px);
}
.panel--left{ left:var(--edge); top:50%; transform:translateY(-50%); }
.panel--right{ right:var(--edge); top:50%; transform:translateY(-50%); }

.bio{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:14px; padding:12px 13px 10px;
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  transition: background .2s linear, border-color .2s linear;
}
.bio__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.bio__name{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 66%,transparent); }
.bio__val{
  font-family:"Fraunces",serif; font-variation-settings:"opsz" 30,"wght" 520,"SOFT" 30;
  font-size:1.5rem; line-height:1; color:var(--ink);
  font-variant-numeric: tabular-nums;
}
.bio__unit{ font-size:.66rem; opacity:.6; margin-left:.25em; letter-spacing:.02em; }
.bio__spark{ display:block; width:100%; height:44px; margin-top:8px; overflow:visible; }
.bio__foot{ display:flex; justify-content:space-between; margin-top:5px; font-size:.64rem; letter-spacing:.04em; color:color-mix(in srgb,var(--ink) 46%,transparent); }
.bio__delta{ color: var(--accent); opacity:0; transition:opacity .3s; }
.bio.is-intervened .bio__delta{ opacity:1; }

/* telas médias/pequenas: 4 biomarcadores em grade 2×2 na base */
@media (max-width: 820px){
  html,body{ overflow-x:hidden; }
  .stage{ padding: var(--edge) 12px; }
  .core{ position:absolute; top:8%; left:50%; transform:translateX(-50%); width:min(92vw,460px); }
  .core__num{ font-size:clamp(4.5rem, 32vw, 9rem); }
  .core__unit{ font-size:1.2rem; }
  .core__line{ font-size:1.02rem; max-width:26ch; }
  .core__clin{ display:none; }

  .panel{ position:absolute; top:auto; transform:none; flex-direction:column; gap:8px;
          bottom:172px; width:calc(50vw - var(--edge) - 12px); }
  .panel--left{ left:var(--edge); right:auto; }
  .panel--right{ right:var(--edge); left:auto; display:flex; }
  .bio{ padding:7px 9px 6px; border-radius:11px; }
  .bio__head{ flex-direction:column; align-items:flex-start; gap:1px; }
  .bio__name{ font-size:.52rem; letter-spacing:.02em; white-space:nowrap; }
  .bio__val{ font-size:1.15rem; }
  .bio__spark{ height:22px; margin-top:5px; }
  .bio__foot{ font-size:.54rem; }

  .ruler{ width:92vw; bottom:100px; }                 /* mantém left:50% + translateX da base */
  .controls{ bottom:44px; left:0; right:0; transform:none; width:100%;
             justify-content:center; flex-wrap:nowrap; gap:6px; padding:0 8px; }
  #btnHere{ display:none; }              /* redundante no mobile: o campo consulta já fixa */
  .ruler__proj{ font-size:.62rem; margin-top:7px; line-height:1.3; }
  .ctl{ font-size:.66rem; padding:.48em .72em; }
  .consulta{ font-size:.66rem; padding:.36em .66em; gap:.35em; }
  .consulta input{ width:2em; }
  .disclaimer{ font-size:.52rem; max-width:96vw; bottom:4px; }
  .guide-link__l{ display:none; }
  .guide-link__s{ display:inline; }
  .guide-link{ font-size:.66rem; border:none; }
}

/* -------- Régua da vida (barra de rolagem re-significada) -------- */
.ruler{
  position:absolute; left:50%; bottom:calc(var(--edge) + 40px); transform:translateX(-50%);
  width:min(760px, 86vw); z-index:4; user-select:none;
}
.ruler__track{
  position:relative; height:34px; border-radius:9px;
  background: color-mix(in srgb, var(--band) 70%, transparent);
  border:1px solid var(--line);
  overflow:hidden; cursor:pointer;
}
.ruler__band{ position:absolute; top:0; bottom:0; }
.ruler__band--health{
  left:0; width:0%;
  background: linear-gradient(90deg,
     color-mix(in srgb,var(--accent2) 55%, transparent),
     color-mix(in srgb,var(--accent) 55%, transparent));
  transition: width .5s var(--ease);
}
.ruler__decades{ position:absolute; inset:0; }
.ruler__decades i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.ruler__events{ position:absolute; inset:0; }
.ruler__events b{
  position:absolute; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--ink); opacity:.5;
}
.ruler__now{
  position:absolute; top:-6px; bottom:-6px; width:2px; margin-left:-1px;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}
.ruler__now::after{
  content:""; position:absolute; top:-5px; left:50%; width:11px; height:11px;
  transform:translateX(-50%) rotate(45deg); background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.ruler__labels{
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:.66rem; letter-spacing:.14em; color:color-mix(in srgb,var(--ink) 45%,transparent);
  font-variant-numeric: tabular-nums;
}
.ruler__proj{
  margin:9px 0 0; text-align:center;
  font-size:.74rem; letter-spacing:.02em;
  color:color-mix(in srgb,var(--ink) 60%,transparent);
}
.ruler__proj b{ font-family:"Fraunces",serif; font-variation-settings:"opsz" 24,"wght" 560,"SOFT" 20;
  font-size:.98rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.ruler__proj .up{ color:var(--accent); font-weight:500; }
.here-flag{
  position:absolute; top:-26px; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--bg); background:var(--accent); padding:2px 7px; border-radius:6px;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 50%,transparent);
}

/* -------- Controles -------- */
.controls{
  position:absolute; left:50%; bottom:var(--edge); transform:translateX(-50%);
  display:flex; gap:10px; z-index:5;
}
.ctl{
  font:inherit; font-size:.8rem; letter-spacing:.04em;
  color:var(--ink); background:var(--paper); border:1px solid var(--line);
  padding:.62em 1.05em; border-radius:999px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:.55em;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.ctl:hover{ transform:translateY(-1px); }
.ctl__key{ width:.7em; height:.7em; border-radius:3px; border:1px solid var(--line); background:transparent; transition:background .18s; }
.ctl[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent);
  color: color-mix(in srgb, var(--bg) 92%, black);
}
.ctl[aria-pressed="true"] .ctl__key{ background:color-mix(in srgb,var(--bg) 90%,black); border-color:transparent; }
.ctl--ghost{ font-size:.72rem; opacity:.85; }

/* modo consulta — âncora na idade do paciente */
.consulta{
  display:flex; align-items:center; gap:.5em; font:inherit; font-size:.8rem;
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.42em .9em;
  color:var(--ink); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.consulta__tag{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 52%,transparent); }
.consulta input{
  width:2.4em; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font:inherit; font-weight:500; text-align:center; outline:none;
  font-variant-numeric:tabular-nums; padding:0 0 1px;
}
.consulta input:focus{ border-color:var(--accent); }
.consulta input::-webkit-outer-spin-button, .consulta input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.consulta input{ -moz-appearance:textfield; appearance:textfield; }
.consulta input::placeholder{ color:color-mix(in srgb,var(--ink) 40%,transparent); font-weight:400; }
.consulta__unit{ font-size:.7rem; color:color-mix(in srgb,var(--ink) 52%,transparent); }

.guide-link__s{ display:none; }

/* -------- Rodapé -------- */
.disclaimer{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  margin:0; font-size:.62rem; letter-spacing:.05em; text-align:center;
  color:color-mix(in srgb,var(--ink) 40%,transparent); max-width:90vw;
}
.guide-link{
  position:absolute; top:var(--edge); right:var(--edge); z-index:5;
  font-size:.76rem; letter-spacing:.04em; text-decoration:none;
  color:color-mix(in srgb,var(--ink) 70%,transparent);
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .18s, border-color .18s;
}
.guide-link:hover{ color:var(--accent); border-color:var(--accent); }

/* -------- Foco visível global (acessibilidade) -------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.ctl:focus-visible, .guide-link:focus-visible{ outline-offset:4px; }

/* -------- Driver de rolagem invisível -------- */
.scroll-driver{ height:640vh; width:1px; pointer-events:none; }

/* -------- noscript -------- */
.noscript{ position:fixed; inset:0; display:grid; place-content:center; text-align:center; padding:2rem; gap:1rem; }
.noscript h1{ font-family:"Fraunces",serif; font-weight:600; }

/* -------- Movimento reduzido -------- */
@media (prefers-reduced-motion: reduce){
  .brand__dot{ animation:none; }
  .core__num, .core__line, .ruler__band--health{ transition:none; }
}
@media (max-width: 420px){
  .brand__hint,.brand__sep{ display:none; }
  .brand{ font-size:.62rem; }
  .core__num{ font-size:29vw; }
}