/* ============================================
   LANDING CSS - Página de entrada con imagen
   ============================================ */

/* ===== OCULTAR NAVEGACIÓN EN LANDING ===== */
/* Ocultar navegación cuando el landing está visible */
body:not(.landing-hidden) .main-nav {
    display: none !important;
}

/* Ocultar reproductor de música en landing */
body:not(.landing-hidden) .music-player-icon {
    display: none !important;
}

/* Mostrar navegación solo cuando el landing está oculto */
body.landing-hidden .main-nav {
    display: block !important;
}

body.landing-hidden .music-player-icon {
    display: flex !important;
}
/* ============================================ */

.landing-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bloquear scroll cuando landing está visible */
body:has(.landing-section:not([style*="display: none"])) {
    overflow: hidden;
    height: 100vh;
}

/* ===== BACKGROUND IMAGE ===== */
.landing-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-base);
    background-color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Luz azul difuminada superior izquierda - subida 300px */
.landing-background::before {
    content: '';
    position: absolute;
    top: -300px;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.8) 0%, rgba(0, 150, 255, 0.5) 40%, transparent 70%);
    filter: blur(60px);
    animation: flicker-blue 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes flicker-blue {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(60px) brightness(1.2);
    }
    15% {
        opacity: 0.7;
        transform: scale(1.1);
        filter: blur(65px) brightness(1.5);
    }
    25% {
        opacity: 1;
        transform: scale(1);
        filter: blur(60px) brightness(1.3);
    }
    40% {
        opacity: 0.8;
        transform: scale(1.05);
        filter: blur(70px) brightness(1.4);
    }
    55% {
        opacity: 1;
        transform: scale(1);
        filter: blur(60px) brightness(1.2);
    }
    70% {
        opacity: 0.6;
        transform: scale(1.15);
        filter: blur(75px) brightness(1.6);
    }
    85% {
        opacity: 0.9;
        transform: scale(1.02);
        filter: blur(65px) brightness(1.3);
    }
}

/* Luz verde difuminada superior derecha */
.landing-background::after {
    content: '';
    position: absolute;
    top: calc(-5% - 300px);
    right: 25%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.7) 0%, rgba(0, 255, 100, 0.45) 40%, transparent 70%);
    filter: blur(65px);
    animation: flicker-green 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes flicker-green {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(65px) brightness(1.3);
    }
    10% {
        opacity: 1;
        transform: scale(1.08);
        filter: blur(70px) brightness(1.5);
    }
    30% {
        opacity: 0.6;
        transform: scale(1.12);
        filter: blur(75px) brightness(1.7);
    }
    45% {
        opacity: 0.9;
        transform: scale(1.03);
        filter: blur(68px) brightness(1.4);
    }
    60% {
        opacity: 1;
        transform: scale(1);
        filter: blur(65px) brightness(1.3);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.1);
        filter: blur(72px) brightness(1.6);
    }
    90% {
        opacity: 0.95;
        transform: scale(1.05);
        filter: blur(68px) brightness(1.4);
    }
}

.landing-image {
    width: 1920px;
    height: auto;
    max-width: none;
    display: block;
    /* Imagen con ancho fijo - no se adapta */
    animation: float-sync 12s ease-in-out infinite;
}

