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

body {
  background: radial-gradient(circle at center, #0a0015, black 70%);
  color: white;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  animation: backgroundIdle 8s ease-in-out infinite;
  font-family: 'Orbitron', sans-serif;
  animation: breathe 12s ease-in-out infinite;

}

/* Fondo respirando antes del scroll */
@keyframes backgroundIdle {
  0% { background-position: 50% 50%; }
  50% { background-position: 48% 52%; }
  100% { background-position: 50% 50%; }
}

@keyframes breathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
}

.intro-text {
  font-size: 3rem;
  opacity: 0;
  animation: fadeInText 2s ease forwards;
}

/* ========================= */
/* TEXTO ESTILO VHS */
/* ========================= */

.intro-text, .middle h2 {
  color: #f4c70f; /* amarillo dorado */
  font-family: 'Orbitron', sans-serif; /* cambia si quieres otra fuente */
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;

  
  
  /* Fade-in / animación de opacidad */
  opacity: 1;
  transition: all 0.4s ease;
  
  /* Saturación, contraste y brillo para intensidad */
  filter: contrast(1.5) saturate(1.8) brightness(1.05);

  /* Glitch / VHS con text-shadow sutil */
  text-shadow:
    2px 0 #ff00ff,  /* canal magenta desplazado */
    -2px 0 #00ffff; /* canal cyan desplazado */

  /* Preparado para overlays de ruido o filtros adicionales */
  /* Puedes añadir: backdrop-filter, mix-blend-mode o animaciones de jitter */
}

.yellow-glow {
  color: #f4c70f;
  text-shadow:
    0 0 5px rgba(244,199,15,0.4),
    0 0 15px rgba(244,199,15,0.25),
    0 0 30px rgba(244,199,15,0.15);
  transition: text-shadow 0.4s ease;
}

@keyframes fadeInText {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ghost {
  width: 300px;
  margin-top: 20px;
  transition: transform 0.2s linear, filter 0.2s linear;
}

/* Micro flotación antes del scroll */
.ghost.idle {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.middle {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.cta {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s ease;
}

.cta.active {
  opacity: 1;
  transform: scale(1);
}

/* ========================= */
/* CTA FINAL */
/* ========================= */

.song-logo {
  width: 350px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.cta.active .song-logo {
  opacity: 1;
  transform: translateY(0);
}

.cta-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
}

.btn {
  padding: 12px 28px;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 1px;
  border-radius: 30px;
  transition: all 0.4s ease;
  border: 1px solid white;
}

.btn.primary {
  background: white;
  color: black;
}

.btn.primary:hover {
  background: #d0b3ff;
  border-color: #d0b3ff;
}

.btn.secondary {
  background: transparent;
  color: white;
}

.btn.secondary:hover {
  background: rgba(255,255,255,0.1);
}

.brand-logo {
  width: 120px;
  opacity: 0.2;
  transition: opacity 0.6s ease;
}

.brand-logo:hover {
  opacity: 0.5;
}

.cta {
  position: relative;
  overflow: hidden;
}

/* Asegura que el fantasma siempre esté arriba del video final */
.ghost {
  position: relative; /* ya debe estar */
  z-index: 2; /* superior a todo dentro del CTA */
}

/* CTA y Video */
.cta-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporción y llena toda la sección */
  z-index: 0; /* detrás de todo el contenido */
  pointer-events:none;
}

.cta > *:not(.cta-video) {
  position: relative;
  z-index: 1; /* asegura que el contenido esté encima del video */
}


/* ========================= */
/* OVERLAY DE RUIDO VHS ANIMADO */
/* ========================= */
.noise-overlay {
  position: fixed; /* siempre sobre la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* no interfiere con clicks */
  background: url('assets/noise.png') repeat;
  opacity: 0.2; /* sutil, ajustable */
  z-index: 999; /* sobre todo el texto, pero debajo del CTA si quieres */
  
  /* Animación de jitter para efecto VHS */
  animation: noiseMove 0.2s infinite;
}

@keyframes noiseMove {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(0,0); }
}

#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* detrás del fantasma y textos */
}

/* ========================= */
/* SCROLL INDICATOR */
/* ========================= */

.scroll-indicator{
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
opacity:0.8;
pointer-events:none;
}

.scroll-text{

font-size:12px;
letter-spacing:2px;
color:#f4c70f;

text-shadow:
0 0 5px rgba(244,199,15,0.6),
0 0 10px rgba(244,199,15,0.4);

}

/* icono estilo minimal */

.scroll-icon{

width:18px;
height:28px;
border:2px solid #f4c70f;
border-radius:12px;
position:relative;

}

/* puntito dentro */

.scroll-icon::before{

content:"";
width:4px;
height:4px;
background:#f4c70f;

border-radius:50%;

position:absolute;
left:50%;
top:6px;

transform:translateX(-50%);

animation:scrollMove 1.8s infinite;

}

/* animación */

@keyframes scrollMove{

0%{
opacity:0;
transform:translate(-50%,0);
}

40%{
opacity:1;
}

100%{
opacity:0;
transform:translate(-50%,10px);
}

}

/* ========================= */
/* MOBILE FIX */
/* ========================= */

@media screen and (max-width:768px){

.song-logo{

width:85%;
max-width:420px;

}

.release-btn,
.yt-btn{

font-size:22px;
padding:18px 32px;

width:85%;
max-width:360px;

}

.countdown{

font-size:22px;

}

}