/*
  neon.css
  Effets néon et animations pour titres et éléments visuels.
  Factorisation, optimisation, documentation complète.
*/

/* Import de la police NeonderThaw */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
/**
 * ElectroLibre - Effet Néon
 * Style pour les titres principaux.
 */
.page-events .neon-title,
.page-artists .neon-title {
  color: #f1e2ff;
  text-shadow: 
    0 0 5px var(--color-purple), 
    0 0 15px var(--color-purple), 
    0 0 25px var(--color-purple),
    0 0 40px var(--color-purple), 
    0 0 60px #3b42a6, /* Version plus foncée de purple */
    0 0 10px #a2a7ee, /* Version plus claire de purple */
    0 0 98px #3b42a6; /* Version plus foncée de purple */
}

.neon-title-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* Augmenté pour être certain qu'il est au-dessus de tout */
  pointer-events: none; /* Pour permettre l'interaction avec les éléments en dessous */
  background: transparent;
}

.neon-title {
  font-family: 'Sacramento', cursive !important;
  font-size: 50px;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
  letter-spacing: 2px;
  text-transform: none !important;
}

/* Effets néon par type de page */
/* Pages accueil / association - couleur verte */

.page-home .neon-title {
  color: #e2fff3;
  text-shadow:
    0 0 3px var(--color-green),
    0 0 8px var(--color-green),
    0 0 12px #5ca640,
    0 0 4px #b0eaa0;
}

/* Pages événements / artistes - couleur violette */

.page-events .neon-title {
  color: #f1e2ff;
  text-shadow:
    0 0 3px var(--color-purple),
    0 0 8px var(--color-purple),
    0 0 12px #3b42a6,
    0 0 4px #a2a7ee;
}

/* Pages contact / mentions légales - couleur orange */

.page-contact .neon-title {
  color: #fff6a9;
  text-shadow:
    0 0 3px var(--color-orange),
    0 0 8px var(--color-orange),
    0 0 12px #b05a38,
    0 0 4px #ffc2a8;
}
.page-legal .neon-title {
  color: #fff6a9;
  text-shadow:
    0 0 3px var(--color-orange),
    0 0 8px var(--color-orange),
    0 0 12px #b05a38,
    0 0 4px #ffc2a8;
}

/* Animation de clignotement pour l'effet néon */
@-webkit-keyframes blink {
  20%, 24%, 55% {
    opacity: 1;
    color: #fffbe6; /* Couleur la plus lumineuse */
    text-shadow:
      0 0 20px #fffbe6,
      0 0 40px #fffbe6,
      0 0 80px #fffbe6,
      0 0 120px #fffbe6;
  }

  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 0; /* Complètement visible */
  }
}

@keyframes blink {
  20%, 24%, 55% {
    opacity: 1;
    color: #fffbe6; /* Couleur la plus lumineuse */
    text-shadow:
      0 0 20px #fffbe6,
      0 0 40px #fffbe6,
      0 0 80px #fffbe6,
      0 0 60px #fffbe6;
  }

  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1; /* Complètement visible */
  }
}

/* Animation grésillement + glitch avant disparition */
@keyframes neon-glitch-blink {
  0%, 100% {
    opacity: 1;
    filter: none;
    text-shadow:
      0 0 5px var(--color-green),
      0 0 15px var(--color-green),
      0 0 40px #83D95B;
    transform: none;
  }
  10%, 20%, 30%, 40%, 50% {
    opacity: 0.7;
    filter: drop-shadow(-2px 0 2px #5B63D9) drop-shadow(2px 0 2px #D9815B);
    text-shadow:
      2px 2px #5B63D9,
      -2px -2px #D9815B,
      0 0 15px var(--color-green);
    transform: skewX(2deg) scale(1.05);
  }
  60%, 70% {
    opacity: 0.5;
    filter: drop-shadow(-4px 0 2px #5B63D9) drop-shadow(4px 0 2px #D9815B);
    text-shadow:
      4px 0 #5B63D9,
      -4px 0 #D9815B,
      0 0 40px var(--color-green);
    transform: skewX(-2deg) scale(0.98);
  }
  80% {
    opacity: 0.2;
    filter: none;
    text-shadow: none;
    transform: none;
  }
  90% {
    opacity: 0;
    filter: none;
    text-shadow: none;
    transform: none;
  }
}

/* Fusion effet néon + glitch */

/* Effet néon classique sans glitch */
.neon-title {
  font-family: 'Sacramento', cursive, 'Zen Dots' !important;
  font-size: 50px;
  animation: blink 4s infinite;
  -webkit-animation: blink 4s infinite;
  letter-spacing: 2px;
  text-transform: none !important;
}

/* Positionnement en bas à gauche pour le hero */
.neon-title-bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 100;
  pointer-events: none;
  background: transparent;
  padding-left: 100px; /* Espace pour le logo */;
  padding-bottom: 10px; /* Espace en bas */
}
.neon-title-bottom-left .neon-title.neon-glitch {
  font-size: 75px; /* Taille divisée par deux */
  text-align: left;
  padding-left: 100px; /* Espace pour le logo */;
  padding-bottom: 10px; /* Espace en bas */
}

/* Adaptation responsive */
@media screen and (max-width: 768px) {
  .neon-title {
    font-size: calc(18px + 6vh);
    line-height: calc(18px + 8vh);
  }
}

@media screen and (max-width: 480px) {
  .neon-title {
    font-size: calc(16px + 4vh);
    line-height: calc(16px + 6vh);
  }
  .hero-neon-text {
    font-size: 0.85rem !important; /* Encore plus petit en mobile */
  }
}

@media screen and (max-width: 900px) {
  .neon-title {
    font-size: 2.2rem !important;
    line-height: 1.2em !important;
  }
}