/* ============================================================
   HERO HOLOGRAPHIC BACKGROUND
   Stacks layered atmospheric effects under the hero content.
   All rules scoped to .hero — does not leak to other pages.
   ============================================================ */

.hero {
  --holo-bg-deep: #000000;
  --holo-bg-tone: #020409;
  /* Palette: verde acido brand (#00ff88) come dominante,
     piccolo touch ciano nei flash per dare profondita. */
  --holo-cyan-bright: #00ff88;
  --holo-cyan-soft: #66ffaa;
  --holo-scan-speed: 14s;
  --holo-hologram-speed: 8s;
  --holo-sweep-speed: 11s;
  --holo-grid-size: 60px;
  --holo-edge-mask-size: 60%;
}

.hero .scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--holo-bg-tone) 0%, var(--holo-bg-deep) 70%);
}

/* Layer 1 — ambient edge glow */
.hero .layer-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 0% 50%, rgba(0, 255, 136, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 100% 50%, rgba(0, 255, 136, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 50% 0%, rgba(102, 255, 170, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(102, 255, 170, 0.14) 0%, transparent 50%);
  mix-blend-mode: screen;
  animation: holoGlowPulse var(--holo-hologram-speed) ease-in-out infinite;
  pointer-events: none;
}

/* Layer 2 — holographic grid with soft center mask */
.hero .layer-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 255, 136, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 136, 0.07) 1px, transparent 1px);
  background-size: var(--holo-grid-size) var(--holo-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 70% var(--holo-edge-mask-size) at center, transparent 20%, black 95%);
          mask-image: radial-gradient(ellipse 70% var(--holo-edge-mask-size) at center, transparent 20%, black 95%);
  mix-blend-mode: screen;
  animation: holoGridShift 22s linear infinite;
  pointer-events: none;
}

/* Layer 3 — edge noise field */
.hero .layer-edge-noise {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 136, 0) 0px,
      rgba(0, 255, 136, 0) 1px,
      rgba(0, 255, 136, 0.03) 1px,
      rgba(0, 255, 136, 0.03) 2px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(102, 255, 170, 0) 0px,
      rgba(102, 255, 170, 0) 1px,
      rgba(102, 255, 170, 0.025) 1px,
      rgba(102, 255, 170, 0.025) 2px
    );
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, transparent 30%, black 90%);
          mask-image: radial-gradient(ellipse 55% 45% at center, transparent 30%, black 90%);
  pointer-events: none;
}

/* Layer 4 — scan lines (slow vertical movement) */
.hero .layer-scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 136, 0) 0px,
    rgba(0, 255, 136, 0) 2px,
    rgba(0, 255, 136, 0.045) 3px,
    rgba(0, 255, 136, 0.045) 4px
  );
  mix-blend-mode: screen;
  animation: holoScanMove var(--holo-scan-speed) linear infinite;
  pointer-events: none;
}

/* Layer 5 — slow light sweep (vertical wave) */
.hero .layer-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 255, 136, 0.07) 50%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: holoSweepUp var(--holo-sweep-speed) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  /* Anticipa la prima entrata della luce di 1 secondo (delay negativo).
     Senza, l'opacita parte da 0 e impiega ~0.9s a salire → la luce sembra arrivare tardi al primo load. */
  animation-delay: -1s;
  pointer-events: none;
}

/* Layer 6 — chromatic split (JS triggered) */
.hero .layer-chroma {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(0, 255, 136, 0.018) 4px,
    rgba(0, 255, 136, 0.018) 5px
  );
  mix-blend-mode: screen;
  transform: translateX(0);
  pointer-events: none;
}
.hero .layer-chroma.glitching {
  animation: holoChromaShift 0.22s steps(2) 1;
}

/* Layer 7 — glitch bars container (JS triggered) */
.hero .layer-glitch-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 60ms linear;
  opacity: 0;
}
.hero .glitch-bar {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(0, 255, 136, 0.85);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.55);
}

/* Layer 8 — screen tear (JS triggered) */
.hero .layer-tear {
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 136, 0.12) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(0, 255, 136, 0.12) 60%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}

/* Layer 9 — subtle film noise (SVG) */
.hero .layer-noise {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Layer 10 — vignette */
.hero .layer-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.4) 75%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}

/* ===== KEYFRAMES (prefixed holo* to avoid collisions) ===== */
@keyframes holoScanMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -120px; }
}
/* Sweep ascendente: parte da sotto e sale verso l'alto.
   Visivamente suggerisce di scrollare giu (le luci che "scorrono via" verso l'alto). */
@keyframes holoSweepUp {
  0%   { transform: translateY(100%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
/* Lamp-flicker irregular pulse: keep ~±20% opacity range, sudden brief dips
   like a faulty bulb, smooth slow breath in between. */
@keyframes holoGlowPulse {
  0%,
  100%   { opacity: 0.96; transform: scale(1); }
  5%     { opacity: 0.82; }
  6%     { opacity: 1; }
  18%    { opacity: 0.95; }
  28%    { opacity: 1;    transform: scale(1.018); }
  34%    { opacity: 0.84; }
  35%    { opacity: 1; }
  46%    { opacity: 0.92; }
  58%    { opacity: 1;    transform: scale(1.022); }
  66%    { opacity: 0.85; }
  68%    { opacity: 1; }
  79%    { opacity: 0.94; }
  87%    { opacity: 1; }
  91%    { opacity: 0.82; }
  93%    { opacity: 1; }
}
@keyframes holoGridShift {
  0%   { background-position: 0 0; }
  100% { background-position: var(--holo-grid-size) var(--holo-grid-size); }
}
@keyframes holoChromaShift {
  0%   { transform: translateX(0)    skewX(0deg);   filter: hue-rotate(0deg); }
  25%  { transform: translateX(-4px) skewX(-0.3deg); filter: hue-rotate(15deg); }
  50%  { transform: translateX(3px)  skewX(0.2deg);  filter: hue-rotate(-10deg); }
  75%  { transform: translateX(-2px) skewX(0deg);   filter: hue-rotate(20deg); }
  100% { transform: translateX(0)    skewX(0deg);   filter: hue-rotate(0deg); }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .hero {
    --holo-grid-size: 42px;
    --holo-edge-mask-size: 70%;
  }
}

/* Accessibility: reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero .layer-glow,
  .hero .layer-grid,
  .hero .layer-scanlines,
  .hero .layer-sweep,
  .hero .layer-chroma {
    animation: none !important;
  }
}