/* Ilha Tech — camadas da animação da Hero (tech-hero.js). Escopo restrito a .tech-hero. */
.tech-hero { isolation: isolate; }

.tech-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.tech-hero-canvas canvas { display: block; width: 100%; height: 100%; }
.tech-hero.is-live .tech-hero-canvas { opacity: 1; }
.tech-hero.is-live::before { opacity: 0; }

/* Região de contraste para headline e subheadline, e fusão com a seção seguinte. */
.tech-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 60% at 42% 56%, rgba(5, 5, 5, 0.8) 0%, rgba(5, 5, 5, 0.52) 52%, rgba(5, 5, 5, 0) 84%),
    linear-gradient(180deg, rgba(4, 4, 3, 0) 78%, #040403 100%);
}
.tech-hero .container { z-index: 2; }

/* Fallback estático (sem WebGL / CDN indisponível): feixes e núcleo sugeridos em gradiente. */
.tech-hero.is-static .tech-hero-canvas {
  opacity: 1;
  background:
    radial-gradient(circle at 76% 44%, rgba(255, 106, 53, 0.55) 0, rgba(255, 70, 26, 0.18) 6%, rgba(255, 70, 26, 0) 22%),
    conic-gradient(from 200deg at 76% 44%, rgba(255, 70, 26, 0) 0deg, rgba(255, 70, 26, 0.10) 18deg, rgba(255, 70, 26, 0) 40deg, rgba(255, 70, 26, 0) 120deg, rgba(255, 106, 53, 0.08) 150deg, rgba(255, 70, 26, 0) 175deg, rgba(255, 70, 26, 0) 250deg, rgba(255, 255, 255, 0.05) 270deg, rgba(255, 70, 26, 0) 290deg),
    #050505;
}
.tech-hero.is-static::before { opacity: 0; }

@media (max-width: 760px) {
  .tech-hero-scrim {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0) 16%, rgba(5, 5, 5, 0.62) 30%, rgba(5, 5, 5, 0.7) 82%, #040403 100%);
  }
  .tech-hero.is-static .tech-hero-canvas {
    background:
      radial-gradient(circle at 72% 14%, rgba(255, 106, 53, 0.5) 0, rgba(255, 70, 26, 0.16) 8%, rgba(255, 70, 26, 0) 30%),
      #050505;
  }
}