/**
 * Animaciones y Efectos Premium
 * Variavista Business Theme
 * 
 * @package Variavista
 * @version 2.7.0
 */

/* ========================================
   KEYFRAMES - ANIMACIONES BASE
   ======================================== */

/* Animated Gradient Mesh - Premium */
@keyframes blob {
    0%, 100% { 
        transform: translate(0px, 0px) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    33% { 
        transform: translate(30px, -50px) scale(1.1) rotate(120deg);
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    66% { 
        transform: translate(-20px, 20px) scale(0.9) rotate(240deg);
        border-radius: 70% 30% 50% 50% / 30% 50% 50% 70%;
    }
}

/* Float Animation Premium */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(1deg);
    }
    50% { 
        transform: translateY(-40px) translateX(-10px) rotate(-1deg);
    }
    75% {
        transform: translateY(-20px) translateX(10px) rotate(0.5deg);
    }
}

/* Magma Glow Placeholder - Se sobrescribe con colores dinámicos */
@keyframes magmaGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(200, 16, 46, 0.6),
                   0 0 40px rgba(255, 99, 71, 0.4),
                   0 0 60px rgba(255, 255, 255, 0.2);
    }
    50% { 
        box-shadow: 0 0 40px rgba(200, 16, 46, 0.8), 
                   0 0 80px rgba(255, 99, 71, 0.6),
                   0 0 120px rgba(255, 255, 255, 0.4);
    }
}
.magma-glow { 
    animation: magmaGlow 3s ease-in-out infinite; 
}

/* Lava Flow Animation */
@keyframes lavaFlow {
    0% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-10px) scale(1.05);
        opacity: 1;
    }
    100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
}

/* Magma Pulse - Efecto de calor pulsante */
@keyframes magmaPulse {
    0%, 100% { 
        background-size: 100% 100%;
        filter: brightness(1);
    }
    50% { 
        background-size: 110% 110%;
        filter: brightness(1.2);
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Scale In */
@keyframes scaleIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* Slide Up Fade */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Text Reveal */
@keyframes textReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* Shine Effect Premium */
@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ========================================
   CLASES DE ANIMACIÓN
   ======================================== */

.scroll-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays */
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* ========================================
   EFECTOS 3D Y PERSPECTIVA
   ======================================== */

/* Perspective for 3D effects */
.perspective-1000 {
    perspective: 1000px;
}

/* ========================================
   EFECTOS VISUALES
   ======================================== */

/* Gradient Border */
.gradient-border {
    position: relative;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #ff6b35, #ffa500) border-box;
    border: 2px solid transparent;
}

/* Noise Texture */
.noise-texture {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ========================================
   OPTIMIZACIONES DE PERFORMANCE
   ======================================== */

/* OPTIMIZACIÓN DE ANIMACIONES DE SCROLL - Más rápidas y suaves */
/* Solo afecta a animaciones de aparición de contenido, NO a efectos de fondo */
.animate-fade-in-up:not(.hero-particle):not([class*="particle"]):not([class*="drop"]):not([class*="float"]) {
    animation-duration: 0.4s !important;
}

/* Optimizar solo secciones de contenido */
section > div > .animate-fade-in-up,
.scroll-fade-in,
.fade-in-section {
    animation-duration: 0.4s !important;
}

/* OPTIMIZACIÓN DE RENDIMIENTO - Reducir complejidad de partículas */
/* Solo backface-visibility - las otras propiedades causaban margin-top en body */
[class*="particle"],
.absolute.rounded-full {
    backface-visibility: hidden;
}

/* Prevenir CLS en energy-wave */
.energy-wave {
    will-change: transform, opacity;
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Lazy load de secciones no críticas */
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* ========================================
   MOBILE - OPTIMIZACIONES
   ======================================== */

/* Prevenir zoom en mobile - comportamiento tipo app */
* {
    touch-action: manipulation;
}

/* OPTIMIZACIÓN MOBILE - Desactivar efectos pesados */
@media (max-width: 1024px) {
    /* Desactivar animaciones complejas */
    .cursor-trail-particle,
    [class*="burn-"],
    .particle-system,
    .background-effect {
        display: none !important;
    }
    
    /* Simplificar transiciones */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Desactivar blur pesado EXCEPTO en botones de descarga */
    .backdrop-blur:not(.backdrop-blur-xl),
    [class*="blur"]:not([class*="backdrop-blur-xl"]) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Desactivar sombras complejas */
    [class*="shadow-2xl"],
    [class*="shadow-3xl"] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
}