/* ============================================================
   effects.css — capas atmosféricas: rejilla, horizonte, CRT
   ============================================================ */

/* ---------- suelo de rejilla estilo Tron (dentro de .hero) ---------- */
.grid-floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 300vw;
  height: 65vh;
  transform: translateX(-50%) perspective(45vh) rotateX(78deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, rgba(255, 30, 60, .55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 30, 60, .55) 1px, transparent 1px);
  background-size: 6vh 6vh;
  animation: floor-scroll 1.15s linear infinite;
  will-change: background-position;
}
@keyframes floor-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 6vh; }
}
.grid-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent 0%, var(--bg) 78%);
}

/* resplandor del horizonte */
.horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 2px;
  background: var(--red-glow);
  box-shadow: 0 0 18px 4px var(--red-glow), 0 0 60px 10px var(--red);
  opacity: .9;
}

/* lienzo de motos ambiente */
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- overlays CRT (fijos, sobre toda la página) ---------- */
.scanlines {
  z-index: var(--z-scanlines);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, .26) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
}
.vignette {
  z-index: var(--z-vignette);
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .8) 100%);
}
.crt-flicker {
  z-index: var(--z-scanlines);
  background: var(--red);
  opacity: 0;
  mix-blend-mode: overlay;
  animation: crt-flicker 6s steps(1) infinite;
}
@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 0; }
  97%           { opacity: .04; }
  98%           { opacity: .015; }
  99%           { opacity: .05; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-floor { animation: none; }
  .crt-flicker { animation: none; }
}