/* Hero D "Roteiro", aprovado em 10/10/2026. Variáveis do hero apontam para o sistema (--wf-*). */
.d-hero{
  --d-noite:var(--wf-noite);--d-noite-2:var(--wf-noite-2);--d-noite-3:var(--wf-noite-3);--d-noite-4:var(--wf-noite-4);
  --d-taupe:var(--wf-taupe);--d-luz:var(--wf-luz);--d-marfim:var(--wf-marfim);
  --d-marfim-80:var(--wf-marfim-80);--d-marfim-60:var(--wf-marfim-60);--d-marfim-35:var(--wf-marfim-35);--d-marfim-14:var(--wf-marfim-14);
  --d-tinta:var(--wf-tinta);
  --d-fonte-titulo:var(--wf-fonte-titulo);--d-fonte-mono:var(--wf-fonte-mono);
  --d-titulo:clamp(2rem,1rem + 2.3vw,3.3rem);--d-apoio:var(--wf-apoio);--d-mono:var(--wf-mono);--d-mono-xs:var(--wf-mono-xs);
  --d-margem:var(--wf-margem);--d-nav:var(--wf-nav);--d-coluna:var(--wf-coluna);--d-raio:var(--wf-raio);
  --d-lento:var(--wf-lento);--d-curva:var(--wf-curva);
}
/* ==========================================================================
   D · "Roteiro" — sistema de variáveis (vira o sistema do site se aprovado)
   ========================================================================== */


/* --------------------------------------------------------------------------
   O hero
   -------------------------------------------------------------------------- */
.d-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* Gradiente: malha noturna. Três manchas que respiram + a luz taupe que entra pela direita */
.d-malha{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 50% 110% in oklch, var(--d-noite-3) 0%, transparent 70%),
    linear-gradient(in oklch, var(--d-noite-2), var(--d-noite) 55%, var(--d-noite-3));
}
.d-mancha{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
  pointer-events:none;
}
.d-mancha--a{ /* azul mais claro, canto superior esquerdo */
  left:-10%; top:-18%; width:62vw; height:62vw; max-width:900px; max-height:900px;
  background:radial-gradient(closest-side in oklch, var(--d-noite-4) 0%, transparent 100%);
  opacity:.85;
  animation:d-respira-a 34s ease-in-out infinite alternate;
}
.d-mancha--b{ /* noite profunda, pé da tela */
  left:28%; bottom:-30%; width:70vw; height:48vw; max-width:1000px; max-height:700px;
  background:radial-gradient(closest-side in oklch, var(--d-noite-3) 0%, transparent 100%);
  animation:d-respira-b 40s ease-in-out infinite alternate;
}
.d-mancha--c{ /* a luz do consultório entrando na noite: taupe quente junto do retrato */
  right:-8%; bottom:-14%; width:58vw; height:62vh; max-width:760px;
  background:radial-gradient(closest-side in oklch, color-mix(in oklch, var(--d-taupe) 78%, var(--d-noite)) 0%, color-mix(in oklch, var(--d-taupe) 40%, var(--d-noite)) 40%, transparent 100%);
  opacity:.9;
  animation:d-respira-c 26s ease-in-out infinite alternate;
}
.d-mancha--d{ /* fio de luz âmbar bem diluído, canto superior direito (como no retrato) */
  right:-6%; top:-12%; width:34vw; height:34vw; max-width:460px; max-height:460px;
  background:radial-gradient(closest-side in oklch, color-mix(in oklch, var(--d-luz) 26%, var(--d-noite)) 0%, transparent 100%);
  opacity:.7;
  animation:d-respira-a 30s ease-in-out infinite alternate-reverse;
}
@keyframes d-respira-a{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(4vw,3vh,0) scale(1.12)}}
@keyframes d-respira-b{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-5vw,-2vh,0) scale(1.08)}}
@keyframes d-respira-c{from{transform:translate3d(0,0,0) scale(1); opacity:.82} to{transform:translate3d(-3vw,-4vh,0) scale(1.1); opacity:1}}


/* --------------------------------------------------------------------------
   Cena (Three.js) e rótulos
   -------------------------------------------------------------------------- */
