/* Algemeen en achtergrond */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(270deg, #ff416c, #ff4b2b, #1e3c72, #2a5298);
  background-size: 800% 800%;
  color: #fff;
  text-align: center;
  animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Header */
header {
  padding: 50px 20px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

header .logo {
  margin-bottom: 15px;
}

header .logo img {
  width: 120px;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(255,75,43,0.6), 0 0 40px rgba(255,65,108,0.5);
  animation: logoPulse 3s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255,75,43,0.6), 0 0 40px rgba(255,65,108,0.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 35px rgba(255,75,43,0.8), 0 0 60px rgba(255,65,108,0.7); }
}

header .logo img:hover {
  transform: scale(1.2);
  box-shadow: 0 8px 30px rgba(255,75,43,0.8), 0 0 20px rgba(255,65,108,0.5);
}

.animated-header {
  font-size: 3em;
  margin: 10px 0;
  animation: headerMove 4s ease-in-out infinite, neonGlow 3s ease-in-out infinite;
}

@keyframes headerMove {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes neonGlow {
  0%, 100% { text-shadow: 0 0 5px #ff4b2b, 0 0 10px #ff416c; }
  50% { text-shadow: 0 0 20px #ff4b2b, 0 0 40px #ff416c; }
}

header .tagline {
  font-size: 1.2em;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Main content */
main {
  padding: 30px 20px;
}

/* Live player */
.player {
  margin-bottom: 40px;
}

.live-dot {
  color: red;
  font-weight: bold;
  margin-left: 10px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

audio {
  width: 80%;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(255,65,108,0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

audio:playing {
  box-shadow: 0 0 30px #ff416c, 0 0 50px #ff4b2b, 0 0 70px #ff65a1;
  transform: scale(1.02);
}

/* Stations knoppen */
.station-buttons button {
  background: #fff;
  color: #ff4b2b;
  border: none;
  padding: 15px 25px;
  margin: 10px;
  font-size: 1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.station-buttons button:hover {
  background: #ff4b2b;
  color: #fff;
  transform: scale(1.1) rotate(-2deg);
}

.station-buttons button.active {
  background: #ff416c;
  color: #fff;
  box-shadow: 0 0 25px #ff416c, 0 0 35px #ff4b2b;
}

/* Info sectie */
.info h2 {
  font-size: 2em;
  margin-bottom: 10px;
  animation: fadeIn 2s ease forwards;
}

.info p {
  font-size: 1.1em;
  animation: fadeIn 2.5s ease forwards;
}

/* Footer */
footer {
  padding: 20px;
  background: rgba(0,0,0,0.3);
  position: fixed;
  width: 100%;
  bottom: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.4);
}

/* Responsive */
@media (max-width: 600px) {
  header h1 {
    font-size: 2em;
  }

  .station-buttons button {
    padding: 12px 20px;
    margin: 5px;
    font-size: 0.9em;
  }

  audio {
    width: 95%;
  }
}