/* MOONwalker Ranch V2*/
/* ============================ COLOR PALETTE ============================ */
:root {
  --VortexViolet: #830cde;
  --PlasmaPurple: #A55AFF;
  --NuclearFuscia:#dc4ce8;
  --ParticlePink: #FFC7FF;
  --AlphaAqua: #67FEBD;
  --AlphaGlow1: rgba(103,254,189, 0.2);
  --AlphaGlow2: rgba(103,254,189, 0.5);
  --AlphaGlow3: rgba(103,254,189, 0.8);
  --AquaAura: #00ffff;
  --AuraGlow1: rgba(0,255,255, 0.2);
  --AuraGlow2: rgba(0,255,255, 0.5);
  --AuraGlow3: rgba(0,255,255, 0.8);
  --AtomicAqua: #9EFF9E;
  --RadioactiveGreen: #58e84c;
  --HalfLifeLime: #f3ffe5;
  --UraniumGreen: #75FB1E;
  --White: #FFFFFF; 
  --Black: #000000;
}

/* ============================ FONTS ============================ */
@font-face {
  font-family: 'GothNerd'; 
  src: url('../fonts/ScienceGothic.ttf') format('truetype'); 
}

@font-face {
  font-family: 'SpaceLetters'; 
  src: url('../fonts/Orbitron-Bold.ttf') format('truetype'); 
}



#stars {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            z-index: 0;
        }
.star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;
            animation: twinkle 4s infinite;
        }
@keyframes twinkle {
            0%,100% { opacity: 0.4; transform: scale(1); }
            50%     { opacity: 1; transform: scale(1.4); }
        }



.shooting-star {
  position: fixed;
  top: -10px;
  left: -30%;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  opacity: 0.6;
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 0;
  animation: shoot 1.2s ease-out forwards;
}

@keyframes shoot {
  to {
    transform: translate(160vw, 110vh) rotate(7deg);
    opacity: 0;
  }
}

@media (max-width: 933px) and (orientation: portrait) {
  .shooting-star{
    opacity: 0;
  }
}

/* ============================ BASE STYLES ============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {

    color: #FFFFFF;
    background: linear-gradient(to bottom, #000000, #0f001e, #270142);
    background-repeat: no-repeat; 
    background-attachment: fixed;
}



.btn-quantum-pulse {
  background: linear-gradient(45deg, var(--VortexViolet), var(--NuclearFuscia));
  color: var(--White);
  border: 2px solid var(--ParticlePink);
  padding: 12px 24px;
  font-family: 'GothNerd', sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: block;
  margin: 2rem auto;
  box-shadow: 0 0 20px var(--VortexGlow2);
}

.btn-quantum-pulse:hover {
  background: linear-gradient(45deg, var(--NuclearFuscia), var(--AlphaAqua));
  transform: scale(1.05);
  box-shadow: 0 0 40px var(--NuclearFuscia);
}