/* ============================================
   Scroll Animations — GSAP ScrollTrigger based
   Clinova-inspired effects for page builder
   ============================================ */

/*
 * NOTE: No initial hidden states here (no opacity:0 / transforms).
 * GSAP fromTo() handles both start & end states in JS to avoid
 * conflicts where CSS hides elements and GSAP reads them as "end" state.
 */

/* ---- Reveal — needs overflow hidden for clip-path effect ---- */
[data-scroll-animation="reveal"] {
    overflow: hidden;
}

/* ---- Will-change hints (performance) ---- */
[data-scroll-animation="fade-up"],
[data-scroll-animation="fade-down"],
[data-scroll-animation="fade-left"],
[data-scroll-animation="fade-right"],
[data-scroll-animation="fade-in"],
[data-scroll-animation="scale-up"],
[data-scroll-animation="rotate-in"] {
    will-change: opacity, transform;
}
[data-scroll-animation="blur"] {
    will-change: filter, opacity;
}
[data-scroll-animation="parallax"] {
    will-change: transform;
}

/* ---- Counter Animation ---- */
[data-scroll-animation="counter"] {
    font-variant-numeric: tabular-nums;
}

/* ---- Marquee / Infinite Ticker ---- */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
}
.marquee-track {
    display: inline-flex;
    gap: 3rem;
    animation: marqueeScroll var(--marquee-speed, 20s) linear infinite;
    will-change: transform;
}
.marquee-track:hover {
    animation-play-state: paused;
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    [data-scroll-animation] {
        animation: none !important;
        transition: none !important;
    }
    .marquee-track {
        animation: none;
    }
}