/* ============================================================
   global.css — CYBERSECURITY AWARENESS PMI 2024
   Contiene: variabili colore, sfondo animato, audio dock, nav
   NON toccare questo file per modificare singole slide.
   ============================================================ */

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

/* ── VARIABILI COLORE ─────────────────────────────────────
   Modifica qui per cambiare tutta la palette del corso      */
:root {
  --red:   #ff2d20;
  --amber: #ff9900;
  --green: #00e676;
  --cyan:  #00e5ff;
  --ink:   #060810;
  --ink2:  #0d1117;
}

html, body { width:100%; height:100%; overflow:hidden; background:var(--ink); }

/* ── SFONDO ANIMATO ───────────────────────────────────── */
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; }

.bg-grid {
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(rgba(255,45,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,32,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(600px) rotateX(12deg);
  animation: gm 20s linear infinite;
}
@keyframes gm { from { background-position: 0 0; } to { background-position: 0 80px; } }

.orb1 {
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:rgba(255,45,32,.12); filter:blur(100px);
  top:-180px; left:-130px; animation:oa 9s ease-in-out infinite;
}
.orb2 {
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:rgba(255,120,0,.08); filter:blur(80px);
  bottom:-90px; right:-70px; animation:ob 11s ease-in-out infinite;
}
@keyframes oa { 0%,100%{transform:translate(0,0)} 50%{transform:translate(25px,-35px)} }
@keyframes ob { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-18px,28px)} }

.beam {
  position:absolute; top:0; left:-70%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,45,32,.03),transparent);
  animation:bm 7s ease-in-out infinite;
}
@keyframes bm { from{left:-70%} to{left:150%} }

.scanlines {
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.11) 3px,rgba(0,0,0,.11) 4px);
}

/* ── DECK E SLIDE ─────────────────────────────────────── */
#deck { width:100vw; height:100vh; position:relative; z-index:10; }
.slide { display:none; position:absolute; inset:0; flex-direction:column; overflow:hidden; }
.slide.active { display:flex; }

/* ── AUDIO DOCK ───────────────────────────────────────── */
#adock {
  position:fixed; bottom:0; left:0; right:0; height:60px;
  background:rgba(6,8,16,.97); border-top:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; gap:16px; padding:0 48px; z-index:900;
}
.adock-label {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.2em;
  color:rgba(255,255,255,.25); text-transform:uppercase; white-space:nowrap; min-width:100px;
}
.adock-player {
  flex:1; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06);
  border-radius:5px; padding:7px 14px;
}
.adock-play {
  width:32px; height:32px; border-radius:50%; background:var(--red); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0; transition:transform .12s; box-shadow:0 0 10px rgba(255,45,32,.4);
}
.adock-play:hover { transform:scale(1.1); }
.adock-info { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.adock-fname {
  font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(255,255,255,.27);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adock-track { height:3px; background:rgba(255,255,255,.07); border-radius:2px; cursor:pointer; }
.adock-fill {
  height:100%; background:linear-gradient(90deg,var(--red),var(--amber));
  border-radius:2px; width:0%; transition:width .25s linear;
}
.adock-time { font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(255,255,255,.22); white-space:nowrap; }
.adock-vol { display:flex; align-items:center; gap:6px; }
.adock-vol input { width:70px; accent-color:var(--red); }
.adock-load-btn {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan); border:1px solid rgba(0,229,255,.2);
  background:rgba(0,229,255,.04); padding:6px 12px; border-radius:3px;
  cursor:pointer; white-space:nowrap; transition:background .15s;
}
.adock-load-btn:hover { background:rgba(0,229,255,.1); }

/* ── NAVIGAZIONE ──────────────────────────────────────── */
#nav {
  position:fixed; bottom:60px; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 48px; z-index:800;
}
.nav-btn {
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.08); background:rgba(6,8,16,.7);
  padding:8px 20px; cursor:pointer; transition:color .2s, border-color .2s;
  backdrop-filter:blur(6px);
}
.nav-btn:hover { color:#fff; border-color:var(--red); }
.nav-btn:disabled { opacity:.18; cursor:default; }
.nav-progress { flex:1; height:2px; background:rgba(255,255,255,.07); margin:0 20px; border-radius:1px; overflow:hidden; }
.nav-fill { height:100%; background:linear-gradient(90deg,var(--red),var(--amber)); transition:width .4s ease; }

/* ── ANIMAZIONI COMUNI (usate da tutte le slide) ──────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 6px var(--red),0 0 14px rgba(255,45,32,.4); }
  50%      { box-shadow:0 0 14px var(--red),0 0 30px rgba(255,45,32,.8); }
}
@keyframes glitch1 {
  0%,88%,100%{transform:translateX(0);opacity:0}
  90%{transform:translateX(-5px);opacity:.7}
  93%{transform:translateX(3px);opacity:.7}
  96%{transform:translateX(0);opacity:0}
}
@keyframes glitch2 {
  0%,88%,100%{transform:translateX(0);opacity:0}
  89%{transform:translateX(5px);opacity:.7}
  92%{transform:translateX(-3px);opacity:.7}
  95%{transform:translateX(0);opacity:0}
}