/* ─── main.css — Reset, variabili, layout globale ─── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent:          #00D4FF;
  --accent-dim:      rgba(0, 212, 255, 0.16);
  --accent-glow:     rgba(0, 212, 255, 0.5);
  --accent-glow-lg:  rgba(0, 212, 255, 0.12);
  --bg:              #04080F;
  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(255, 255, 255, 0.55);
  --text-muted:      rgba(255, 255, 255, 0.28);
  --green:           #00FF88;
  --green-dim:       rgba(0, 255, 136, 0.13);
  --border-radius:   20px;
  --card-padding:    16px;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-primary);
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ─── BACKGROUND ANIMATO ─── */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: orb-appear 2.5s ease forwards;
}

.orb-1 {
  /* Teal — angolo top-left, grande */
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(0,212,255,0.28) 0%, transparent 62%);
  top: -22vw; left: -18vw;
  animation: orb-appear 2s ease forwards, orb-drift-1 20s ease-in-out infinite alternate;
}
.orb-2 {
  /* Blu cobalto — angolo bottom-right */
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(0,80,220,0.28) 0%, transparent 62%);
  bottom: -18vw; right: -12vw;
  animation: orb-appear 2.5s ease forwards, orb-drift-2 25s ease-in-out infinite alternate;
}
.orb-3 {
  /* Verde acqua — centro-destra */
  width: 32vw; height: 32vw;
  background: radial-gradient(circle, rgba(0,255,136,0.14) 0%, transparent 62%);
  top: 38%; left: 55%;
  animation: orb-appear 3s ease forwards, orb-drift-3 30s ease-in-out infinite alternate;
}
.orb-4 {
  /* Indaco/viola — centro-basso, contro-movimento */
  width: 38vw; height: 38vw;
  background: radial-gradient(circle, rgba(100,60,255,0.18) 0%, transparent 62%);
  bottom: 5%; left: 20%;
  animation: orb-appear 3.5s ease forwards, orb-drift-4 26s ease-in-out infinite alternate;
}

@keyframes orb-appear { to { opacity: 1; } }
@keyframes orb-drift-1 {
  0%   { transform: translate(  0,    0  ) scale(1);    }
  40%  { transform: translate( 8vw,  10vh) scale(1.12); }
  100% { transform: translate(13vw,  15vh) scale(1.22); }
}
@keyframes orb-drift-2 {
  0%   { transform: translate(   0,    0  ) scale(1);    }
  35%  { transform: translate( -7vw,  -6vh) scale(1.1);  }
  100% { transform: translate(-14vw, -11vh) scale(1.18); }
}
@keyframes orb-drift-3 {
  0%   { transform: translate(  0,   0  ) scale(0.85); }
  50%  { transform: translate(-6vw,  5vh) scale(1.15); }
  100% { transform: translate(-12vw, 9vh) scale(1.3);  }
}
@keyframes orb-drift-4 {
  0%   { transform: translate(  0,    0  ) scale(0.9);  }
  45%  { transform: translate( 8vw,  -6vh) scale(1.12); }
  100% { transform: translate(14vw, -12vh) scale(1.25); }
}

/* Scanlines sottilissime — texture */
.bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,212,255,0.016) 3px, rgba(0,212,255,0.016) 4px
  );
  pointer-events: none;
}

/* ─── LAYOUT SLIDE ─── */

.slide {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
}

/* ─── PROGRESS BAR ─── */

.progress-bar {
  position: fixed;
  bottom: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #0055EE);
  box-shadow: 0 0 8px var(--accent);
  z-index: 100;
}

/* ─── CONTATORE SLIDE ─── */

.slide-counter {
  position: fixed;
  bottom: 12px; right: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  z-index: 100;
}

/* ─── BRANDING ─── */

.branding {
  position: fixed;
  top: 18px; right: 22px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 100;
}

/* ─── STATO VUOTO (nessun prodotto) ─── */

.empty-state {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.empty-state .empty-icon {
  font-size: 3rem;
  opacity: 0.3;
}