/* ============================================================
   INTRO — abertura fullscreen do site do Anísio

   Reinterpretação da abertura da Clarus (lp-clarus.vercel.app) na
   identidade do Anísio: preto/marrom quase preto + dourado/âmbar, nunca
   o azul da referência. A composição, o ritmo e a física vieram de
   medição direta da referência (1440x900):

   - wordmark: font-size fixo de 112px, tracking 0.26em, centro vertical
     em ~47% (aqui, 45.5%, dentro do enquadramento pedido);
   - CTA: cápsula ~178x48, centro vertical em ~83% (aqui, 81.5%);
   - a referência renderiza o cometa em canvas, não em SVG — o rastro que
     apaga por trás é histórico de posições com alpha decrescente, e é o
     que reproduzimos em `.intro-canvas`.

   Convenções:
   - a folha é autossuficiente: redeclara os tokens em `.intro` pra não
     depender da ordem de carga do style.css;
   - o estado inicial de tudo que anima fica AQUI (opacity 0, blur), e o
     intro.js só avança valores — assim o primeiro paint já é o correto,
     sem flash;
   - `html.intro-active` é a única chave: sem JS a classe nunca entra, o
     overlay fica `display:none` e o site abre normal com o preloader.
   ============================================================ */

.intro {
  /* Tokens próprios — mesma paleta do site, redeclarada pra a intro
     funcionar mesmo se o style.css ainda não tiver aplicado. */
  --i-bg: #0D0906;
  --i-bg-2: #100B07;
  --i-gold: #D7A253;
  --i-gold-light: #E7BA70;
  --i-gold-lighter: #F2D19A;
  --i-gold-dark: #9D662E;
  --i-text: #F4EFE7;
  --i-text-2: #C8BEB2;

  /* Composição — medida na referência, ver cabeçalho */
  --i-mark-y: 45.5%;
  --i-cta-y: 81.5%;

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 100000;
  overflow: hidden;
  background: var(--i-bg);
  contain: layout paint;
  -webkit-font-smoothing: antialiased;
}

/* Sem JS a classe nunca é aplicada: o overlay simplesmente não existe
   visualmente e o site abre pelo caminho normal. */
.intro { display: none; }
html.intro-active .intro { display: block; }

html.intro-active { overflow: hidden; }
html.intro-active body { overflow: hidden; }

/* O preloader é o fallback de quem não tem JS. Com a intro rodando ele
   seria uma segunda tela de carregamento em cima da primeira. */
html.intro-active #preloader { display: none !important; }

/* O hero tem entrada própria (`word-in`, em style.css) que dispararia
   escondida embaixo do overlay. Pausada aqui, ela retoma do frame zero
   quando `intro-active` sai — no pico da luz, não antes. */
html.intro-active .hero-title .word { animation-play-state: paused; }

/* ---------- Camadas de fundo ---------- */
/* Seis camadas: base, glow do wordmark, glow do CTA, anéis difusos,
   vinheta e grain. Nenhuma delas pode virar um gradiente dourado
   evidente — as bordas da tela continuam quase pretas. */

.intro-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 02 — glow largo atrás do wordmark. Entra junto com as letras. */
.intro-bg-mark {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 58vw 40vh at 50% var(--i-mark-y), rgba(215, 162, 83, 0.10), transparent 68%),
    radial-gradient(ellipse 30vw 20vh at 50% var(--i-mark-y), rgba(242, 209, 154, 0.07), transparent 70%);
}

/* 03 — glow concentrado na região do CTA. Só acende quando o orbe chega. */
.intro-bg-cta {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 32vw 26vh at 50% var(--i-cta-y), rgba(215, 162, 83, 0.12), transparent 70%),
    radial-gradient(ellipse 16vw 13vh at 50% var(--i-cta-y), rgba(231, 186, 112, 0.10), transparent 72%);
}

/* 05 — anéis gigantes, quase invisíveis: dão profundidade sem virar
   decoração. Nenhum deles fecha dentro da viewport. */
.intro-bg-rings {
  position: absolute;
  left: 50%;
  top: var(--i-mark-y);
  width: 92vmax;
  height: 92vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(215, 162, 83, 0.03);
  /* O blur é o que impede os anéis de virarem desenho: eles precisam ser
     percebidos como profundidade, nunca lidos como círculo. */
  filter: blur(2px);
  opacity: 0;
}
.intro-bg-rings::before,
.intro-bg-rings::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.intro-bg-rings::before {
  width: 62%;
  height: 62%;
  border: 1px solid rgba(215, 162, 83, 0.04);
}
.intro-bg-rings::after {
  width: 143%;
  height: 143%;
  border: 1px solid rgba(215, 162, 83, 0.03);
}

/* 04 — vinheta. Última camada antes do grain, segura as bordas no preto. */
.intro-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 78% at 50% 50%, transparent 35%, rgba(6, 4, 2, 0.55) 78%, rgba(4, 3, 1, 0.86) 100%);
}

