/* hero-fx.css - camadas decorativas do hero (breathing + grao + vinheta + canvas).
   Reutilizavel (home, landings). Pareado com assets/js/hero-fx.js.
   Empilhamento dentro de #hero (que e position:relative; overflow:hidden):
     .hero-bg (z 0)  ->  .hero-brain (z 0)  ->  .hero-fx-grain/.hero-fx-vignette (z 1)
     ->  #hero-fx-canvas (z 1)  ->  .hero-content (z 2, ja definido em index.css)
   Tudo abaixo do conteudo garante CLS 0 (camadas absolute dentro do hero ja dimensionado). */

/* breathing: o gradiente do fundo "respira" devagar (ciclo 19s, sem JS).
   Aplicado por cima do .hero-bg existente via classe extra. */
.hero-bg.fx-breathing {
  background: linear-gradient(135deg, #0b222e 0%, #1e4152 40%, #163240 65%, #102a38 100%);
  background-size: 220% 220%;
  animation: heroBreathe 19s ease-in-out infinite alternate;
}
@keyframes heroBreathe {
  0%   { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}

/* Landings (.hero-lp) e sobre (.hero-sobre) carregam o gradiente no proprio
   container (nao numa .hero-bg separada como a home). Aqui o breathing anima o
   gradiente que cada um ja define em landing.css / sobre.css: so adiciona
   background-size + a mesma animacao, preservando a paleta de cada pagina.
   .hero-content vive acima; o -inner dessas paginas e elevado a z-index 2. */
.hero-lp.fx-breathing,
.hero-sobre.fx-breathing {
  background-size: 220% 220%;
  animation: heroBreathe 19s ease-in-out infinite alternate;
}
.hero-lp.fx-breathing > .hero-lp-inner {
  position: relative;
  z-index: 2;
}
.hero-sobre.fx-breathing > .hero-sobre-inner {
  position: relative;
  z-index: 2;
}

/* camadas decorativas (grao e vinheta) cobrindo todo o hero, sem capturar clique. */
.hero-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* grao / noise sutil, estatico (mix overlay ~5%). */
.hero-fx-grain {
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vinheta radial: escurece as bordas, garante contraste WCAG do texto branco
   mesmo com particulas claras passando atras. */
.hero-fx-vignette {
  background: radial-gradient(120% 120% at 38% 42%, transparent 30%, rgba(5, 18, 26, .55) 100%);
}

/* canvas "poeira zen": decorativo, abaixo do conteudo, nao captura clique. */
#hero-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* reduced-motion: respiracao congelada (o canvas ja nem inicia, ver hero-fx.js). */
@media (prefers-reduced-motion: reduce) {
  .hero-bg.fx-breathing,
  .hero-lp.fx-breathing,
  .hero-sobre.fx-breathing {
    animation: none;
    background-position: 50% 50%;
  }
}