/*
==========================================================
 Portal ICEC GYE
 Archivo: animations.css
 Versión: 0.1.0
==========================================================
*/

/* ===== TRANSICIONES GLOBALES ===== */

*{
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* ===== FADE IN ===== */

.fade-in{
    opacity:0;
    animation:fadeIn .8s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== ZOOM ===== */

.zoom-hover{
    overflow:hidden;
}

.zoom-hover img{
    transition:transform .5s ease;
}

.zoom-hover:hover img{
    transform:scale(1.08);
}

/* ===== FLOAT ===== */

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

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

/* ===== PULSE ===== */

.pulse{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(11,78,162,.35);
    }
    70%{
        transform:scale(1.03);
        box-shadow:0 0 0 12px rgba(11,78,162,0);
    }
    100%{
        transform:scale(1);
    }
}

/* ===== SLIDE ===== */

.slide-left{
    animation:slideLeft .8s ease forwards;
}

.slide-right{
    animation:slideRight .8s ease forwards;
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* ===== ROTACIÓN SUAVE ===== */

.rotate-hover:hover{
    transform:rotate(3deg);
}

/* ===== BOTONES ===== */

.btn:hover{
    transform:translateY(-3px);
}

/* ===== TARJETAS ===== */

.card:hover{
    transform:translateY(-8px);
}