:root{ --accent:#ff4444; }                         /* neon red */

/* ---- base ---- */
html,body{
  margin:0;height:100%;
  background:#000;
  overflow:hidden;
  filter:contrast(1.1) saturate(1.1);
  font-family:"Courier New",monospace;
}

/* ---- starfield canvas ---- */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ---- CRT scanlines ---- */
#crt-scanlines{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.02) 0px,
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* ---- wrapper ---- */
#app-wrapper{
  position:relative;width:100%;height:100vh;z-index:1;
  pointer-events:none;                 /* ← makes wrapper transparent */
}

/* ---- corners ---- */
.corner{
  position:fixed;padding:8px;font-size:18px;color:var(--accent);
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:auto;                 /* clickable clock area */
}
#corner-top-left  {top:0;left:0;}
#corner-top-right {top:0;right:0;}

/* ---- button ---- */
#changeSkinBtn{
  background:#222;color:var(--accent);
  border:1px solid var(--accent);padding:6px 12px;
  font:18px "Courier New",monospace;cursor:pointer;
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:auto;                 /* keep button interactive */
}
#changeSkinBtn:hover{background:var(--accent);color:#000;}

/* ---- Webamp ---- */
#winamp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:50;
  pointer-events:auto;                 /* player fully interactive  */
}

/* ---- glitch text ---- */
#glitch-text{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  font:18px "Courier New",monospace;color:var(--accent);
  white-space:pre;text-align:center;pointer-events:none;z-index:20;
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
}
#glitch-text .dud{
  color:var(--accent);
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:none;
}

/* 1. Define the floating animation */
@keyframes floatAnimation {
  /* The icon starts at its normal position */
  from {
    transform: translateY(0);
  }
  /* The icon floats up by 6 pixels at the peak of the animation */
  to {
    transform: translateY(-30px);
  }
}

.streaming-links {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  pointer-events: auto;
}

.streaming-links a {
  display: block;
  /* 2. Apply the animation to all links */
  animation-name: floatAnimation;
  animation-duration: 2.2s; /* How long one full up/down cycle takes */
  animation-iteration-count: infinite; /* Loop forever */
  animation-timing-function: ease-in-out; /* Makes the float smooth */
  animation-direction: alternate; /* Makes it go up, then down, then up... */
}

.streaming-links img {
  width: 28px;
  height: 28px;
  display: block;
}

/* 3. Add staggered delays to each icon for the offset effect */
.streaming-links a:nth-child(1) { animation-delay: 0s; }
.streaming-links a:nth-child(2) { animation-delay: 0.3s; }
.streaming-links a:nth-child(3) { animation-delay: 0.6s; }
.streaming-links a:nth-child(4) { animation-delay: 1s; } /* slightly different delay for a more random feel */


/* 4. On hover, pause the float and apply a pop-out effect */
.streaming-links a:hover {
  animation-play-state: paused; /* Stop the float animation */
  transform: scale(1.2) translateY(-4px); /* Make it pop */
  transition: transform 0.2s ease-out; /* Smooth the pop transition */
}