/* ---------------------------------------------------------------------- */
/* CONFIGURATION (CSS VARIABLES) */
/* ---------------------------------------------------------------------- */
:root {
    --shps-duration: 0.8s;        /* Animation duration */
    --shps-ease: ease-out;        /* Easing function */
    --shps-distance: 50px;        /* Travel distance (up/down) */
    --shps-distance-side: 100px;  /* Travel distance (left/right) */
    --shps-scale-start: 1.2;      /* Zoom-out start scale */
}

/* ---------------------------------------------------------------------- */
/* BASE CLASS - Visible by default (for no-js) */
/* ---------------------------------------------------------------------- */
.shps-animated {
    opacity: 1;
    transform: none;
}

/* HIDE ELEMENTS ONLY WHEN JS IS ENABLED */
.shps-js-enabled .shps-animated {
    transform-style: preserve-3d;
    transition: opacity var(--shps-duration) var(--shps-ease), transform var(--shps-duration) var(--shps-ease);
    will-change: opacity, transform;
}

/* ---------------------------------------------------------------------- */
/* EFFECT 1: SLIDE-UP */
/* ---------------------------------------------------------------------- */
.shps-js-enabled .shps-slide-up {
    transform: translate3d(0, var(--shps-distance), 0);
    opacity: 0;
}
.shps-js-enabled .shps-slide-up.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* EFFECT 2: ZOOM-OUT */
/* ---------------------------------------------------------------------- */
.shps-js-enabled .shps-zoom-out {
    transform: scale3d(var(--shps-scale-start), var(--shps-scale-start), var(--shps-scale-start));
    opacity: 0;
}
.shps-js-enabled .shps-zoom-out.is-visible {
    transform: scale3d(1, 1, 1);
    opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* EFFECT 3: SLIDE RIGHT */
/* ---------------------------------------------------------------------- */
.shps-js-enabled .shps-slide-right {
    transform: translate3d(var(--shps-distance-side), 0, 0);
    opacity: 0;
}
.shps-js-enabled .shps-slide-right.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* EFFECT 4: SLIDE LEFT */
/* ---------------------------------------------------------------------- */
.shps-js-enabled .shps-slide-left {
    transform: translate3d(calc(var(--shps-distance-side) * -1), 0, 0);
    opacity: 0;
}
.shps-js-enabled .shps-slide-left.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* HELPER CLASSES: MANUAL DELAY */
/* ---------------------------------------------------------------------- */
.shps-delay-100 { transition-delay: 0.1s; }
.shps-delay-200 { transition-delay: 0.2s; }
.shps-delay-300 { transition-delay: 0.3s; }
.shps-delay-400 { transition-delay: 0.4s; }
.shps-delay-500 { transition-delay: 0.5s; }
.shps-delay-600 { transition-delay: 0.6s; }
.shps-delay-700 { transition-delay: 0.7s; }
.shps-delay-800 { transition-delay: 0.8s; }
.shps-delay-900 { transition-delay: 0.9s; }
.shps-delay-1000 { transition-delay: 1.0s; }

/* ---------------------------------------------------------------------- */
/* ACCESSIBILITY: PREFERS-REDUCED-MOTION */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .shps-animated,
    .shps-slide-up, .shps-zoom-out, 
    .shps-slide-right, .shps-slide-left {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition-delay: 0s !important;
    }
}