/**
 * ============================================================
 * ANIMATIONS.CSS - Keyframes y transiciones
 * ============================================================
 * 
 * Archivo: animations.css
 * Descripción: Definición de todas las animaciones CSS,
 *              keyframes y clases de utilidad para animaciones
 * 
 * Autor: TeknoSoft Development Team
 * Fecha: Febrero 2026
 * 
 * Dependencias: reset.css, variables.css
 * 
 * NOTA: Las animaciones se activan mediante JavaScript
 *       usando Intersection Observer
 * ============================================================
 */

/* ============================================================
   CLASES BASE PARA ANIMACIONES
   ============================================================ */

/* Estado inicial oculto para elementos animados */
[data-animate] {
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

/* Estado visible después de la animación */
[data-animate].animated {
    opacity: 1;
    transform: none;
}

/* ============================================================
   FADE IN - Aparecer gradualmente
   ============================================================ */

.fade-in,
[data-animate="fade-in"] {
    opacity: 0;
}

.fade-in.animated,
[data-animate="fade-in"].animated {
    opacity: 1;
}

/* ============================================================
   FADE IN UP - Aparecer desde abajo
   ============================================================ */

.fade-in-up,
[data-animate="fade-in-up"] {
    opacity: 0;
    transform: translateY(40px);
}

.fade-in-up.animated,
[data-animate="fade-in-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   FADE IN DOWN - Aparecer desde arriba
   ============================================================ */

.fade-in-down,
[data-animate="fade-in-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

.fade-in-down.animated,
[data-animate="fade-in-down"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   FADE IN LEFT - Aparecer desde la izquierda
   ============================================================ */

.fade-in-left,
[data-animate="fade-in-left"] {
    opacity: 0;
    transform: translateX(-40px);
}

.fade-in-left.animated,
[data-animate="fade-in-left"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   FADE IN RIGHT - Aparecer desde la derecha
   ============================================================ */

.fade-in-right,
[data-animate="fade-in-right"] {
    opacity: 0;
    transform: translateX(40px);
}

.fade-in-right.animated,
[data-animate="fade-in-right"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   SCALE IN - Aparecer escalando
   ============================================================ */

.scale-in,
[data-animate="scale-in"] {
    opacity: 0;
    transform: scale(0.8);
}

.scale-in.animated,
[data-animate="scale-in"].animated {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   ZOOM IN - Aparecer con zoom
   ============================================================ */

.zoom-in,
[data-animate="zoom-in"] {
    opacity: 0;
    transform: scale(0.5);
}

.zoom-in.animated,
[data-animate="zoom-in"].animated {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   DELAYS PARA ANIMACIONES EN CASCADA
   ============================================================ */

[data-animate-delay="100"] { transition-delay: 100ms; }
[data-animate-delay="200"] { transition-delay: 200ms; }
[data-animate-delay="300"] { transition-delay: 300ms; }
[data-animate-delay="400"] { transition-delay: 400ms; }
[data-animate-delay="500"] { transition-delay: 500ms; }
[data-animate-delay="600"] { transition-delay: 600ms; }
[data-animate-delay="700"] { transition-delay: 700ms; }
[data-animate-delay="800"] { transition-delay: 800ms; }
[data-animate-delay="900"] { transition-delay: 900ms; }
[data-animate-delay="1000"] { transition-delay: 1000ms; }

/* Delays alternativos para grids */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }

/* ============================================================
   KEYFRAMES - ANIMACIONES CONTINUAS
   ============================================================ */

/* Float - Flotación suave */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Float pequeño */
@keyframes float-small {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse - Pulsación */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Pulse suave */
@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

/* Bounce - Rebote */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Shake - Vibración */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Rotate - Rotación continua */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Spin - Rotación con pausa */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Wave - Ondulación */
@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from top */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide in from bottom */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Scale up */
@keyframes scaleUp {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Glow - Brillo */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(125, 211, 232, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(125, 211, 232, 0.8), 
                    0 0 30px rgba(125, 211, 232, 0.6);
    }
}

/* Counter animation helper */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-small {
    animation: float-small 4s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 2s ease infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-rotate {
    animation: rotate 8s linear infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* ============================================================
   HOVER ANIMATIONS
   ============================================================ */

/* Elevación al hover */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Escala al hover */
.hover-scale {
    transition: transform var(--duration-fast) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Brillo al hover */
.hover-glow:hover {
    box-shadow: 0 0 20px rgba(125, 211, 232, 0.4);
}

/* Rotación al hover */
.hover-rotate:hover {
    transform: rotate(5deg);
}

/* ============================================================
   PARALLAX CLASSES
   ============================================================ */

.parallax {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-slow {
    --parallax-speed: 0.3;
}

.parallax-medium {
    --parallax-speed: 0.5;
}

.parallax-fast {
    --parallax-speed: 0.8;
}

/* ============================================================
   LOADING ANIMATIONS
   ============================================================ */

/* Spinner simple */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Dots loading */
.loading-dots {
    display: flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

/* ============================================================
   REDUCCIÓN DE MOVIMIENTO (ACCESIBILIDAD)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    [data-animate] {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   FIN DEL ARCHIVO
   ============================================================ */