/* ===========================================================
   ANIMATIONS.CSS — animaciones sutiles (nada exagerado)
   =========================================================== */

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

.card, .video-card, .tall, .side-tall, .figma-slot {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease;
}
.card.in-view, .video-card.in-view, .tall.in-view, .side-tall.in-view, .figma-slot.in-view {
    opacity: 1;
    transform: translateY(0);
    animation: fadeUp .5s ease both;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card .thumb img { transition: transform .35s ease; }
.card:hover .thumb img { transform: scale(1.05); }

.video-card:hover .play { opacity: 1; transition: opacity .2s ease; }

#topBtn { transition: opacity .25s ease, visibility .25s ease, transform .25s ease; }

@media (prefers-reduced-motion: reduce) {
    .card, .video-card, .tall, .side-tall, .figma-slot {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}