.grow {
    transition: transform 0.3s;
}

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

@keyframes appear-right {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-appear-right > * {
    view-timeline-name: --appear-right;
    view-timeline-axis: block;
    animation-timeline: --appear-right;
    animation-name: appear-right;
    animation-range: entry 10% cover 35%; 
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

@keyframes appear-up {
    from {
        transform: translateY(100px);
    }
    to {
        transform: translateY(0);
    }
}

.animate-appear-up > * {
    view-timeline-name: --appear-up;
    view-timeline-axis: block;
    animation-timeline: --appear-up;
    animation-name: appear-up;
    animation-range: entry 10% cover 40%; 
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

@keyframes shadow-parallax {
    from {
        box-shadow: 0 15px 10px 5px rgba(30, 30, 30, 0.2);
    }
    to {
        box-shadow: 0 -15px 10px 5px rgba(30, 30, 30, 0.2);
    }
}

.animate-shadow > * {
    transition: transform 0.5s ease-in-out;
    view-timeline-name: --shadow-parallax;
    view-timeline-axis: block;
    animation-timeline: --shadow-parallax;
    animation-name: shadow-parallax;
    animation-range: entry 10% cover 80%; 
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

/* cuando no hay soporte para scroll-driven animations */
.no-scroll-animations .animate-shadow > *,
.no-scroll-animations .animate-appear-up > *,
.no-scroll-animations .animate-appear-right > * {
    view-timeline-name: none;
    animation-timeline: none;
    animation-name: none;
    animation-fill-mode: none;
}