/* ==========================================================================
   SPLSOUNDLAB - TEKNOINVADERS NEON CORE ENGINE STYLES
   ========================================================================== */

/* Sfondo e tipografia globale */

html, body {
  background-color: #000000 !important;
  font-family: 'Courier New', Courier, monospace, system-ui;
  color: #ffffff !important;
}

/* Forza lo sfondo nero su tutte le sezioni che trascinerai */

section, .container-fluid, .row, .card {
  background-color: #000000 !important;
}

/* MASSIMA LEGGIBILITÀ: Niente scritte grigie o sbiadite */

p, .text-muted, .text-body-secondary, .list-group-item, label, span {
  color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 0 0 4px #000000, 0 0 8px #000000 !important;
}

/* Titoli ad alto contrasto */

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==========================================================================
   CLASSI UTILITY PER I CONTRASTI NEON (Da applicare ai testi e ai titoli)
   ========================================================================== */

.text-neon-green {
  color: #00ff66 !important;
  text-shadow: 0 0 8px #00ff66 !important;
}

.text-neon-pink {
  color: #ff007f !important;
  text-shadow: 0 0 8px #ff007f !important;
}

.text-neon-cyan {
  color: #00f0ff !important;
  text-shadow: 0 0 8px #00f0ff !important;
}

/* ==========================================================================
   RACK E CONTENITORI DI INTERFACCIA (Da applicare ai Div/Card dei plugin)
   ========================================================================== */

.gui-container-green {
  background-color: #030305 !important;
  border: 2px solid #00ff66 !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.4) !important;
  padding: 20px;
}

.gui-container-pink {
  background-color: #030305 !important;
  border: 2px solid #ff007f !important;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.4) !important;
  padding: 20px;
}

.gui-container-cyan {
  background-color: #030305 !important;
  border: 2px solid #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
  padding: 20px;
}

/* Schermi interni, display grafici o widget di controllo */

.gui-display-screen, .audio-preview-widget {
  background-color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  position: relative;
}

/* Griglia retro arcade per i display grafici */

.arcade-grid {
  background-size: 20px 20px;
  background-image: linear-gradient(to right, rgba(0, 255, 102, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 255, 102, 0.08) 1px, transparent 1px);
}

/* ==========================================================================
   POTENZIOMETRI INTERATTIVI (Corpo Grigio Chiaro, Linea Nera)
   ========================================================================== */

.knob-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
}

.analog-knob {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  border: 3px solid #000000 !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b0b2b6 100%) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.analog-knob .knob-indicator {
  background-color: #000000 !important;
  width: 4px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   PULSANTI RETRO-FUTURE / ARCADE
   ========================================================================== */

.btn-neon-action {
  background-color: transparent !important;
  font-weight: bold !important;
  border-radius: 0px !important;
  letter-spacing: 1px;
  transition: all 0.2s ease-in-out;
}

/* Varianti pulsanti per i tre plugin */

.btn-neon-green {
  border: 2px solid #00ff66 !important;
  color: #00ff66 !important;
  box-shadow: 0 0 10px #00ff66;
}

.btn-neon-green:hover {
  background-color: #00ff66 !important;
  color: #000000 !important;
  box-shadow: 0 0 20px #00ff66;
}

.btn-neon-pink {
  border: 2px solid #ff007f !important;
  color: #ff007f !important;
  box-shadow: 0 0 10px #ff007f;
}

.btn-neon-pink:hover {
  background-color: #ff007f !important;
  color: #000000 !important;
  box-shadow: 0 0 20px #ff007f;
}

.btn-neon-cyan {
  border: 2px solid #00f0ff !important;
  color: #00f0ff !important;
  box-shadow: 0 0 10px #00f0ff;
}

.btn-neon-cyan:hover {
  background-color: #00f0ff !important;
  color: #000000 !important;
  box-shadow: 0 0 20px #00f0ff;
}

/* Animazione dinamica per i VU Meter */

@keyframes pulseLaser {
  0% {
    width: 15%;
    box-shadow: 0 0 5px #00f0ff;
  }
  50% {
    width: 85%;
    box-shadow: 0 0 20px #00f0ff;
  }
  100% {
    width: 15%;
    box-shadow: 0 0 5px #00f0ff;
  }
}

.active-laser-meter {
  animation: pulseLaser 1.2s infinite ease-in-out;
}

#main-nav .container-fluid {
  background-color: transparent !important;
  background: transparent !important;
}

/* Forza le tre linee del menu mobile a essere bianche e visibili */

.navbar-toggler-icon {
  filter: invert(1) !important;
}

/* Opzionale: dà un bordo neon sottile al pulsante quando appare */

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Stato normale delle icone nel footer (leggermente spente) */

footer a, footer i, footer svg {
  transition: all 0.3s ease-in-out !important;
  opacity: 0.6;
}

/* Stato quando passi il mouse sopra (si accendono di luce neon) */

footer a:hover, footer a:hover i, footer a:hover svg {
  opacity: 1 !important;
  color: #00ff66 !important;
  transform: translateY(-2px);
}

/* Spegne e occulta definitivamente tutti i controlli nativi del Carousel */

.carousel-indicators, .carousel-indicators [data-bs-target], .carousel-control-prev, .carousel-control-next, .carousel-control-prev-icon, .carousel-control-next-icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Corazzatura leggibilità testo nell'Hero */

#hero h1 {
  text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000 !important;
}

#hero p.lead {
  text-shadow: 0 0 8px #000000, 0 0 15px #000000, 0 0 25px #000000 !important;
}

/* Forzatura Dissolvenza Dolce e Progressiva per il Video Background (Hero) */

#hero-bg-carousel .carousel-item {
  transition: opacity 1.5s ease-in-out !important;
}

#hero-bg-carousel .carousel-item-next.carousel-item-start, #hero-bg-carousel .carousel-item-prev.carousel-item-end, #hero-bg-carousel .active.carousel-item-start, #hero-bg-carousel .active.carousel-item-end {
  transition: opacity 1.5s ease-in-out !important;
}

/* Posizionamento e override di sicurezza per il Cookie Banner */