/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Inter", sans-serif;
  background: #05070d;
  color: #ffffff;
}

/* SCENE */
.scene {
  position: relative;
  height: 100vh;
  width: 100%;
  background: url("bg.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* AURORA + FOG */
.fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 40% at 25% 15%, rgba(120,255,220,0.35), transparent 60%),
    radial-gradient(45% 30% at 75% 25%, rgba(120,140,255,0.35), transparent 65%),
    linear-gradient(to top, rgba(5,7,13,0.9), rgba(5,7,13,0.25));
  pointer-events: none;
  z-index: 1;
}

/* TITLE */
.title-block {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}

.title-block h1 {
  font-family: "Anton", sans-serif;
  font-size: clamp(3.5rem, 9vw, 9rem); /* smaller but strong */
  letter-spacing: 0.14em;
  text-transform: uppercase;

  background: linear-gradient(90deg, #6fffd2, #6b8cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 25px rgba(120,255,220,0.35),
    0 0 60px rgba(120,160,255,0.25);
}

.title-block p {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* HUD BUTTONS */
.hud {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  z-index: 4;
}

.hud-btn {
  min-width: 180px;
  padding: 0.9rem 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  text-decoration: none;

  border-radius: 10px;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

/* PRIMARY */
.hud-btn.primary {
  background: linear-gradient(135deg, #6fffd2, #6b8cff);
  color: #05070d;
  box-shadow:
    0 0 25px rgba(120,255,220,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

.hud-btn.primary:hover {
  transform: translateX(-6px);
  box-shadow:
    0 0 45px rgba(120,255,220,0.75);
}

/* SECONDARY */
.hud-btn.secondary {
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}

.hud-btn.secondary:hover {
  background: rgba(255,255,255,0.08);
}

/* PARTICLES / CONFETTI (SUBTLE) */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(120,255,220,0.8);
  border-radius: 50%;
  animation: float 12s linear infinite;
  opacity: 0.6;
}

.particles span:nth-child(even) {
  background: rgba(120,140,255,0.8);
}

.legal-links {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  display: flex;
  gap: 1.4rem;
  z-index: 4;
}

.legal-links a {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  transition: color 0.25s ease;
}

.legal-links a:hover {
  color: #6fffd2;
}


.particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.particles span:nth-child(2) { left: 20%; animation-delay: 2s; }
.particles span:nth-child(3) { left: 35%; animation-delay: 4s; }
.particles span:nth-child(4) { left: 50%; animation-delay: 1s; }
.particles span:nth-child(5) { left: 65%; animation-delay: 3s; }
.particles span:nth-child(6) { left: 75%; animation-delay: 5s; }
.particles span:nth-child(7) { left: 85%; animation-delay: 6s; }
.particles span:nth-child(8) { left: 30%; animation-delay: 7s; }
.particles span:nth-child(9) { left: 55%; animation-delay: 8s; }
.particles span:nth-child(10){ left: 90%; animation-delay: 9s; }

@keyframes float {
  0% {
    transform: translateY(100vh) scale(0.6);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}