.d-cena{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
.d-cena canvas{display:block; width:100%; height:100%}
.d-rotulos{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  font-family:var(--d-fonte-mono);
  font-size:var(--d-mono);
  letter-spacing:.02em;
  color:var(--d-marfim);
}
.d-rotulo{
  position:absolute; left:0; top:0;
  white-space:nowrap;
  line-height:1.3;
  opacity:0;
  transform:translate(-9999px,-9999px);
  transition:opacity .9s var(--d-curva);
  text-shadow:0 1px 14px rgba(15,21,50,.9);
}
.d-rotulo.d-aceso{opacity:1}
.d-rotulo .d-no{
  color:var(--d-marfim-60);
  font-size:var(--d-mono-xs);
  margin-right:.45em;
}
.d-rotulo.d-rotulo--final{color:var(--d-marfim)}
.d-rotulo.d-rotulo--final .d-no{color:color-mix(in oklch, var(--d-luz) 85%, var(--d-marfim))}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */
.d-nav{
  position:absolute; left:0; right:0; top:0; z-index:4;
  height:var(--d-nav);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 var(--d-margem);
  font-family:var(--d-fonte-mono);
  font-size:var(--d-mono);
  letter-spacing:.02em;
  opacity:0;
  animation:d-surge var(--d-lento) var(--d-curva) .5s forwards;
}
.d-nav__nome{
  text-decoration:none; font-weight:500; color:var(--d-marfim);
}
.d-nav__links{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0}
.d-nav__links a{text-decoration:none; color:var(--d-marfim-60); transition:color .3s}
.d-nav__links a:hover{color:var(--d-marfim)}
.d-nav__zap{
  text-decoration:none; color:var(--d-marfim);
  border:1px solid var(--d-marfim-35);
  border-radius:var(--d-raio);
  padding:.5rem .9rem;
  transition:border-color .3s, background-color .3s;
}
.d-nav__zap:hover{border-color:var(--d-marfim); background:var(--d-marfim-14)}

/* --------------------------------------------------------------------------
   Texto
   -------------------------------------------------------------------------- */
.d-texto{
  position:relative; z-index:3;
  width:var(--d-coluna);
  max-width:100%;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--d-nav) + 1.5rem) 2rem 3rem var(--d-margem);
}
.d-titulo{
  margin:0 0 1.4rem;
  font-family:var(--d-fonte-titulo);
  font-weight:600;
  font-size:var(--d-titulo);
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
  color:var(--d-marfim);
}
.d-titulo .d-pal{
  display:inline-block;
  opacity:0;
  transform:translateY(.35em);
  animation:d-chega .85s var(--d-curva) forwards;
}
.d-titulo .d-pal--leve{color:var(--d-marfim-80); font-weight:500}
@keyframes d-chega{to{opacity:1; transform:translateY(0)}}
@keyframes d-surge{to{opacity:1}}

.d-apoio{
  margin:0 0 1.9rem;
  max-width:46ch;
  font-family:var(--d-fonte-mono);
  font-size:var(--d-apoio);
  line-height:1.6;
  color:var(--d-marfim-80);
  opacity:0;
  animation:d-surge var(--d-lento) var(--d-curva) 1.5s forwards;
}
.d-apoio b{font-weight:500; color:var(--d-marfim)}

