/**
 * PARALLAX.CSS - Efectos parallax y scroll reveal
 * Ortega y Gasset - Academist Child Theme
 * Version: 1.0.0
 * 
 * Sistema ligero de parallax y animaciones scroll usando:
 * - CSS background-attachment: fixed (parallax nativo)
 * - Intersection Observer API (JavaScript nativo)
 * - GPU-accelerated transforms
 */

/* ========================================
   PARALLAX BACKGROUNDS (CSS PURO)
   ======================================== */

/* Hero sections con parallax */
.og-home-hero,
.og-maestria-hero-image,
.og-blog-hero {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
}

/* Sección estadísticas con parallax */
.og-home-stats {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

/* Elementos que aparecerán con animación */
.og-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Estado visible */
.og-reveal.og-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de velocidad */
.og-reveal-fast {
    transition-duration: 0.5s;
}

.og-reveal-slow {
    transition-duration: 1.2s;
}

/* Dirección de entrada */
.og-reveal-left {
    transform: translateX(-30px) translateY(0);
}

.og-reveal-left.og-revealed {
    transform: translateX(0) translateY(0);
}

.og-reveal-right {
    transform: translateX(30px) translateY(0);
}

.og-reveal-right.og-revealed {
    transform: translateX(0) translateY(0);
}

/* Fade sin movimiento */
.og-reveal-fade {
    transform: none;
}

/* ========================================
   PARALLAX ELEMENTS (Elementos flotantes)
   ======================================== */

/* Parallax suave en imágenes y cards */
.og-parallax-element {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* ========================================
   STAGGER ANIMATIONS (Cascada)
   ======================================== */

/* Delay incremental para elementos en grupo */
.og-reveal:nth-child(1) { transition-delay: 0s; }
.og-reveal:nth-child(2) { transition-delay: 0.1s; }
.og-reveal:nth-child(3) { transition-delay: 0.2s; }
.og-reveal:nth-child(4) { transition-delay: 0.3s; }
.og-reveal:nth-child(5) { transition-delay: 0.4s; }
.og-reveal:nth-child(6) { transition-delay: 0.5s; }
.og-reveal:nth-child(7) { transition-delay: 0.6s; }
.og-reveal:nth-child(8) { transition-delay: 0.7s; }
.og-reveal:nth-child(9) { transition-delay: 0.8s; }

/* ========================================
   HOVER EFFECTS CON PARALLAX
   ======================================== */

/* Cards con efecto hover parallax suave */
.og-programa-card,
.og-maestria-card,
.og-curso-card,
.og-perfil-card,
.og-feature-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.og-programa-card:hover,
.og-maestria-card:hover,
.og-curso-card:hover,
.og-perfil-card:hover,
.og-feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ======================================== */

/* Desactivar parallax fijo en mobile para mejor performance */
@media (max-width: 768px) {
    .og-home-hero,
    .og-maestria-hero-image,
    .og-blog-hero,
    .og-home-stats {
        background-attachment: scroll !important;
    }
    
    /* Reducir distancia de reveal en mobile */
    .og-reveal {
        transform: translateY(20px);
    }
    
    .og-reveal-left {
        transform: translateX(-20px) translateY(0);
    }
    
    .og-reveal-right {
        transform: translateX(20px) translateY(0);
    }
    
    /* Reducir hover effects en mobile */
    .og-programa-card:hover,
    .og-maestria-card:hover,
    .og-curso-card:hover,
    .og-perfil-card:hover,
    .og-feature-item:hover {
        transform: translateY(-4px);
    }
}

/* Desactivar animaciones si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .og-reveal,
    .og-parallax-element,
    .og-home-hero,
    .og-maestria-hero-image,
    .og-blog-hero,
    .og-home-stats {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        background-attachment: scroll !important;
    }
    
    .og-reveal {
        opacity: 1;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration para elementos animados */
.og-reveal,
.og-parallax-element,
.og-programa-card,
.og-maestria-card,
.og-curso-card {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Contenedor para prevenir layout shifts */
.og-reveal-container {
    overflow: hidden;
}