/* 06 — grain. feTurbulence estático em data-URI: sem requisição, sem
   canvas, sem custo por frame. */
.intro-bg-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ---------- Canvas do cometa ---------- */
/* Fica acima do fundo e ABAIXO do wordmark: na referência o rastro passa
   por trás das letras. */
.intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Wordmark ---------- */

.intro-mark {
  position: absolute;
  left: 50%;
  top: var(--i-mark-y);
  transform: translate(-50%, -50%);
  z-index: 3;
  /* "Dr." pedido em 2026-09-12: mesmo tamanho de ANÍSIO, linha própria
     em cima, com respiro pequeno entre as duas — por isso .intro-mark
     virou coluna de duas .intro-mark-linha, cada uma com o layout que
     era do wordmark inteiro antes (ver .intro-mark-linha abaixo). O
     font-size mora aqui, herdado pelas duas linhas: DR. e ANÍSIO saem
     sempre do mesmo tamanho, sem precisar declarar duas vezes. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  margin: 0;
  padding: 0;
  /* A referência usa font-size FIXO (112px), não fluido: por isso o
     wordmark ocupa ~44% da tela em 1440 e ~31% em 1920. Aqui o clamp
     trava em 7.8rem, que põe ANÍSIO — mais estreito que CLARUS por causa
     dos dois "I" — nos mesmos ~41% em 1440 e ~31% em 1920. Abaixo de
     ~1435px o 8.7vw assume e encolhe junto com a tela. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(2.05rem, 8.7vw, 7.8rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--i-text);
  user-select: none;
  -webkit-user-select: none;
}
.intro-mark-linha {
  display: flex;
  align-items: baseline;
  /* O tracking da referência é 0.26em. Como cada glifo é um elemento
     próprio, `gap` em vez de `letter-spacing` evita a folga fantasma
     depois da última letra, que descentralizaria o conjunto. */
  gap: 0.26em;
  white-space: nowrap;
}
/* DR. seria mais estreito que ANÍSIO no mesmo tracking (3 glifos contra
   6) e ficaria com o ponto meio solto: aperta um pouco só nessa linha. */
.intro-mark-linha-dr { gap: 0.16em; }

/* Duas camadas por glifo: a de fora carrega a física do ponteiro, a de
   dentro carrega a materialização (blur/opacity). Separadas, uma não
   sobrescreve o transform da outra. */
.intro-glyph {
  display: block;
  transform: translate3d(0, 0, 0);
}
.intro-glyph-i {
  display: block;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(18px);
  /* O halo é o mesmo recurso da referência (text-shadow atrás do glifo),
     na cor da marca. */
  text-shadow: 0 0 56px rgba(215, 162, 83, 0.55), 0 0 18px rgba(242, 209, 154, 0.25);
}
html.intro-anim .intro-glyph { will-change: transform; }

/* ---------- CTA ---------- */

.intro-cta-wrap {
  position: absolute;
  left: 50%;
  top: var(--i-cta-y);
  transform: translate(-50%, -50%);
  z-index: 4;
}

.intro-cta {
  position: relative;
  display: block;
  margin: 0;
  /* Cápsula de ~176x46 em desktop — a mesma proporção medida na
     referência (178x48). */
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--i-text-2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s ease, background-color 0.35s ease;
}
.intro-cta.is-ready { pointer-events: auto; }
.intro-cta:hover { color: var(--i-gold-lighter); background-color: rgba(215, 162, 83, 0.05); }

.intro-cta:focus-visible {
  outline: 2px solid var(--i-gold-light);
  outline-offset: 6px;
}

/* Cada letra de COMEÇAR também é independente — mesma física do
   wordmark, intensidade menor. */
.intro-cta-label {
  display: flex;
  gap: 0.2em;
  justify-content: center;
  pointer-events: none;
}
.intro-cta-label .intro-glyph-i {
  filter: blur(8px);
  transform: none;
  text-shadow: 0 0 22px rgba(231, 186, 112, 0.4);
}

/* A cápsula é desenhada por stroke-dashoffset, nunca por fade. O SVG tem
   o tamanho exato do botão e viewBox 1:1 em px — assim o ponto que o
   intro.js lê com getPointAtLength cai direto em coordenada de tela. */
.intro-cta-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.intro-cta-ring path {
  fill: none;
  stroke: var(--i-gold);
  stroke-width: 1;
  opacity: 0.72;
  transition: opacity 0.35s ease, stroke 0.35s ease;
}
.intro-cta-wrap:hover .intro-cta-ring path { opacity: 1; stroke: var(--i-gold-light); }

/* O halo do CTA e o hover somam na mesma propriedade: `--glow` e a
   opacidade final ficam na folha, e o JS só escreve a variável — assim o
   hover continua valendo, sem inline style atropelando o CSS. */
