/* ──────────────────────────────────
   Reveal classes (used with GSAP)
   Elements start visible by default.
   JS will set initial hidden state,
   then animate them in.
   ────────────────────────────────── */

/* GSAP will handle these transforms programmatically.
   We do NOT hide them with CSS so content is visible
   even if JavaScript fails to load. */

.zx-fade-in {
    /* GSAP will fromTo opacity */
}

.zx-line-reveal {
    transform: scaleX(0);
    transform-origin: left;
}

.zx-clip-reveal {
    clip-path: inset(0 0 100% 0);
}

/* Keyframes */
@keyframes zx-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes zx-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(200, 224, 72, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 0 rgba(200, 224, 72, 0.1);
    }
}

@keyframes zx-particle-float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(20px);
        opacity: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .zx-reveal, .zx-fade-up, .zx-fade-in, .zx-line-reveal, .zx-clip-reveal {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        clip-path: none !important;
    }
}