/* ================================
   PITIUPI PRESENTATION - SLIDE 1 STYLES
   Diapositiva interactiva con mundo 3D
   ================================ */

/* ================================
   SLIDE 1 - CONFIGURACIÓN INTERACTIVA
   ================================ */

   .slide[data-slide="1"] {
    cursor: pointer;
}

.slide-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent; /* Sin interferencias */
}

/* ================================
   INDICADOR DE CLICK
   ================================ */

.click-indicator {
    position: absolute;
    bottom: 8rem; /* Más arriba para no chocar con navegación */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    animation: pulseIndicator 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(51, 204, 0, 0.6);
}

@keyframes pulseIndicator {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.click-arrow {
    font-size: 1.3rem;
    animation: bounceArrow 1.5s ease-in-out infinite;
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Ocultar indicador cuando todos los pasos están completos */
.slide[data-step="5"] .click-indicator {
    opacity: 0;
    pointer-events: none;
}

/* ================================
   ANIMACIONES DE PASOS - 5 CLICKS
   ================================ */

/* Contenedor de estadísticas */
.stat-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: absolute;
}

/* Todos los pasos ocultos por defecto */
.slide[data-slide="1"] .step-1,
.slide[data-slide="1"] .step-3,
.slide[data-slide="1"] .step-4,
.slide[data-slide="1"] .step-5 {
    opacity: 0;
    pointer-events: none;
}

/* ================================
   PASO 1: PREGUNTA APARECE CENTRADA
   ================================ */

.slide[data-slide="1"][data-step="1"] .step-1 {
    animation: appearCenter 0.6s ease-out forwards;
}

@keyframes appearCenter {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================
   PASO 2: PREGUNTA SUBE A POSICIÓN DE TÍTULO
   ================================ */

.slide[data-slide="1"][data-step="2"] .step-1,
.slide[data-slide="1"][data-step="3"] .step-1,
.slide[data-slide="1"][data-step="4"] .step-1,
.slide[data-slide="1"][data-step="5"] .step-1 {
    animation: moveToTitle 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes moveToTitle {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateY(-220px) scale(0.85);
    }
}

/* ================================
   PASO 3: GLOBO APARECE CENTRADO
   ================================ */

.slide[data-slide="1"][data-step="3"] .step-3,
.slide[data-slide="1"][data-step="4"] .step-3,
.slide[data-slide="1"][data-step="5"] .step-3 {
    animation: globeAppearClean 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes globeAppearClean {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================
   PASO 4: NÚMERO APARECE
   ================================ */

.slide[data-slide="1"][data-step="4"] .step-4,
.slide[data-slide="1"][data-step="5"] .step-4 {
    animation: statAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes statAppear {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.7);
    }
    100% {
        opacity: 1;
        transform: translateY(80px) scale(1);
    }
}

/* ================================
   PASO 5: TEXTO "DE GAMERS ACTIVOS" APARECE
   ================================ */

.slide[data-slide="1"][data-step="5"] .step-5 {
    animation: textAppear 0.5s ease-out 0.2s forwards;
}

@keyframes textAppear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   GLOBO GIF - CONTENEDOR
   ================================ */

.globe-container {
    position: absolute;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================
   GLOBO GIF - IMAGEN HOLOGRAMA
   ================================ */

.globe-gif {
    width: 100%;
    height: auto;
    z-index: 5;
    
    /* MAGIA: mix-blend-mode elimina cualquier residuo negro/oscuro del GIF */
    mix-blend-mode: screen; 
    
    /* Filtros para forzar verde PITIUPI (no amarillo) */
    filter: 
        hue-rotate(260deg)      /* Ajustado para verde más puro */
        saturate(2)              /* Alta saturación */
        brightness(1.5)          /* Muy brillante */
        contrast(1.4)            /* Alto contraste */
        sepia(0.3);              /* Un poco de sepia para tonalidad verde */
    
    /* Opacidad para efecto holograma */
    opacity: 0.9; 
}

/* Intensificar cuando aparece */
.slide[data-slide="1"][data-step="3"] .globe-gif,
.slide[data-slide="1"][data-step="4"] .globe-gif,
.slide[data-slide="1"][data-step="5"] .globe-gif {
    filter: 
        hue-rotate(260deg)
        saturate(2.2)
        brightness(1.6)
        contrast(1.5)
        sepia(0.3);
}

/* ================================
   GLOBO GIF - RESPLANDOR (AURA REFINADA)
   ================================ */

.globe-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Degradado más intenso para combinar con el verde del globo */
    background: radial-gradient(
        circle, 
        rgba(57, 255, 20, 0.5) 0%,      /* Verde neón más intenso */
        rgba(51, 204, 0, 0.3) 40%, 
        rgba(51, 204, 0, 0) 70%
    );
    filter: blur(50px);
    z-index: 1;
    animation: pulseAura 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes pulseAura {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.3; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.4); 
        opacity: 0.6; 
    }
}

/* ================================
   RESPONSIVE - SLIDE 1
   ================================ */

@media (max-width: 768px) {
    .globe-container {
        width: 320px;
        height: 320px;
    }
    
    .click-indicator {
        font-size: 0.9rem;
        bottom: 7rem;
    }
    
    .click-arrow {
        font-size: 1.1rem;
    }
    
    @keyframes moveToTitle {
        100% {
            transform: translateY(-160px) scale(0.8);
        }
    }
    
    @keyframes statAppear {
        100% {
            transform: translateY(60px) scale(1);
        }
    }
}