:root {
  --bg1: #060b1a;
  --bg2: #0b1633;
  --star: rgba(255, 255, 255, 0.6);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: radial-gradient(1200px 60% at 70% -10%, #1a2a6c11, transparent),
    radial-gradient(900px 50% at 20% -5%, #b21f1f11, transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: white;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      1px 1px at 10% 20%,
      var(--star),
      transparent
    ),
    radial-gradient(1px 1px at 30% 80%, var(--star), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--star), transparent),
    radial-gradient(1px 1px at 70% 10%, var(--star), transparent),
    radial-gradient(1px 1px at 80% 70%, var(--star), transparent),
    radial-gradient(1px 1px at 20% 60%, var(--star), transparent),
    radial-gradient(1px 1px at 90% 30%, var(--star), transparent),
    radial-gradient(1px 1px at 40% 30%, var(--star), transparent),
    radial-gradient(1px 1px at 60% 70%, var(--star), transparent);
  opacity: 0.6;
}
.stars::after {
  filter: blur(0.5px);
  opacity: 0.4;
}

.sky {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.comet {
  --hue: 200;
  --delay: 0s;
  --dur: 4s;
  --x: 50;

  position: absolute;
  top: -20vh;
  left: calc(var(--x) * 1vw);
  width: 140px;
  height: 2px;
  transform: rotate(40deg);
  transform-origin: right center;
  animation: drop var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.comet::before {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--hue) 90% 70%);
  box-shadow: 0 0 8px hsl(var(--hue) 90% 70%), 0 0 18px hsl(var(--hue) 90% 70%),
    0 0 28px hsl(var(--hue) 90% 70%);
}

.comet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 12px;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsla(var(--hue) 90% 70% / 0.05) 20%,
    hsla(var(--hue) 90% 70% / 0.3) 60%,
    hsla(var(--hue) 90% 70% / 0.95) 95%,
    hsla(var(--hue) 90% 70% / 0) 100%
  );
  filter: blur(0.3px);
  border-radius: 999px;
}

@keyframes drop {
  0% {
    transform: translate3d(0, -20vh, 0) rotate(40deg);
  }
  100% {
    transform: translate3d(60vw, 120vh, 0) rotate(40deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comet {
    animation: none;
  }
}

.title {
  inset: 20px auto auto 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-shadow: 0 1px 0 #000a, 0 2px 6px #0006;
  user-select: none;
  font-size: 27px;
}

.link {
  display: inline-block;
  font-size: 1rem;
  padding: 0.7em 1.4em;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 2px solid hsla(220, 90%, 70%, 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, hsla(220, 90%, 60%, 0.15), transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 6px hsla(220, 90%, 70%, 0.3);
  transition: all 0.35s ease;
}

.link:hover {
  color: #fff;
  border-color: hsla(220, 90%, 70%, 0.95);
  background: linear-gradient(135deg, hsla(220, 90%, 70%, 0.25), transparent);
  box-shadow: 
    0 0 8px hsla(220, 90%, 70%, 0.6),
    0 0 20px hsla(220, 90%, 70%, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.link:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 4px hsla(220, 90%, 70%, 0.5);
}
.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    text-align: center;
    padding: 25px;
}
.music-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1rem;
  padding: 0.7em 1.4em;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 2px solid hsla(280, 90%, 70%, 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, hsla(280, 90%, 60%, 0.15), transparent);
  backdrop-filter: blur(4px);
  cursor: pointer;
  box-shadow: 0 0 6px hsla(280, 90%, 70%, 0.3);
  transition: all 0.35s ease;
  margin-left: 10px;
}

.music-btn:hover {
  border-color: hsla(280, 90%, 70%, 1);
  background: linear-gradient(135deg, hsla(280, 90%, 70%, 0.25), transparent);
  box-shadow: 
    0 0 8px hsla(280, 90%, 70%, 0.6),
    0 0 20px hsla(280, 90%, 70%, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.music-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 0 4px hsla(280, 90%, 70%, 0.4);
}

/* Optional animated pulse to show “music is ON” */
.music-btn.active {
  animation: pulse 1.5s infinite;
  border-color: hsla(150, 90%, 70%, 1);
  box-shadow: 0 0 10px hsla(150, 90%, 70%, 0.8);
}

@keyframes pulse {
  0%   { box-shadow: 0 0 6px hsla(150, 90%, 70%, 0.6); }
  50%  { box-shadow: 0 0 20px hsla(150, 90%, 70%, 0.8); }
  100% { box-shadow: 0 0 6px hsla(150, 90%, 70%, 0.6); }
}


@media screen and (max-width: 500px) {
    .title {
        font-size: 24px;
    }
    .row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .music-btn {
      margin-left: 0;
    }
}