/* Póster estático del héroe: se muestra cuando el 3D no corre
   (reduce-motion, móvil, bajo rendimiento o sin red).
   Es una malla eléctrica dibujada solo con CSS: cero JavaScript, cero red. */
.hero-canvas.hero-static {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(34,211,238,.18), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(37,99,235,.20), transparent 45%),
    linear-gradient(rgba(34,211,238,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.10) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}
.hero-canvas.hero-static::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, var(--cyan) 2px, transparent 2.5px),
    radial-gradient(circle, rgba(37,99,235,.7) 2px, transparent 2.5px);
  background-size: 80px 80px, 80px 80px;
  background-position: 0 0, 40px 40px;
  opacity: .35; mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000, transparent 75%);
}