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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
  filter: hue-rotate(0deg);
  animation: bgHueRotate 20s linear infinite;
}

@keyframes bgHueRotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
}


/* Neon title effect */
.neon {
  font-size: 4rem;
  color: #fff;
  filter: hue-rotate(180deg);
  text-shadow:
    0 0 5px  #fff,
    0 0 10px #fff,
    0 0 20px #f0f,
    0 0 30px #f0f,
    0 0 40px #f0f,
    0 0 55px #f0f,
    0 0 75px #f0f;
  animation: neonPulse 1.5s ease-in-out infinite alternate;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .neon {
    font-size: 2.5rem;
    white-space: normal;
    word-break: keep-all;
  }
}

@keyframes neonPulse {
  from {
    text-shadow:
      0 0 5px  #fff,
      0 0 10px #fff,
      0 0 20px #f0f,
      0 0 30px #f0f,
      0 0 40px #f0f,
      0 0 55px #f0f,
      0 0 75px #f0f;
  }
  to {
    text-shadow:
      0 0 20px #fff,
      0 0 30px #fff,
      0 0 40px #f0f,
      0 0 50px #f0f,
      0 0 60px #f0f,
      0 0 80px #f0f,
      0 0 100px #f0f;
  }
}

/* Floating welcome phrases */
.floating-phrase {
  position: absolute;
  z-index: 2;
  font-size: 3rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  animation: floatPhrase 3s linear forwards;
}

@keyframes floatPhrase {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
  30% {
    opacity: 1;
    transform: scale(0.85) translateY(5px);
  }
  70% {
    opacity: 1;
    transform: scale(1.15) translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: scale(1.3) translateY(-10px);
  }
}