:root {
  --bg-start: #020617;
  --bg-end: #020024;
  --accent: #facc15;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", system-ui, sans-serif;
}

body {
  height: 100vh;
  background: radial-gradient(circle at top, #0b1a3a 0%, var(--bg-start) 60%);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
}

/* Starfield */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 60%, #fff, transparent),
    radial-gradient(1px 1px at 50% 90%, #fff, transparent),
    radial-gradient(1px 1px at 90% 20%, #fff, transparent),
    radial-gradient(1px 1px at 10% 70%, #fff, transparent);
  opacity: 0.4;
}

.scene {
  position: relative;
  text-align: center;
  z-index: 2;
}

/* Countdown */
.countdown {
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  opacity: 0;
  animation: pop 1s forwards;
}

/* Year */
.year {
  position: relative;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  margin-top: 1rem;
}

.year span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

#yearOld.show {
  animation: fadeOut 1.5s forwards;
}

#yearNew.show {
  animation: slideUp 1.5s forwards;
  color: var(--accent);
}

/* Message */
.message {
  margin-top: -2rem;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
}

.message.show {
  animation: glowIn 2s forwards;
}

/* Animations */
@keyframes pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes glowIn {
  to {
    opacity: 1;
    text-shadow: 0 0 20px var(--accent);
  }
}

/* Canvas */
canvas {
  position: absolute;
  inset: 0;
}