/* ============================================================
   029 PROJECT — NEON SIGN EFFECT
   "Vecchia insegna al neon che si accende in un vicolo"
   Applicato al testo/logo della hero section
   ============================================================ */

/* ------------------------------------------------------------
   VARIABILI LOCALI (estendono il design system)
   ------------------------------------------------------------ */
:root {
  --neon-flicker-red:    #FF3010;
  --neon-flicker-blue:   #50AAFF;
  --neon-flicker-yellow: #FFE820;

  --neon-glow-red-sm:   0 0  4px rgba(255, 48, 16, 0.7),
                         0 0 10px rgba(255, 48, 16, 0.5),
                         0 0 20px rgba(255, 48, 16, 0.3);

  --neon-glow-red-full: 0 0  4px rgba(255, 48, 16, 0.9),
                         0 0 14px rgba(255, 48, 16, 0.75),
                         0 0 30px rgba(255, 48, 16, 0.55),
                         0 0 60px rgba(255, 48, 16, 0.30),
                         0 0 90px rgba(255, 48, 16, 0.15);

  --neon-glow-blue-sm:  0 0  4px rgba(80, 170, 255, 0.7),
                         0 0 10px rgba(80, 170, 255, 0.5),
                         0 0 20px rgba(80, 170, 255, 0.3);

  --neon-glow-blue-full:0 0  4px rgba(80, 170, 255, 0.9),
                         0 0 14px rgba(80, 170, 255, 0.75),
                         0 0 30px rgba(80, 170, 255, 0.55),
                         0 0 60px rgba(80, 170, 255, 0.30);
}

/* ------------------------------------------------------------
   CONTENITORE NEON SIGN
   ------------------------------------------------------------ */
.neon-sign {
  display: inline-block;
  position: relative;
  /* Stato iniziale: spento */
  opacity: 0;
}

/* Pipe decorativo (|) che lampeggia come cavo elettrico */
.neon-sign::before {
  content: '';
  position: absolute;
  top: -8px; left: -16px;
  width: 6px;
  height: calc(100% + 16px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--neon-flicker-red) 30%,
    var(--neon-flicker-red) 70%,
    transparent 100%
  );
  opacity: 0;
  border-radius: 3px;
  filter: blur(1px);
  transition: opacity 0.1s;
}

/* Riflesso sul "pavimento" sotto il testo */
.neon-sign::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: scaleY(-0.25) translateY(2px);
  transform-origin: top center;
  opacity: 0;
  filter: blur(4px);
  color: inherit;
  /* Il riflesso eredita il text-shadow del genitore via JS */
  transition: opacity 0.4s ease;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
   STATI DELL'ANIMAZIONE (controllati via JS + classi)
   ------------------------------------------------------------ */

/* Fase 0 — tutto spento */
.neon-sign.ns-off {
  opacity: 0;
  text-shadow: none;
  color: #333;
}

/* Fase 1 — primo tentativo: accensione parziale, debole */
.neon-sign.ns-try-1 {
  opacity: 0.25;
  color: var(--neon-flicker-red);
  text-shadow: var(--neon-glow-red-sm);
}

/* Fase 2 — si spegne di nuovo */
.neon-sign.ns-off-2 {
  opacity: 0;
  text-shadow: none;
}

/* Fase 3 — secondo tentativo: più forte, instabile */
.neon-sign.ns-try-2 {
  opacity: 0.6;
  color: var(--neon-flicker-red);
  text-shadow: var(--neon-glow-red-sm);
}

/* Fase 4 — flickering rapido (aggiunto via animation CSS) */
.neon-sign.ns-flicker {
  opacity: 1;
  color: var(--neon-flicker-red);
  text-shadow: var(--neon-glow-red-full);
  animation: neon-rapid-flicker 0.5s steps(1) forwards;
}

/* Fase 5 — ACCESO: luce stabile con hum lento */
.neon-sign.ns-on {
  opacity: 1;
  color: var(--neon-flicker-red);
  text-shadow: var(--neon-glow-red-full);
  animation: neon-hum 4s ease-in-out infinite;
}

/* Il cavo diventa visibile quando è acceso */
.neon-sign.ns-on::before {
  opacity: 0.6;
  animation: cable-pulse 4s ease-in-out infinite;
}

/* Il riflesso appare quando è acceso */
.neon-sign.ns-on::after {
  opacity: 0.15;
  text-shadow: inherit;
}

/* ------------------------------------------------------------
   LETTERE INDIVIDUALI — .neon-char
   Ogni lettera può avere colore/timing diverso
   ------------------------------------------------------------ */
.neon-char {
  display: inline-block;
  transition: color 0.05s, text-shadow 0.05s, opacity 0.05s;
}

