/* Voidlust site scroll animations — desktop + mobile, not PWA */

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-rtl {
    opacity: 0;
    transform: translateX(44px);
    transition:
        opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--vl-reveal-delay, 0ms);
    will-change: opacity, transform;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-rtl.vl-visible {
    opacity: 1;
    transform: translateX(0);
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-ltr {
    opacity: 0;
    transform: translateX(-52px);
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-ltr.vl-visible {
    opacity: 1;
    transform: translateX(0);
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-fade {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.58s ease,
        transform 0.58s ease;
    transition-delay: var(--vl-reveal-delay, 0ms);
    will-change: opacity, transform;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-fade.vl-visible {
    opacity: 1;
    transform: translateY(0);
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-intro .vl-reveal-line {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.62s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-intro .vl-reveal-line.vl-visible {
    opacity: 1;
    transform: translateY(0);
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-intro .vl-reveal-accent {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(3px);
    transition:
        opacity 0.78s ease,
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.78s ease;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-intro .vl-reveal-accent.vl-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-step.vl-reveal-step {
    opacity: 0;
    transform: translateX(32px);
    transition:
        opacity 0.64s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.64s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--vl-reveal-delay, 0ms);
    will-change: opacity, transform;
}

body.crave-site-mode:not(.crave-pwa-mode) .vl-how-step.vl-reveal-step.vl-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Character cards — desktop parity with mobile scroll-in */
@media (min-width: 769px) {
    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home.crave-desktop-ui .home-main .characters-grid .char-card.vl-char-reveal:not(.vl-char-visible) {
        opacity: 0;
        transform: translateY(26px) scale(0.97);
        transition:
            opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.48s cubic-bezier(0.2, 0.8, 0.2, 1),
            border-color 0.45s ease,
            box-shadow 0.45s ease;
        transition-delay: var(--vl-char-stagger, 0s);
        will-change: opacity, transform;
    }

    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home.crave-desktop-ui .home-main .characters-grid .char-card.vl-char-reveal.vl-char-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile review cards scroll-in */
@media (max-width: 768px) {
    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home.crave-mobile-ui .reviews-track .review-card.vl-reveal-review:not(.vl-visible) {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        transition:
            opacity 0.58s ease,
            transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--vl-reveal-delay, 0ms);
    }

    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home.crave-mobile-ui .reviews-track .review-card.vl-reveal-review.vl-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home.crave-mobile-ui .reviews-track .review-card.vl-reveal-review.vl-visible:active {
        transform: scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-rtl,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-ltr,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-fade,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-line,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-accent,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-step,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-review,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-rtl.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-ltr.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-fade.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-line.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-accent.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-step.vl-visible,
    body.crave-site-mode:not(.crave-pwa-mode) .vl-reveal-review.vl-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home .home-main .characters-grid .char-card.vl-char-reveal,
    body.crave-site-mode:not(.crave-pwa-mode).crave-unified-home .home-main .characters-grid .char-card.vl-char-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}