.intro-cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340%;
  height: 480%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--glow, 0);
  transition: opacity 0.35s ease;
  background: radial-gradient(circle, rgba(231, 186, 112, 0.20), rgba(215, 162, 83, 0.09) 45%, transparent 70%);
}
.intro-cta-wrap:hover .intro-cta-glow { opacity: calc(var(--glow, 0) + 0.45); }

/* ---------- Saída: bloom radial + superexposição ---------- */
/* O bloom nasce na origem exata do CTA (posicionado em JS) e cresce. O
   flash é a camada que leva a viewport ao quase branco quente e mascara
   a troca intro → hero. */

.intro-bloom {
  position: absolute;
  left: 50%;
  top: var(--i-cta-y);
  width: 150vmax;
  height: 150vmax;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.02);
  background: radial-gradient(circle closest-side,
    #F4EFE7 0%,
    #F4EFE7 26%,
    var(--i-gold-lighter) 44%,
    rgba(231, 186, 112, 0.85) 60%,
    rgba(215, 162, 83, 0.45) 76%,
    rgba(157, 102, 46, 0.16) 88%,
    transparent 100%);
}

.intro-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  background: radial-gradient(ellipse 130% 110% at 50% var(--i-cta-y),
    #F4EFE7 0%,
    #F6F1E9 40%,
    rgba(242, 209, 154, 0.92) 70%,
    rgba(231, 186, 112, 0.75) 100%);
}

/* ---------- Entrada do hero, coreografada com o pico da luz ---------- */
/* O hero NÃO é redesenhado. Isto é só uma revelação sutil dos elementos
   que já existem, e só acontece quando a intro rodou: sem a classe, o
   hero abre exatamente como sempre abriu. */

html.intro-active .hero-nome,
html.intro-active .hero .eyebrow,
html.intro-active .hero-manifesto,
html.intro-active .hero-lead,
html.intro-active .hero-cta-v2,
html.intro-active .hero-bg-photo,
html.intro-active .hero-marca,
html.intro-active .hero-ticker {
  opacity: 0;
}

html.intro-handoff .hero-nome,
html.intro-handoff .hero .eyebrow,
html.intro-handoff .hero-manifesto,
html.intro-handoff .hero-lead,
html.intro-handoff .hero-cta-v2,
html.intro-handoff .hero-bg-photo,
html.intro-handoff .hero-marca,
html.intro-handoff .hero-ticker {
  animation: intro-hero-in 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.intro-handoff .hero-bg-photo { animation-delay: 0s; }
html.intro-handoff .hero-nome { animation-delay: 0s; }
html.intro-handoff .hero .eyebrow { animation-delay: 0.02s; }
html.intro-handoff .hero-marca { animation-delay: 0.06s; }
html.intro-handoff .hero-manifesto { animation-delay: 0.30s; }
html.intro-handoff .hero-lead { animation-delay: 0.36s; }
html.intro-handoff .hero-cta-v2 { animation-delay: 0.44s; }
html.intro-handoff .hero-ticker { animation-delay: 0.50s; }

/* O `word-in` do título nasce com 0.3s de espera, pensada pra quem abre a
   página direto. Vindo do handoff essa espera cai no meio da luz e o
   hero aparece sem manchete. Aqui o atraso é recomprimido pra o título
   liderar a entrada, como lidera a página. */
html.intro-handoff .hero-title .word { animation-delay: calc(var(--d) * 0.06s); }

@keyframes intro-hero-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .intro {
    --i-mark-y: 44%;
    --i-cta-y: 80%;
  }
  .intro-mark {
    /* Em tela estreita o tracking da referência estoura a largura muito
       antes do que o corpo da letra. Ele encolhe, o tamanho não. */
    font-size: clamp(1.9rem, 13.5vw, 3.4rem);
  }
  .intro-mark-linha { gap: 0.18em; }
  .intro-mark-linha-dr { gap: 0.12em; }
  .intro-cta { padding: 14px 26px; font-size: 0.75rem; }
  .intro-bg-grain { opacity: 0.03; }
}

@media (max-width: 420px) {
  .intro-mark { font-size: clamp(1.75rem, 13vw, 3.1rem); }
  .intro-mark-linha { gap: 0.14em; }
  .intro-mark-linha-dr { gap: 0.1em; }
}

/* ---------- Movimento reduzido ---------- */
/* O acesso ao site nunca é bloqueado: sem cometa, sem física, sem blur
   pesado — só uma revelação curta e a saída em luz, bem mais rápida. */

@media (prefers-reduced-motion: reduce) {
  .intro-glyph-i { filter: none; transform: none; text-shadow: 0 0 40px rgba(215, 162, 83, 0.35); }
  .intro-canvas { display: none; }
  .intro-bg-grain { display: none; }
  html.intro-handoff .hero .eyebrow,
  html.intro-handoff .hero-manifesto,
  html.intro-handoff .hero-lead,
  html.intro-handoff .hero-cta-v2,
  html.intro-handoff .hero-bg-photo,
  html.intro-handoff .hero-marca,
  html.intro-handoff .hero-ticker {
    animation: none;
    opacity: 1;
  }
}