/* style.css — layout + camada visual. Estilos derivam de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;   /* fallback */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────────────────────────
   Camada visual de fundo: grid → aurora → horizonte → grão.
   Fica atrás de tudo (z-index 0); o conteúdo (.hero/.footer) sobe acima.
   ────────────────────────────────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Grid sutil de linhas finas — detalhe estrutural, esmaece nas bordas. */
.backdrop__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  opacity: var(--grid-opacity);
  /* máscara radial: grid visível ao centro, dissolve nas extremidades */
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 78%);
}

/* Aurora: três blobs radiais difusos que "respiram" devagar. */
.backdrop__aurora {
  position: absolute;
  inset: 0;
  opacity: var(--glow-opacity);
}
.aurora {
  position: absolute;
  border-radius: 50%;
  /* blur por blob (cada um bem menor que a viewport) — mais barato que borrar a
     superfície inteira a cada frame da animação. */
  filter: blur(var(--glow-blur));
  will-change: transform, opacity;
}
.aurora--1 {
  width: var(--glow-size);
  height: var(--glow-size);
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--glow-1) 85%, transparent) 0%,
              transparent 62%);
  animation: breathe var(--breathe-duration) var(--ease) infinite;
}
.aurora--2 {
  width: calc(var(--glow-size) * .72);
  height: calc(var(--glow-size) * .72);
  left: 38%;
  top: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--glow-2) 70%, transparent) 0%,
              transparent 60%);
  animation: drift var(--breathe-duration) var(--ease) infinite;
  animation-delay: calc(var(--breathe-duration) * -.4);
}
.aurora--3 {
  width: calc(var(--glow-size) * .6);
  height: calc(var(--glow-size) * .6);
  left: 62%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--glow-1) 55%, var(--glow-2) 20%) 0%,
              transparent 60%);
  animation: drift-alt var(--breathe-duration) var(--ease) infinite;
  animation-delay: calc(var(--breathe-duration) * -.7);
}

/* Linha-horizonte: um fino traço luminoso que ancora a composição. */
.backdrop__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 1px;
  background: linear-gradient(to right,
              transparent,
              color-mix(in srgb, var(--glow-1) 50%, transparent) 30%,
              color-mix(in srgb, var(--glow-2) 55%, transparent) 50%,
              color-mix(in srgb, var(--glow-1) 50%, transparent) 70%,
              transparent);
  opacity: .35;
}

/* Grão / ruído: textura sutil sobre tudo. */
.backdrop__grain {
  position: absolute;
  inset: 0;
  background: url("../assets/noise.svg");
  background-size: var(--grain-size) var(--grain-size);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

/* ──────────────────────────────────────────────────────────────────────────
   Conteúdo
   ────────────────────────────────────────────────────────────────────────── */
.lang-toggle {
  position: fixed; top: var(--space-2); right: var(--space-3);
  background: none; border: 0; color: var(--text-dim);
  font: 500 .85rem var(--font-body); letter-spacing: 1px;
  cursor: pointer; z-index: 3;
  padding: var(--space-1);
  border-radius: 999px;
  transition: color .25s var(--ease);
}
.lang-toggle:hover { color: var(--text); }
.lang-toggle [data-lang] { transition: color .25s var(--ease); }
.lang-toggle [data-lang].is-active { color: var(--text); }
.lang-toggle:focus-visible {
  outline: 1px solid var(--accent-1);            /* fallback */
  outline: 1px solid color-mix(in srgb, var(--glow-1) 70%, var(--text));
  outline-offset: 4px;
}

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-3);
}
.hero__inner { text-align: center; max-width: 720px; }

/* Wordmark em TEXTO HTML (usa de fato a Space Grotesk carregada na página). */
.hero__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 5.6rem);
  line-height: 1;
  letter-spacing: clamp(2px, 1vw, 8px);
  margin: 0;
  /* fallback: sem suporte a background-clip:text, mostra texto sólido (nunca invisível) */
  color: var(--text);
  /* preenchimento em gradiente sutil para integrar à aurora */
  background: linear-gradient(180deg,
              var(--text) 0%,
              color-mix(in srgb, var(--text) 78%, var(--glow-1)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* brilho violeta difuso — drop-shadow funciona no texto recortado/gradiente
     (ao contrário de text-shadow, que some com o fill transparente) */
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--glow-1) 22%, transparent));
  /* revelação no carregamento */
  animation: rise var(--reveal-duration) var(--ease) both;
}

.hero__tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 2.5vw, 1.4rem); color: var(--text);
  margin: var(--space-2) 0 0;
  animation: rise var(--reveal-duration) var(--ease) both;
  animation-delay: .12s;
}

.hero__status {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--text-dim); font-size: .8rem; letter-spacing: 2px;
  margin-top: var(--space-4);
  animation: rise var(--reveal-duration) var(--ease) both;
  animation-delay: .4s;
}
.hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow-2);
  box-shadow: 0 0 8px color-mix(in srgb, var(--glow-2) 80%, transparent);
  animation: pulse var(--pulse-duration) var(--ease) infinite;
}

.footer {
  position: relative; z-index: 1;
  text-align: center; color: var(--text-dim); font-size: .75rem;
  padding: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   Animações
   ────────────────────────────────────────────────────────────────────────── */
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .9; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1;  }
}
@keyframes drift {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0)        scale(1);    }
  50%      { transform: translate(-50%, -50%) translate(4%, -3%)     scale(1.08); }
}
@keyframes drift-alt {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0)        scale(1.04); }
  50%      { transform: translate(-50%, -50%) translate(-5%, 4%)     scale(.94);  }
}
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1);    }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Acessibilidade: desliga TODO movimento (mantém o visual estático e legível).
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora,
  .hero__dot,
  .hero__logo,
  .hero__tagline,
  .hero__status {
    animation: none !important;
  }
  /* garante que os elementos com reveal "both" fiquem visíveis sem animar */
  .hero__logo, .hero__tagline, .hero__status {
    opacity: 1;
    transform: none;
  }
}