/**
 * Scroll Animations CSS - Rick Creative
 * Animaciones elegantes para elementos cuando entran y salen del viewport
 */

/* Variables CSS para personalización */
:root {
    --animation-duration: 0.8s;
    --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-delay: 0s;
    --fade-distance: 30px;
    --scale-factor: 0.95;
    --exit-duration: 0.4s;
}

/* Estado inicial de elementos animables */
.scroll-animate {
    opacity: 0;
    transform: translateY(var(--fade-distance)) scale(var(--scale-factor));
    transition: all var(--animation-duration) var(--animation-easing);
    transition-delay: var(--animation-delay);
    will-change: transform, opacity;
    /* Evitar conflictos con animate.css */
    animation: none !important;
    /* Asegurar transiciones suaves */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Estado animado */
.scroll-animated {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    /* Mantener transición suave */
    transition: all var(--animation-duration) var(--animation-easing);
}

/* ===== ANIMACIONES ESPECÍFICAS POR TIPO DE ELEMENTO ===== */

/* Títulos principales */
.rick-title.scroll-animate {
    transform: translateY(40px) scale(0.95);
}

.rick-title.scroll-animated {
    transform: translateY(0) scale(1) !important;
}

/* Subtítulos */
.rick-subtitle.scroll-animate {
    transform: translateY(25px);
    opacity: 0;
}

.rick-subtitle.scroll-animated {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Párrafos de texto */
.about-content p.scroll-animate,
.story-content p.scroll-animate,
.vision-content p.scroll-animate,
.mision-content p.scroll-animate {
    transform: translateY(20px);
    opacity: 0;
}

.about-content p.scroll-animated,
.story-content p.scroll-animated,
.vision-content p.scroll-animated,
.mision-content p.scroll-animated {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Contenedores de carrusel y grids */
.portfolio-carousel-container.scroll-animate,
.solutions-grid.scroll-animate,
.clients-grid.scroll-animate {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
}

.portfolio-carousel-container.scroll-animated,
.solutions-grid.scroll-animated,
.clients-grid.scroll-animated {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* Tarjetas de servicio */
.service-card.scroll-animate {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
}

.service-card.scroll-animated {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* Formulario de contacto */
.contact-form.scroll-animate {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
}

.contact-form.scroll-animated {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* ===== ANIMACIONES ESPECIALES ===== */

/* Fade in desde la izquierda */
.fade-in-left.scroll-animate {
    transform: translateX(-40px);
    opacity: 0;
}

.fade-in-left.scroll-animated {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Fade in desde la derecha */
.fade-in-right.scroll-animate {
    transform: translateX(40px);
    opacity: 0;
}

.fade-in-right.scroll-animated {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Zoom in */
.zoom-in.scroll-animate {
    transform: scale(0.8);
    opacity: 0;
}

.zoom-in.scroll-animated {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Rotate in */
.rotate-in.scroll-animate {
    transform: rotate(-8deg) scale(0.9);
    opacity: 0;
}

.rotate-in.scroll-animated {
    transform: rotate(0deg) scale(1) !important;
    opacity: 1 !important;
}

/* ===== ANIMACIONES EN CASCADA (STAGGER) ===== */

/* Para elementos en filas/columnas */
.row .col-lg-6:nth-child(1) .scroll-animate { --animation-delay: 0s; }
.row .col-lg-6:nth-child(2) .scroll-animate { --animation-delay: 0.1s; }
.row .col-lg-4:nth-child(1) .scroll-animate { --animation-delay: 0s; }
.row .col-lg-4:nth-child(2) .scroll-animate { --animation-delay: 0.08s; }
.row .col-lg-4:nth-child(3) .scroll-animate { --animation-delay: 0.16s; }
.row .col-lg-3:nth-child(1) .scroll-animate { --animation-delay: 0s; }
.row .col-lg-3:nth-child(2) .scroll-animate { --animation-delay: 0.06s; }
.row .col-lg-3:nth-child(3) .scroll-animate { --animation-delay: 0.12s; }
.row .col-lg-3:nth-child(4) .scroll-animate { --animation-delay: 0.18s; }

/* ===== ANIMACIONES RESPONSIVAS ===== */

@media (max-width: 768px) {
    :root {
        --fade-distance: 25px;
        --animation-duration: 0.7s;
        --exit-duration: 0.3s;
    }
    
    .rick-title.scroll-animate {
        transform: translateY(30px) scale(0.97);
    }
    
    .portfolio-carousel-container.scroll-animate,
    .solutions-grid.scroll-animate,
    .clients-grid.scroll-animate {
        transform: translateY(25px) scale(0.97);
    }
    
    /* Hacer las animaciones más suaves en móvil */
    .scroll-animate {
        transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

@media (max-width: 480px) {
    :root {
        --fade-distance: 20px;
        --animation-duration: 0.6s;
        --exit-duration: 0.25s;
    }
    
    .rick-title.scroll-animate {
        transform: translateY(25px) scale(0.98);
    }
    
    /* Animaciones ultra suaves en móviles pequeños */
    .scroll-animate {
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* ===== EFECTOS ADICIONALES ===== */

/* Sombra que aparece con la animación */
.scroll-animate {
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.scroll-animated {
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.1));
}

/* Efecto de brillo sutil */
.scroll-animated {
    animation: subtle-glow 2s ease-out forwards;
}

@keyframes subtle-glow {
    0% { box-shadow: 0 0 0 rgba(0, 254, 181, 0); }
    50% { box-shadow: 0 0 20px rgba(0, 254, 181, 0.1); }
    100% { box-shadow: 0 0 0 rgba(0, 254, 181, 0); }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* Usar transform3d para aceleración por hardware */
.scroll-animate,
.scroll-animated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reducir repaints en elementos con animaciones */
.scroll-animate * {
    will-change: auto;
}

/* ===== ESTADOS DE CARGA ===== */

/* Para elementos que se cargan dinámicamente */
.loading .scroll-animate {
    opacity: 0;
    transform: translateY(20px);
}

/* ===== ANIMACIONES DE SALIDA ===== */

/* Cuando elementos salen del viewport */
.scroll-exit {
    opacity: 0;
    transform: translateY(-20px);
    transition: all var(--exit-duration) ease;
}

/* ===== UTILIDADES ===== */

/* Clases para control manual */
.animate-now {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

.disable-animations .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ===== ANIMACIONES PARA ELEMENTOS ESPECÍFICOS ===== */

/* Hero section */
.hero-content .scroll-animate {
    transform: translateY(60px) scale(0.9);
}

.hero-content .scroll-animated {
    transform: translateY(0) scale(1) !important;
}

/* About section */
.about-content .scroll-animate {
    transform: translateY(40px);
}

.about-content .scroll-animated {
    transform: translateY(0) !important;
}

/* Story section */
.story-content .scroll-animate {
    transform: translateY(35px);
}

.story-content .scroll-animated {
    transform: translateY(0) !important;
}

/* Vision section */
.vision-content h2.scroll-animate {
    transform: translateX(-50px);
}

.vision-content h2.scroll-animated {
    transform: translateX(0) !important;
}

.vision-content p.scroll-animate {
    transform: translateX(50px);
}

.vision-content p.scroll-animated {
    transform: translateX(0) !important;
}

/* ===== ANIMACIONES DE SECCIONES COMPLETAS ===== */

/* Secciones enteras con animación coordinada */
.about-section.scroll-animate,
.story-section.scroll-animate,
.vision-section.scroll-animate,
.mision-section.scroll-animate,
.portfolio-section.scroll-animate,
.services-section.scroll-animate,
.clients-section.scroll-animate,
.contact-section.scroll-animate {
    transform: translateY(30px);
    opacity: 0;
}

.about-section.scroll-animated,
.story-section.scroll-animated,
.vision-section.scroll-animated,
.mision-section.scroll-animated,
.portfolio-section.scroll-animated,
.services-section.scroll-animated,
.clients-section.scroll-animated,
.contact-section.scroll-animated {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ===== MEJORAS DE PERFORMANCE ===== */

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animated {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ===== ESTADOS INTERMEDIOS ===== */

/* Para elementos que están en transición */
.scroll-transitioning {
    pointer-events: none;
}

/* ===== DEBUGGING ===== */

/* Mostrar bordes para debugging (remover en producción) */
.debug-animations .scroll-animate {
    border: 2px solid red;
}

.debug-animations .scroll-animated {
    border: 2px solid green;
}