/* ============================================================
   /bio: a árvore de links da QP3 (e o 404, que usa o mesmo molde)

   Uma tela só, no celular e no computador: a logo no meio de um sistema
   de órbitas, a frase do site antigo e dois caminhos (WhatsApp e site).

   Tudo que se mexe sem parar é transform ou opacity, então quem trabalha
   é o compositor e não o processador:
     · as órbitas são anéis 3D de CSS girando; os astros passam ATRÁS e
       NA FRENTE da logo de verdade (preserve-3d), sem JavaScript;
     · o brilho que corre na borda do botão do WhatsApp é um quadrado com
       degradê cônico girando por baixo de uma máscara;
     · as estrelas são desenhadas uma vez (bio.js) e só piscam por opacidade.

   Classes que o <head> decide antes da primeira pintura:
     .cursor   mouse ou touchpad: anima sempre, e o "reduzir movimento"
               do Windows não vale aqui (ele liga sozinho no notebook)
     .sem-mov  celular com "reduzir movimento": sem giro e sem entrada
     .q-leve   aparelho modesto: sem grão, sem piscar, sem inclinação
   ============================================================ */
:root {
  --bg: #0b0b0e;
  --ink: #f2f0e9;
  --dim: #8f8d87;
  --gold: #d3aa5e;
  --gold-claro: #f3d9a4;
  --line: rgba(242, 240, 233, 0.14);
  --line-soft: rgba(242, 240, 233, 0.08);
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --raio: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #14100a; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% 18%, rgba(211, 170, 94, 0.07), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(64, 86, 140, 0.13), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 340;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---------- céu ---------- */
.ceu {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.ceu canvas {
  position: absolute;
  top: 0; left: 0;
  will-change: transform, opacity;
  /* em degraus: o compositor só refaz a tela quando o valor muda */
  animation: cintila 9.1s steps(14) -2.3s infinite alternate;
}
.ceu .c0 { animation-name: cintila-leve; animation-duration: 12.4s; animation-delay: -5.1s; }
.ceu .c2 { animation-duration: 6.7s; animation-delay: -1.1s; }
.ceu .c2b { animation-duration: 6.7s; animation-delay: -7.8s; }
@keyframes cintila {
  0% { opacity: 1; } 25% { opacity: 0.9; } 50% { opacity: 0.65; } 75% { opacity: 0.4; } 100% { opacity: 0.3; }
}
@keyframes cintila-leve {
  0% { opacity: 1; } 50% { opacity: 0.86; } 100% { opacity: 0.72; }
}
.q-leve .ceu canvas, .sem-mov .ceu canvas { animation: none; }

/* a camada do céu inteira se move junto com o mouse (bio.js escreve --cx/--cy).
   Sobra 4% em volta para a borda nunca aparecer; quem corta é o .ceu */
.ceu-mov {
  position: absolute;
  inset: -4%;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
}

.cadente {
  position: absolute;
  top: 0; left: 0;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  transform-origin: 100% 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.cadente::after {
  content: "";
  position: absolute;
  right: -1.3px; top: 50%;
  width: 2.6px; height: 2.6px;
  margin-top: -1.3px;
  border-radius: 50%;
  background: #fff;
}
.cadente.dourada { background: linear-gradient(to right, rgba(211, 170, 94, 0), rgba(211, 170, 94, 0.9)); }
.cadente.dourada::after { background: var(--gold); }

.grao {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.q-leve .grao { display: none; }

/* ---------- órbitas grandes do fundo (só aparecem com espaço) ---------- */
.orbitas-fundo {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1400px;
}
.orbitas-fundo span {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  border: 1px solid rgba(242, 240, 233, 0.06);
  transform: rotateX(72deg) rotateZ(var(--z, 0deg));
  animation: orbita-fundo var(--t) linear infinite;
}
.orbitas-fundo span::after {
  content: "";
  position: absolute;
  top: -2px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: rgba(211, 170, 94, 0.75);
  box-shadow: 0 0 10px rgba(211, 170, 94, 0.6);
}
.orbitas-fundo span:nth-child(1) { --d: 112vmax; --t: 90s; --z: 40deg; }
.orbitas-fundo span:nth-child(2) { --d: 150vmax; --t: 140s; --z: 200deg; animation-direction: reverse; }
.orbitas-fundo span:nth-child(2)::after { background: rgba(242, 240, 233, 0.7); box-shadow: 0 0 10px rgba(242, 240, 233, 0.5); }
@keyframes orbita-fundo {
  from { transform: rotateX(72deg) rotateZ(var(--z, 0deg)); }
  to { transform: rotateX(72deg) rotateZ(calc(var(--z, 0deg) + 360deg)); }
}
.sem-mov .orbitas-fundo span { animation: none; }

/* ---------- a coluna ---------- */
.bio {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.4s ease-in, filter 0.45s ease-in;
}

/* ---------- o sistema: logo + órbitas ---------- */
.sistema {
  --base: clamp(150px, 44vw, 200px);
  position: relative;
  /* da borda à borda da tela no celular (o body tem 16px de folga): girando,
     o lado de perto do anel maior às vezes passa da coluna, e sem o corte a
     página ganhava rolagem para o lado */
  width: calc(100% + 32px);
  margin-inline: -16px;
  overflow-x: clip;
  height: calc(var(--base) * 0.98);
  /* perspectiva longa: o lado de perto do anel maior não passa da largura da tela */
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.sistema-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.logo {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--base) * 0.92);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 26px rgba(211, 170, 94, 0.28));
}
/* halo atrás da logo, empurrado para o fundo do espaço 3D */
.halo {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--base) * 1.5);
  height: calc(var(--base) * 1.5);
  margin: calc(var(--base) * -0.75) 0 0 calc(var(--base) * -0.75);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(211, 170, 94, 0.2), rgba(211, 170, 94, 0.06) 55%, transparent);
  transform: translateZ(-60px);
  animation: respira 5.5s ease-in-out infinite alternate;
}
@keyframes respira { from { opacity: 0.65; } to { opacity: 1; } }

