/* =========================
   GLOBAL BASE (SAFE VERSION)
========================= */

[class*="animate-"] {

    /* =========================
       FALLBACK SYSTEM (IMPORTANT)
    ========================= */

    --tx: var(--tx, 0px);
    --ty: var(--ty, 0px);
    --scale: var(--scale, 1);
    --rotate: var(--rotate, 0deg);
    --rotate-x: var(--rotate-x, 0deg);
    --rotate-y: var(--rotate-y, 0deg);
    --skew-x: var(--skew-x, 0deg);
    --skew-y: var(--skew-y, 0deg);

    --opacity: var(--opacity, 1);

    --blur: var(--blur, 0px);
    --grayscale: var(--grayscale, 0%);
    --brightness: var(--brightness, 100%);
    --contrast: var(--contrast, 100%);
    --saturate: var(--saturate, 100%);

    /* =========================
       TRANSFORM ENGINE
    ========================= */

    transform:
            perspective(1000px)
            translateX(var(--tx))
            translateY(var(--ty))
            scale(var(--scale))
            rotate(var(--rotate))
            rotateX(var(--rotate-x))
            rotateY(var(--rotate-y))
            skewX(var(--skew-x))
            skewY(var(--skew-y));

    opacity: var(--opacity);

    filter:
            blur(var(--blur))
            grayscale(var(--grayscale))
            brightness(var(--brightness))
            contrast(var(--contrast))
            saturate(var(--saturate));

    transition:
            transform 0.7s ease,
            opacity 0.7s ease,
            filter 0.7s ease;

    will-change: transform, opacity, filter;
}

/* =========================
   RESET STATE (VISIBLE)
========================= */

.is-visible {
    --tx: 0px;
    --ty: 0px;
    --scale: 1;
    --rotate: 0deg;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --skew-x: 0deg;
    --skew-y: 0deg;
    --opacity: 1;
}

/* =========================
   SCROLL SYSTEM
========================= */

[class*="animate-scroll"],
[class*="animate-parallax"] {
    --progress: 0;
}

/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {
    [class*="animate-"] {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}