/* ==========================================================================
   HARDWARE ACCELERATED ANIMATION ENGINE
   ========================================================================== */

[data-animate] {
    opacity: 0;
    /* Custom properties seamlessly injected by the JS matrix */
    transition: opacity var(--duration, 800ms) cubic-bezier(0.25, 1, 0.5, 1), 
                transform var(--duration, 800ms) cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: var(--delay, 0ms);
    /* Forces GPU rendering and prevents 1px text layout shifts during execution */
    backface-visibility: hidden; 
}

/* --------------------------------------------------------------------------
   3D TRANSFORMS (Zero DOM repaints)
   -------------------------------------------------------------------------- */

[data-animate="fade-up"]    { transform: translate3d(0, 40px, 0); }
[data-animate="fade-down"]  { transform: translate3d(0, -40px, 0); }
[data-animate="fade-left"]  { transform: translate3d(40px, 0, 0); }
[data-animate="fade-right"] { transform: translate3d(-40px, 0, 0); }
[data-animate="fade-in"]    { transform: none; }

[data-animate="slide-up"]    { transform: translate3d(0, 120px, 0); }
[data-animate="slide-down"]  { transform: translate3d(0, -120px, 0); }
[data-animate="slide-left"]  { transform: translate3d(120px, 0, 0); }
[data-animate="slide-right"] { transform: translate3d(-120px, 0, 0); }

/* --------------------------------------------------------------------------
   THE ACTIVE TRIGGER STATE
   -------------------------------------------------------------------------- */

[data-animate].visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}