/* ============================================================
   ANIMATIONS.CSS – Portfolio Profesional de Ing. Meydell Lezama
   Estilo: Elegant Blue Corporate Advanced 2.0
   ============================================================ */

/* ===== EFECTOS DE APARICIÓN SUAVE (FADE) ===== */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

    .fade-in.active {
        opacity: 1;
    }

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

    .fade-up.active {
        opacity: 1;
        transform: translateY(0);
    }

.fade-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.8s ease-out;
}

    .fade-down.active {
        opacity: 1;
        transform: translateY(0);
    }

/* ===== SLIDE (DIRECCIONES) ===== */
.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

    .slide-left.active {
        opacity: 1;
        transform: translateX(0);
    }

.slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}

    .slide-right.active {
        opacity: 1;
        transform: translateX(0);
    }

/* ===== ZOOM ===== */
.zoom-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease-out;
}

    .zoom-in.active {
        opacity: 1;
        transform: scale(1);
    }

/* ===== ROTACIÓN 3D (para títulos, logos o fotos) ===== */
.rotate-in {
    opacity: 0;
    transform: rotateY(-90deg);
    transition: all 0.9s ease-out;
    transform-origin: center;
}

    .rotate-in.active {
        opacity: 1;
        transform: rotateY(0deg);
    }

/* ===== BRILLO EN TEXTOS ===== */
.glow-text {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(254, 207, 64, 0.6), 0 0 24px rgba(254, 207, 64, 0.3);
    transition: text-shadow 0.4s ease-in-out;
}

    .glow-text:hover {
        text-shadow: 0 0 20px rgba(254, 207, 64, 0.9), 0 0 40px rgba(254, 207, 64, 0.7);
    }

/* ===== EFECTO EN IMÁGENES ===== */
img.fade-hover {
    transition: transform 0.4s ease, filter 0.4s ease;
}

    img.fade-hover:hover {
        transform: scale(1.05);
        filter: brightness(1.1);
    }

/* ===== EFECTO PULSO ===== */
.pulse {
    animation: pulseEffect 2.5s infinite;
}

@keyframes pulseEffect {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== EFECTO GRADIENTE DE FONDO ANIMADO ===== */
.gradient-bg {
    background: linear-gradient(120deg, var(--primary-blue), var(--accent-blue), var(--primary-blue));
    background-size: 300% 300%;
    animation: gradientFlow 10s ease infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== ENTRADA SUAVE AL CARGAR ===== */
.fadeInSmooth {
    animation: fadeInSmooth 1s ease forwards;
}

@keyframes fadeInSmooth {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== EFECTO PARPADEO SUAVE ===== */
.blink-smooth {
    animation: blink 2s infinite ease-in-out;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ===== EFECTO FLOTANTE SUAVE ===== */
.float-soft {
    animation: floatSoft 4s ease-in-out infinite;
}

@keyframes floatSoft {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ===== EFECTO EN CARDS (entrada secuencial) ===== */
.card-seq {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-out;
}

    .card-seq.active {
        opacity: 1;
        transform: translateY(0);
    }

/* ===== EFECTO EN ICONOS (rebote ligero) ===== */
.icon-bounce {
    animation: iconBounce 1.8s infinite ease-in-out;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ===== EFECTO DE BRILLO PASANTE ===== */
.shine {
    position: relative;
    overflow: hidden;
}

    .shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        animation: shineEffect 3s infinite;
    }

@keyframes shineEffect {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

/* ===== OPTIMIZACIÓN GENERAL ===== */
.active {
    will-change: transform, opacity;
}

a, button {
    transition: all 0.3s ease;
}

    a:hover, button:hover {
        transform: translateY(-2px);
    }