.anel {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  border: 1px solid rgba(211, 170, 94, var(--a, 0.34));
  transform-style: preserve-3d;
  transform: rotateY(var(--inc)) rotateX(76deg) rotateZ(0deg);
  animation: orbita var(--t) linear infinite;
}
.anel-1 { --d: calc(var(--base) * 1.18); --inc: -8deg; --t: 13s; }
.anel-2 { --d: calc(var(--base) * 1.52); --inc: 12deg; --t: 21s; --a: 0.22; animation-direction: reverse; }
.anel-3 { --d: calc(var(--base) * 1.8); --inc: -3deg; --t: 34s; --a: 0.13; }
@keyframes orbita {
  from { transform: rotateY(var(--inc)) rotateX(76deg) rotateZ(0deg); }
  to { transform: rotateY(var(--inc)) rotateX(76deg) rotateZ(360deg); }
}
/* o astro desfaz a rotação do anel para ficar sempre de frente para a tela */
.astro {
  position: absolute;
  top: calc(var(--s) / -2); left: 50%;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2);
  border-radius: 50%;
  --s: 7px;
  background: var(--ink);
  box-shadow: 0 0 12px rgba(242, 240, 233, 0.75);
  animation: contra var(--t) linear infinite;
  animation-direction: inherit;
}
.astro.ouro { --s: 9px; background: radial-gradient(circle at 35% 35%, #fff1cf, var(--gold) 60%, #8a6627); box-shadow: 0 0 16px rgba(211, 170, 94, 0.85); }
.astro.mini { --s: 5px; }
@keyframes contra {
  from { transform: rotateZ(0deg) rotateX(-76deg) rotateY(calc(var(--inc) * -1)); }
  to { transform: rotateZ(-360deg) rotateX(-76deg) rotateY(calc(var(--inc) * -1)); }
}
.sem-mov .anel, .sem-mov .astro, .sem-mov .halo { animation: none; }

/* ---------- textos ---------- */
.marca {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.titulo {
  margin-top: 14px;
  font-weight: 620;
  font-stretch: 112%;
  font-size: clamp(29px, 8.2vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.titulo .linha { display: block; overflow: hidden; padding-bottom: 0.06em; }
.titulo .palavra { display: inline-block; }
.titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); font-size: 1.08em; letter-spacing: 0; }
.sub {
  margin-top: 12px;
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--dim);
}

/* ---------- os links ---------- */
.elos {
  width: 100%;
  margin-top: clamp(26px, 4.4vh, 38px);
  display: grid;
  gap: 12px;
}
.elo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 14px 20px 14px 14px;
  border-radius: var(--raio);
  text-align: left;
  background: rgba(242, 240, 233, 0.035);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.35s, background-color 0.35s, box-shadow 0.45s var(--ease);
}
.q-leve .elo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 22, 27, 0.9); }
.elo:active { transform: scale(0.982); transition-duration: 0.12s; }

/* luz que segue o cursor dentro do botão */
.elo-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(211, 170, 94, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s;
}