/* Numero "0" — blu elettrico */
.neon-char.char-0 {
  color: var(--neon-flicker-blue) !important;
}
.neon-sign.ns-on .neon-char.char-0 {
  text-shadow: var(--neon-glow-blue-full);
  animation: neon-hum-blue 4s ease-in-out 0.3s infinite;
}

/* Numero "2" — giallo */
.neon-char.char-2 {
  color: var(--neon-flicker-yellow) !important;
}
.neon-sign.ns-on .neon-char.char-2 {
  text-shadow:
    0 0  4px rgba(255, 232, 32, 0.9),
    0 0 14px rgba(255, 232, 32, 0.7),
    0 0 30px rgba(255, 232, 32, 0.5);
  animation: neon-hum-yellow 4s ease-in-out 0.6s infinite;
}

/* Numero "9" — rosso (colore default) */
.neon-char.char-9 {
  color: var(--neon-flicker-red) !important;
}

/* Separatore tra "029" e "PROJECT" */
.neon-separator {
  display: inline-block;
  width: 1px;
  height: 0.8em;
  background: var(--muted-gray);
  margin-inline: 12px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s;
}
.neon-sign.ns-on ~ .neon-separator,
.neon-separator.visible {
  opacity: 0.3;
}

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

/* Sfarfallio rapido prima dell'accensione definitiva */
@keyframes neon-rapid-flicker {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  15%  { opacity: 0; }
  20%  { opacity: 0.8; }
  25%  { opacity: 0; }
  35%  { opacity: 1; }
  40%  { opacity: 0.3; }
  50%  { opacity: 0; }
  60%  { opacity: 1; }
  65%  { opacity: 0.7; }
  75%  { opacity: 1; }
  85%  { opacity: 0.4; }
  92%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Hum lento: la luce "respira" leggermente come neon vero */
@keyframes neon-hum {
  0%, 100% {
    text-shadow:
      0 0  4px rgba(255, 48, 16, 0.90),
      0 0 14px rgba(255, 48, 16, 0.75),
      0 0 30px rgba(255, 48, 16, 0.55),
      0 0 60px rgba(255, 48, 16, 0.30),
      0 0 90px rgba(255, 48, 16, 0.15);
    opacity: 1;
  }
  45% {
    text-shadow:
      0 0  3px rgba(255, 48, 16, 0.80),
      0 0 10px rgba(255, 48, 16, 0.60),
      0 0 22px rgba(255, 48, 16, 0.40),
      0 0 45px rgba(255, 48, 16, 0.20);
    opacity: 0.93;
  }
  /* Micro-glitch casuale */
  72% {
    opacity: 0.88;
    text-shadow:
      0 0  4px rgba(255, 48, 16, 0.70),
      0 0 12px rgba(255, 48, 16, 0.50);
  }
  73% {
    opacity: 1;
    text-shadow:
      0 0  4px rgba(255, 48, 16, 0.90),
      0 0 14px rgba(255, 48, 16, 0.75),
      0 0 30px rgba(255, 48, 16, 0.55),
      0 0 60px rgba(255, 48, 16, 0.30);
  }
}

@keyframes neon-hum-blue {
  0%, 100% {
    text-shadow:
      0 0  4px rgba(80, 170, 255, 0.90),
      0 0 14px rgba(80, 170, 255, 0.75),
      0 0 30px rgba(80, 170, 255, 0.55),
      0 0 60px rgba(80, 170, 255, 0.30);
    opacity: 1;
  }
  50% {
    text-shadow:
      0 0  3px rgba(80, 170, 255, 0.75),
      0 0 10px rgba(80, 170, 255, 0.55),
      0 0 20px rgba(80, 170, 255, 0.35);
    opacity: 0.92;
  }
}

@keyframes neon-hum-yellow {
  0%, 100% {
    text-shadow:
      0 0  4px rgba(255, 232, 32, 0.90),
      0 0 14px rgba(255, 232, 32, 0.70),
      0 0 30px rgba(255, 232, 32, 0.50);
    opacity: 1;
  }
  50% {
    text-shadow:
      0 0  3px rgba(255, 232, 32, 0.75),
      0 0 10px rgba(255, 232, 32, 0.50),
      0 0 20px rgba(255, 232, 32, 0.30);
    opacity: 0.90;
  }
}

/* Pulsazione del "cavo" laterale */
@keyframes cable-pulse {
  0%, 100% { opacity: 0.6; filter: blur(1px); }
  50%       { opacity: 0.3; filter: blur(2px); }
}

/* ------------------------------------------------------------
   SFONDO VICOLO — classe opzionale sul wrapper/sezione
   Aggiunge un vignette scura per esaltare l'effetto
   ------------------------------------------------------------ */
.neon-alley-bg {
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, #12060A 0%, #050508 100%);
  position: relative;
  overflow: hidden;
}

/* Pioggia di pixel / rumore verticale */
.neon-alley-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}