.d-acoes{
  display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.4rem;
  margin:0 0 2.2rem;
  opacity:0;
  animation:d-surge var(--d-lento) var(--d-curva) 1.85s forwards;
}
.d-botao{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px;
  padding:.8rem 1.35rem;
  border-radius:var(--d-raio);
  background:var(--d-marfim);
  color:var(--d-tinta);
  font-family:var(--d-fonte-titulo);
  font-weight:600; font-size:.95rem; letter-spacing:-.005em;
  text-decoration:none;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8);
  transition:transform .35s var(--d-curva), background-color .3s;
}
.d-botao:hover{transform:translateY(-1px); background:#fff}
.d-botao svg{width:18px; height:18px; flex:none}
.d-link{
  font-family:var(--d-fonte-mono); font-size:var(--d-mono);
  color:var(--d-marfim-80);
  text-decoration:none;
  border-bottom:1px solid var(--d-marfim-35);
  padding-bottom:.15em;
  transition:color .3s, border-color .3s;
}
.d-link:hover{color:var(--d-marfim); border-color:var(--d-marfim)}

.d-prova{
  margin:0 0 1.6rem;
  padding-left:1rem;
  border-left:1px solid var(--d-marfim-35);
  opacity:0;
  animation:d-surge var(--d-lento) var(--d-curva) 2.2s forwards;
}
.d-prova__frase{
  margin:0 0 .3rem;
  font-family:var(--d-fonte-titulo);
  font-style:italic;
  font-size:clamp(1rem, .9rem + .35vw, 1.2rem);
  line-height:1.35;
  color:var(--d-marfim);
  max-width:34ch;
}
.d-prova__quem{
  margin:0;
  font-family:var(--d-fonte-mono); font-size:var(--d-mono-xs);
  color:var(--d-marfim-60);
  letter-spacing:.03em;
}
.d-prova__notas{
  margin:.75rem 0 0;
  font-family:var(--d-fonte-mono); font-size:var(--d-mono);
  color:var(--d-marfim-80);
}
.d-prova__notas .d-sep{color:var(--d-marfim-35); margin:0 .4em}

.d-registro{
  margin:0;
  font-family:var(--d-fonte-mono); font-size:var(--d-mono);
  letter-spacing:.03em;
  color:var(--d-marfim-60);
  opacity:0;
  animation:d-surge var(--d-lento) var(--d-curva) 2.5s forwards;
}
.d-registro b{font-weight:500; color:var(--d-marfim)}
.d-registro .d-sep{color:var(--d-marfim-35); margin:0 .4em}

/* --------------------------------------------------------------------------
   Retrato: ancorado no pé da tela; a constelação passa atrás e ao lado
   -------------------------------------------------------------------------- */
.d-retrato{
  position:absolute; z-index:3;
  bottom:0;
  left:calc(var(--d-coluna) + (100% - var(--d-coluna)) / 2);
  transform:translateX(-50%);
  height:min(66svh, 720px);
  aspect-ratio:1/1;
  pointer-events:none;
  opacity:0;
  animation:d-surge 1.8s var(--d-curva) .9s forwards;
}
.d-retrato::before{ /* a luz da cena no retrato: halo taupe-âmbar atrás dele */
  content:"";
  position:absolute; left:50%; bottom:-10%;
  width:120%; height:95%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side in oklch, color-mix(in oklch, var(--d-luz) 28%, transparent) 0%, color-mix(in oklch, var(--d-taupe) 40%, transparent) 35%, transparent 100%);
  filter:blur(18px);
  z-index:-1;
}
.d-retrato img{
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 30px 40px rgba(8,12,32,.55));
}

/* Telas médias (900–1199 px): coluna mais estreita e retrato menor, para a
   constelação ter espaço à direita dele */
@media (max-width: 1199px) and (min-width: 900px){
  .d-hero{--d-coluna: clamp(470px, 44vw, 640px)}
  .d-retrato{height:min(58svh, 40vw, 720px)}
}

/* --------------------------------------------------------------------------
   Celular e telas estreitas (< 900 px): tudo em fluxo, constelação na faixa
   de cima atrás do título, retrato embaixo, nada sobre o rosto
   -------------------------------------------------------------------------- */
@media (max-width: 899px){
  .d-hero{
    --d-nav: 3.75rem;
    --d-coluna: 100%;
    --d-titulo: clamp(1.85rem, 1.1rem + 3.6vw, 2.6rem);
    --d-mono: .72rem;
  }
  .d-nav{padding:0 var(--d-margem)}
  .d-nav__links{display:none}
  .d-hero{display:flex; flex-direction:column}
  .d-texto{
    width:100%; min-height:0;
    justify-content:flex-start;
    padding:calc(var(--d-nav) + 10.5rem) var(--d-margem) 1.1rem;
  }
  .d-titulo{margin-bottom:.9rem}
  .d-apoio{margin-bottom:1.2rem}
  .d-acoes{margin-bottom:1.1rem; gap:.7rem 1.1rem}
  .d-botao{width:100%; justify-content:center}
  .d-prova{margin-bottom:.9rem}
  .d-prova__frase{font-size:1rem}
  .d-prova__notas{margin-top:.5rem}
  .d-registro b{display:block}
  .d-registro b + .d-sep{display:none}
  .d-retrato{
    position:relative; left:auto; bottom:auto; transform:none;
    margin:.2rem auto 0;
    height:auto; width:min(78%, 320px);
    aspect-ratio:1/1;
    align-self:center;
  }
  .d-mancha--c{right:-30%; bottom:-6%; width:120vw; height:46vh}
  .d-mancha--a{width:110vw; height:110vw}
}
@media (max-width: 380px){
  .d-hero{--d-titulo: 1.8rem}
}