/* ========== CHANNEL SOFTECH — SCROLL ANIMATIONS ==========
   Elements are tagged by assets/js/animations.js.
   Uses the individual `translate` / `scale` properties, so it never
   fights a card's own hover `transform`.
   Without JavaScript, or with reduced motion, everything is simply visible.
   ========================================================= */
:root {
    --cs-rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cs-rv-time: 900ms;
}

.cs-rv {
    opacity: 0;
    translate: 0 34px;
    transition:
        opacity var(--cs-rv-time) var(--cs-rv-ease) var(--cs-rv-delay, 0ms),
        translate var(--cs-rv-time) var(--cs-rv-ease) var(--cs-rv-delay, 0ms),
        scale var(--cs-rv-time) var(--cs-rv-ease) var(--cs-rv-delay, 0ms),
        filter var(--cs-rv-time) var(--cs-rv-ease) var(--cs-rv-delay, 0ms);
}

.cs-rv[data-cs-rv="left"] {
    translate: -48px 0;
}

.cs-rv[data-cs-rv="right"] {
    translate: 48px 0;
}

.cs-rv[data-cs-rv="zoom"] {
    translate: 0 26px;
    scale: 0.95;
}

/* headings come in softly focused */
.cs-rv[data-cs-rv="title"] {
    translate: 0 24px;
    filter: blur(6px);
}

.cs-rv.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .cs-rv,
    .cs-rv[data-cs-rv] {
        opacity: 1;
        translate: none;
        scale: none;
        filter: none;
        transition: none;
    }
}