.elo-ico {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform 0.5s var(--ease), background-color 0.35s, border-color 0.35s, color 0.35s;
}
.elo-ico svg { width: 22px; height: 22px; }
.elo-txt { display: grid; gap: 3px; min-width: 0; }
.elo-txt b {
  font-weight: 600;
  font-stretch: 108%;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.elo-txt span { font-size: 13px; color: var(--dim); line-height: 1.35; }

/* WhatsApp: o caminho principal. Dourado, com um brilho correndo na borda */
.elo-zap {
  border-color: rgba(211, 170, 94, 0.32);
  background: linear-gradient(180deg, rgba(211, 170, 94, 0.13), rgba(211, 170, 94, 0.04));
  box-shadow: 0 14px 40px -18px rgba(211, 170, 94, 0.45);
}
.elo-zap .elo-ico { background: var(--gold); border-color: var(--gold); color: #16110a; }
.elo-zap .elo-txt span { color: rgba(243, 217, 164, 0.72); }
.elo-borda {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.elo-borda::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 160%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(211, 170, 94, 0.15) 70%, var(--gold) 80%, #fff3d6 84%, var(--gold) 87%, transparent 94%);
  animation: gira 4.6s linear infinite;
}
@keyframes gira { to { rotate: 360deg; } }
.sem-mov .elo-borda::before, .q-leve .elo-borda::before { animation: none; opacity: 0; }

/* o site: o caminho secundário, de vidro */
.elo-site .elo-ico svg { width: 26px; height: 26px; overflow: visible; }
.elo-site .planeta-anel { transform-origin: 12px 12px; transition: transform 0.7s var(--ease); }

@media (hover: hover) {
  .elo:hover { transform: translateY(-2px); }
  .elo:hover .elo-luz { opacity: 1; }
  .elo-zap:hover { box-shadow: 0 20px 48px -18px rgba(211, 170, 94, 0.6); }
  .elo-zap:hover .elo-ico { transform: rotate(-12deg) scale(1.06); }
  .elo-site:hover { border-color: rgba(211, 170, 94, 0.5); background-color: rgba(242, 240, 233, 0.06); }
  .elo-site:hover .elo-ico { border-color: var(--gold); color: var(--gold); }
  .elo-site:hover .planeta-anel { transform: rotate(-24deg); }
}

.rodape {
  margin-top: clamp(26px, 5vh, 44px);
  font-size: 11.5px;
  color: rgba(143, 141, 135, 0.8);
  letter-spacing: 0.02em;
}

/* ---------- entrada (uma vez, só CSS: sem JS a página aparece igual) ---------- */
@keyframes surge {
  from { opacity: 0; transform: scale(0.84); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes sobe-mascara { from { transform: translateY(112%); } to { transform: none; } }
@keyframes sobe {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.sistema { animation: surge 1.25s var(--ease) 0.05s both; }
.marca { animation: aparece 0.9s ease-out 0.45s both; }
.titulo .palavra { animation: sobe-mascara 1.1s var(--ease) 0.35s both; }
.titulo .linha + .linha .palavra { animation-delay: 0.47s; }
.sub { animation: aparece 0.9s ease-out 0.7s both; }
/* backwards: terminada a entrada, o botão volta a obedecer o passar do mouse */
.elo { animation: sobe 0.95s var(--ease) backwards; }
.elo:nth-child(1) { animation-delay: 0.62s; }
.elo:nth-child(2) { animation-delay: 0.74s; }
.elo:nth-child(3) { animation-delay: 0.86s; }
.rodape { animation: aparece 1s ease-out 1.05s both; }
.ceu { animation: aparece 1.6s ease-out both; }

.sem-mov .sistema, .sem-mov .marca, .sem-mov .titulo .palavra, .sem-mov .sub,
.sem-mov .elo, .sem-mov .rodape, .sem-mov .ceu { animation: none; }

/* ---------- saída para o site: o céu acelera e a coluna vai junto ---------- */
.saindo .bio { transform: scale(0.94) translateY(-10px); opacity: 0; filter: blur(6px); }
.saindo .ceu-mov { transform: scale(1.5); transition: transform 0.5s cubic-bezier(0.55, 0, 0.8, 0.2); }
.saindo .orbitas-fundo { opacity: 0; transition: opacity 0.35s; }

/* ---------- tamanhos ---------- */
@media (max-height: 640px) {
  .sistema { --base: clamp(120px, 34vw, 160px); }
  .titulo { font-size: clamp(26px, 7.4vw, 34px); }
  .elos { margin-top: 20px; }
  .elo { min-height: 70px; }
  .rodape { margin-top: 20px; }
}
@media (max-width: 359px) {
  .elo { gap: 12px; padding-right: 14px; }
  .elo-ico { width: 44px; height: 44px; }
  .elo-txt b { font-size: 16px; }
}
@media (min-width: 900px) and (min-height: 760px) {
  .bio { max-width: 500px; }
  .sistema { --base: 240px; }
  .titulo { font-size: 44px; }
  .elos { gap: 14px; }
  .elo { min-height: 84px; padding: 16px 24px 16px 16px; }
  .elo-ico { width: 54px; height: 54px; }
}