/* ------------------- FONTS ------------------- */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* ------------------- BODY ------------------- */
body {
  margin:0; padding:0;
  font-family:'VT323', monospace;
  color:#f5f5f5;
  background: black url('https://synapt-radio.neocities.org/file_00000000360871f884a237a63c187734.png') center/cover no-repeat fixed;
  overflow-x:hidden; position:relative;
  filter: contrast(1.2) brightness(0.9);
}

/* ------------------- OVERLAYS ------------------- */
.scanlines,.noise,.fog{
  position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none;
}
.scanlines{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  z-index:4;
}
.noise{
  background:url("https://synapt-radio.neocities.org/scanlines.png");
  opacity:.12;
  animation:noise 15s linear infinite;
  z-index:5;
}
.fog{
  background: rgba(0,0,0,.25);
  z-index:6;
}
@keyframes noise{to{background-position:600px 600px;}}

/* ------------------- PARTICULAS ------------------- */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;}
.particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,0.2);border-radius:50%;animation:float linear infinite;}
@keyframes float{0%{transform:translateY(100vh) translateX(0) scale(1);opacity:0}50%{opacity:0.5}100%{transform:translateY(-10vh) translateX(50px) scale(0.5);opacity:0}}

/* ------------------- MENU ------------------- */
.menu{
  position:sticky; top:0; z-index:20;
  background:rgba(0,0,0,.85);
  border:2px solid #00ff00;
  box-shadow:0 0 15px red,0 0 25px #00ff00 inset;
  text-align:center;
  padding:12px;
  animation:glitch-border 1s infinite;
}
.menu a{
  color:#00ff00;
  margin:0 15px;
  text-decoration:none;
  text-shadow:0 0 6px red;
  transition:0.2s;
}
.menu a:hover{
  color:red;
  text-shadow:0 0 15px red, 0 0 6px #00ff00;
  animation: glitch-text 0.3s infinite;
}
@keyframes glitch-text{
  0%{text-shadow: 2px 0 4px red,-2px 2 4px #00ff00;}
  25%{text-shadow: -2px 2 6px red,2px -2 6px #00ff00;}
  50%{text-shadow: 2px -2 6px red,-2px 2 6px #00ff00;}
  75%{text-shadow: -2px -2 4px red,2px 2 4px #00ff00;}
  100%{text-shadow: 2px 0 4px red,-2px 2 4px #00ff00;}
}

/* ------------------- BANNER ------------------- */
.banner{
  text-align:center;
  padding:30px 10px;
  background:rgba(0,0,0,.75);
  z-index:10;
  position:relative;
}
.banner h1{
  font-size:3em;
  color:#00ff00;
  text-shadow:0 0 12px red;
  animation:flicker 1.8s infinite;
}
.banner p{
  font-family:'Roboto Mono', monospace;
  color:#f5f5f5;
  text-shadow:0 0 6px black;
}
@keyframes flicker{
  0%,18%,22%,100%{opacity:1;}
  20%,21%{opacity:.3;}
}

/* ------------------- PLAYER GLITCH ------------------- */
.player-glitch{
  display:inline-block;
  padding:20px;
  border:3px solid #00ff00;
  box-shadow:0 0 25px red,0 0 25px #00ff00 inset;
  animation:glitch-border 1s infinite, flicker 1.5s infinite;
  text-align:center;
  border-radius:12px;
  position:relative;
  max-width:600px;
  margin:20px auto;
  background:rgba(0,0,0,0.55);
}
.player-glitch::after{
  content:"🎧 ¡Toca para escuchar!";
  position:absolute; bottom:-25px; left:50%; transform:translateX(-50%);
  font-family:'VT323', monospace;
  color:#ff0000;
  text-shadow:0 0 8px #00ff00;
  font-size:1em;
  animation:flicker 1.5s infinite;
}

/* ------------------- FOLDER GLITCH ------------------- */
.folder-glitch{
  max-width:900px;
  margin:30px auto;
  padding:25px;
  border:3px solid #00ff00;
  box-shadow:0 0 25px red,0 0 25px #00ff00 inset;
  border-radius:12px;
  background:rgba(0,0,0,.7);
  text-align:center;
  position:relative;
  animation:glitch-border 1s infinite;
  transition:0.3s;
}
.folder-glitch:hover{box-shadow:0 0 40px red,0 0 40px #00ff00 inset; transform:translateY(-2px);}
.folder-glitch h2{font-size:2em;color:#00ff00;text-shadow:0 0 6px red;margin-bottom:15px;}
.folder-glitch p{font-size:1.1em;color:#f5f5f5;line-height:1.5em;}
.folder-glitch::before{
  content:"📁 Archivos Prohibidos";
  position:absolute; top:-25px; left:50%; transform:translateX(-50%);
  font-size:1.5em;color:red;text-shadow:0 0 8px #00ff00;
}

/* ------------------- REC / TIMER ------------------- */
.rec-timer{
  position:fixed; top:10px; right:10px; z-index:30;
  color:red; font-family:'VT323', monospace; font-size:1.2em;
  text-shadow:0 0 8px #00ff00;
  pointer-events:none;
  animation:flicker 1.2s infinite;
}

/* ------------------- FOOTER ------------------- */
footer{
  text-align:center;
  padding:20px;
  background:rgba(0,0,0,.85);
  border-top:2px solid red;
  position:relative;
  z-index:10;
}

/* ------------------- BORDER GLITCH ------------------- */
@keyframes glitch-border{
  0%{box-shadow:0 0 15px #ff0000,0 0 25px #00ff00 inset;}
  25%{box-shadow:0 0 20px #ff0000,0 0 30px #00ff00 inset;}
  50%{box-shadow:-2px 2 25px #ff0000,2px -2 25px #00ff00 inset;}
  75%{box-shadow:2px -2 20px #ff0000,-2px 2 20px #00ff00 inset;}
  100%{box-shadow:0 0 15px #ff0000,0 0 25px #00ff00 inset;}
}