/* -----------------------------
   Animaciones Fade
------------------------------ */

.fade-left-to-right-1, .fade-left-to-right-2, .fade-left-to-right-3 {
    opacity: 0;
    transform: translateX(-40px);
    animation: fadeLeftToRight 1s ease forwards;
}

.fade-left-to-right-2 { animation-duration: 2s; }
.fade-left-to-right-3 { animation-duration: 3s; }


.fade-bottom-to-top-1, .fade-bottom-to-top-2, .fade-bottom-to-top-3 {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeBottomToTop 1s ease forwards;
}

.fade-bottom-to-top-2 { animation-duration: 2s; }
.fade-bottom-to-top-3 { animation-duration: 3s; }

/* Keyframes */
@keyframes fadeLeftToRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* -----------------------------
   Parallax con scroll (suave)
------------------------------ */

.parallax-soft {
    transform: translateY(var(--p-offset, 0px));
    transition: transform 0.1s linear;
}

.parallax-medium {
    transform: translateY(var(--p-offset, 0px));
    transition: transform 0.1s linear;
}

.parallax-strong {
    transform: translateY(var(--p-offset, 0px));
    transition: transform 0.1s linear;
}

/* Script parallax usando CSS vars */
body {
    --scroll: 0px;
}

@media (min-width: 768px) {
    .parallax-soft { --p-factor: 0.1; }
    .parallax-medium { --p-factor: 0.25; }
    .parallax-strong { --p-factor: 0.45; }
}

/* Estos elementos se actualizan desde JS */