@keyframes float-sync {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(8px, -5px);
    }
    20% {
        transform: translate(-6px, 10px);
    }
    30% {
        transform: translate(12px, 3px);
    }
    40% {
        transform: translate(-4px, -8px);
    }
    50% {
        transform: translate(10px, 6px);
    }
    60% {
        transform: translate(-8px, -4px);
    }
    70% {
        transform: translate(5px, 12px);
    }
    80% {
        transform: translate(-10px, -6px);
    }
    90% {
        transform: translate(7px, -10px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* ===== OVERLAY - DESACTIVADO ===== */
.landing-overlay {
    display: none;
}

/* ===== CONTENEDOR DE NEONES - OCULTO ===== */
.neon-container {
    display: none;
}

/* ===== BOTÓN DE ENTRADA - OCULTO ===== */
.enter-button-container {
    display: none;
}

/* ===== INDICADOR DE SCROLL - OCULTO ===== */
.scroll-indicator {
    display: none;
}

/* ===== ZONA INTERACTIVA - Para futuros botones ===== */
.interactive-zone {
    position: absolute;
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
}

.interactive-zone:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* ===== BOTÓN SOBRE LA PANTALLA ===== */
.screen-button-container {
    position: absolute;
    /* Posición fija en píxeles sobre la imagen estática */
    top: 50%;
    left: 50%;
    margin-left: 40px;
    margin-top: -150px;
    z-index: var(--z-dropdown);
    /* Movimiento sincronizado con la imagen */
    animation: float-sync 12s ease-in-out infinite;
}

.screen-enter-button {
    position: relative;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
}

.button-text-glitch {
    position: relative;
    display: inline-block;
    font-family: 'Rajdhani', 'Orbitron', monospace;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00ff88;
    text-shadow: 
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 30px #00ff88,
        0 0 40px #00ff88,
        0 0 70px #00ff88,
        0 0 80px #00ff88,
        0 0 100px #00ff88,
        0 0 150px #00ff88;
    animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 
            0 0 10px #00ff88,
            0 0 20px #00ff88,
            0 0 30px #00ff88,
            0 0 40px #00ff88,
            0 0 70px #00ff88,
            0 0 80px #00ff88,
            0 0 100px #00ff88,
            0 0 150px #00ff88;
    }
    50% {
        text-shadow: 
            0 0 5px #00ff88,
            0 0 10px #00ff88,
            0 0 15px #00ff88,
            0 0 20px #00ff88,
            0 0 35px #00ff88,
            0 0 40px #00ff88,
            0 0 50px #00ff88,
            0 0 75px #00ff88;
    }
}

/* Efecto glitch continuo */
.button-text-glitch::before,
.button-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.button-text-glitch::before {
    color: #00d9ff;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
    text-shadow: 
        -2px 0 #00d9ff,
        0 0 20px #00d9ff;
}

.button-text-glitch::after {
    color: #ff0080;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
    text-shadow: 
        2px 0 #ff0080,
        0 0 20px #ff0080;
}

@keyframes glitch-anim-1 {
    0% { 
        clip-path: inset(40% 0 61% 0);
        transform: translate(-2px, 2px);
    }
    20% { 
        clip-path: inset(92% 0 1% 0);
        transform: translate(2px, -2px);
    }
    40% { 
        clip-path: inset(43% 0 1% 0);
        transform: translate(-2px, 2px);
    }
    60% { 
        clip-path: inset(25% 0 58% 0);
        transform: translate(2px, -2px);
    }
    80% { 
        clip-path: inset(54% 0 7% 0);
        transform: translate(-2px, 2px);
    }
    100% { 
        clip-path: inset(58% 0 43% 0);
        transform: translate(2px, -2px);
    }
}

@keyframes glitch-anim-2 {
    0% { 
        clip-path: inset(65% 0 10% 0);
        transform: translate(3px, -3px);
    }
    20% { 
        clip-path: inset(10% 0 85% 0);
        transform: translate(-3px, 3px);
    }
    40% { 
        clip-path: inset(50% 0 30% 0);
        transform: translate(3px, -3px);
    }
    60% { 
        clip-path: inset(30% 0 70% 0);
        transform: translate(-3px, 3px);
    }
    80% { 
        clip-path: inset(80% 0 15% 0);
        transform: translate(3px, -3px);
    }
    100% { 
        clip-path: inset(72% 0 28% 0);
        transform: translate(-3px, 3px);
    }
}

/* Hover effects - glitch más intenso */
.screen-enter-button:hover .button-text-glitch {
    animation: neon-flicker 0.2s infinite, neon-pulse 2s ease-in-out infinite alternate;
    transform: scale(1.05);
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 10px #00ff88,
            0 0 20px #00ff88,
            0 0 30px #00ff88,
            0 0 40px #00ff88,
            0 0 70px #00ff88,
            0 0 80px #00ff88,
            0 0 100px #00ff88,
            0 0 150px #00ff88;
    }
    20%, 24%, 55% {
        opacity: 0.4;
        text-shadow: none;
    }
}

.screen-enter-button:hover .button-text-glitch::before {
    animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
}

.screen-enter-button:hover .button-text-glitch::after {
    animation: glitch-anim-2 0.2s infinite linear alternate-reverse;
}

/* Efecto scan lines */
.screen-enter-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 255, 136, 0.1) 50%,
        transparent 100%
    );
    animation: scan-lines 2s linear infinite;
    pointer-events: none;
}

@keyframes scan-lines {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Active state */
.screen-enter-button:active .button-text-glitch {
    transform: scale(0.95);
    text-shadow: 
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 15px #00ff88;
}

/* ===== EFECTO TEMBLOR EN LA IMAGEN AL HACER HOVER EN EL BOTÓN ===== */
/* Cuando se hace hover sobre el botón, la imagen tiembla DESDE SU POSICIÓN ACTUAL */
body:has(.screen-enter-button:hover) .landing-image {
    animation: float-sync 12s ease-in-out infinite, shake-image-relative 0.08s infinite;
}

/* Cuando se hace hover, el botón también tiembla igual */
body:has(.screen-enter-button:hover) .screen-button-container {
    animation: float-sync 12s ease-in-out infinite, shake-image-relative 0.08s infinite;
}

/* Temblor relativo - se suma a la posición actual sin resetear */
@keyframes shake-image-relative {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-2px, 2px); }
    20% { transform: translate(2px, -2px); }
    30% { transform: translate(-2px, -2px); }
    40% { transform: translate(2px, 2px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, -2px); }
    70% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); }
    90% { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
}

/* Líneas decorativas - NO SE USAN */
.button-lines {
    display: none;
}

/* ===== PREPARADO PARA HOTSPOTS (botones sobre la imagen) ===== */
/* Ejemplo de zonas que crearemos después:
   - Monitor izquierdo
   - Monitor derecho  
   - Cartel "RECESSION"
   - Cartel del corazón
   - Puerta
   - etc.
*/