@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Permanent+Marker&family=Rock+Salt&family=Rubik+Dirt&family=Shadows+Into+Light&family=Poppins:wght@400;600&display=swap');

/* === VARIABLES DE COLOR === */
:root {
  --bit-black: #0a0a0a;
  --bonus-blue: #2d7ff9;
  --power-up-pink: #ff2d95;
  --glitch-green: #00ff88;
  --color-black: #000000; /* renombrado para evitar confusión */
  --transition: transform 0.3s ease;
  --transform-origin: center top;
  --gradient-colors: linear-gradient(90deg, #00f5a0, #ff007f, #00c3ff, #ffae00);
}

/* === SECCIÓN HERO === */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000018; /* aquí cambia de transparent a tu bitblack */
}


/* Título enorme en fondo */
.hero h1.animated-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 15vw, 12rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  z-index: 0;
  background: var(--gradient-colors);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: morphFont 5s infinite ease-in-out, moveGradient 25s infinite linear, glowPulse 10s infinite ease-in-out;
  max-width: 90vw;
  max-height: 85vh;
  white-space: normal;
  word-break: break-word;
  will-change: transform, opacity;
  text-align: center;
}


.hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-content p {
  color: var(--color-black);
  background: #ffe605e6;
  padding: 1.4rem 2.4rem;
  border-radius: 1.5rem;
  box-shadow: 0 0 12px rgba(255, 230, 5, 0.5), 0 4px 20px rgba(178, 207, 9, 0.2);
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  backdrop-filter: blur(3px);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  margin: 0;
}

.hero-content p:hover {
  transform: scale(1.05);
  background: rgba(255, 230, 5, 1);
  box-shadow: 0 0 20px rgba(255, 230, 5, 0.7), 0 6px 25px rgba(178, 207, 9, 0.3);
}

.hero-content a.btn {
  text-decoration: none;
  color: #111;
  background: linear-gradient(90deg, #00f5a0, #ff007f, #00c3ff, #ffae00);
  background-size: 400% 400%;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 245, 160, 0.6), 0 4px 12px rgba(255, 0, 127, 0.4);
  transition: all 0.4s ease;
  display: inline-block;
  animation: gradientButton 6s ease infinite;
}

.hero-content a.btn:hover {
  color: #fff;
  background-position: 100% 0;
  box-shadow: 0 0 18px rgba(0, 245, 160, 0.9), 0 0 22px rgba(255, 0, 127, 0.7);
  transform: scale(1.08);
  text-shadow: 0 0 6px #fff;
}

/* === ANIMACIÓN GRADIENTE BOTÓN === */
@keyframes gradientButton {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

.hero a {
  animation: gradientButton 6s ease infinite;
}

/* === ANIMACIÓN DE CAMBIO DE FUENTE === */
@keyframes morphFont {
  0%, 20% {
    font-family: 'Permanent Marker', cursive;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  25%, 40% {
    font-family: 'Bangers', cursive;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.03);
  }
  45%, 60% {
    font-family: 'Rubik Dirt', cursive;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  65%, 80% {
    font-family: 'Shadows Into Light', cursive;
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.02);
  }
  85%, 100% {
    font-family: 'Rock Salt', cursive;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* === MOVIMIENTO LENTO DEL GRADIENTE === */
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === EFECTO DE BRILLO SUAVE === */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.3)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 0, 127, 0.6)); }
}

/* === RESPONSIVO === */
@media (max-width: 768px) {
  .hero h1 { font-size: 20vh; max-width: 90vw; max-height: 80vh; line-height: 1.05; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 25vh; max-width: 90vw; max-height: 70vh; line-height: 1.05; }
  .hero p { font-size: 1.1rem; padding: 1rem 1.5rem; }
}