/* Shared scroll-triggered reveal — smooth deceleration, crisp edges (no blur) */

:root {
    --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --reveal-ease-cards: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-duration: 0.92s;
    --reveal-duration-hero: 1.05s;
    --reveal-duration-admin: 0.72s;
}

.js-reveal {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.96);
    will-change: transform, opacity;
    transition-property: opacity, transform;
    transition-duration: var(--reveal-duration), var(--reveal-duration);
    transition-timing-function: var(--reveal-ease), var(--reveal-ease);
    transition-delay: 0s, 0s;
    backface-visibility: hidden;
}

.js-reveal.reveal-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) !important;
    will-change: auto;
}

/* Home VP strip: stronger horizontal slide + slightly longer settle */
.vp-main-image-box.js-reveal {
    transform: translate3d(-52px, 0, 0) scale(0.94);
    transition-duration: var(--reveal-duration-hero), var(--reveal-duration-hero);
}

.vp-feature-item.js-reveal {
    transform: translate3d(52px, 0, 0) scale(0.94);
    transition-duration: var(--reveal-duration-hero), var(--reveal-duration-hero);
}

/* Admin / login: shorter, tighter motion */
.layout-admin .js-reveal {
    transform: translate3d(0, 18px, 0) scale(0.98);
    transition-duration: var(--reveal-duration-admin), var(--reveal-duration-admin);
    transition-timing-function: var(--reveal-ease-cards), var(--reveal-ease-cards);
}

.layout-admin .js-reveal.reveal-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Stagger: even steps read cleaner in long pages */
.delay-1 {
    transition-delay: 0.1s, 0.1s;
}

.delay-2 {
    transition-delay: 0.2s, 0.2s;
}

.delay-3 {
    transition-delay: 0.3s, 0.3s;
}

.delay-4 {
    transition-delay: 0.4s, 0.4s;
}

.delay-5 {
    transition-delay: 0.5s, 0.5s;
}

/* Differentiators / stat cards */
.df-card-item.js-scroll-item {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.97);
    will-change: transform, opacity;
    transition:
        opacity 0.95s var(--reveal-ease-cards),
        transform 1s var(--reveal-ease-cards),
        box-shadow 0.45s ease;
}

.df-card-item.js-scroll-item.reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal,
    .js-reveal.reveal-active {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }

    .df-card-item.js-scroll-item,
    .df-card-item.js-scroll-item.reveal {
        transition-duration: 0.01ms !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }
}