/* ============================================================
   Animation Classes — GSAP ScrollTrigger targets
   ============================================================ */

/* 
   These classes define initial states for animated elements.
   GSAP ScrollTrigger (in animations.js) watches for these 
   classes and animates them into their final visible state.
   
   The CSS handles the initial hidden state;
   GSAP handles the animation to visible.
*/

/* ---- Reveal animations (initial states) ---- */

.reveal-up {
    opacity: 0;
    transform: translateY(60px);
}

.reveal-down {
    opacity: 0;
    transform: translateY(-60px);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
}

.reveal-fade {
    opacity: 0;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
}

/* ---- Stagger children ---- */
/* Parent gets this class; children are staggered by GSAP */
.stagger-children > * {
    opacity: 0;
    transform: translateY(40px);
}

/* ---- Split text (for headline character/word animations) ---- */
.split-text .char,
.split-text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
}

/* ---- Image reveal (clip-path wipe) ---- */
.reveal-image {
    position: relative;
    overflow: hidden;
}

.reveal-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform-origin: right;
    z-index: 2;
}

/* GSAP will animate the ::after scaleX from 1 to 0 */

/* ---- Counter animation ---- */
.counter-value {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-display);
    color: var(--color-secondary);
    line-height: 1;
}

.counter-suffix {
    font-size: 0.5em;
    font-weight: var(--fw-bold);
    vertical-align: super;
    margin-left: 2px;
}

/* ---- Line draw animation ---- */
.line-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    /* GSAP animates stroke-dashoffset to 0 */
}

/* ---- Parallax container ---- */
.parallax-container {
    overflow: hidden;
    position: relative;
}

.parallax-element {
    will-change: transform;
}

/* ---- Magnetic button effect ---- */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Marquee / scrolling text ---- */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee__inner {
    display: inline-flex;
    gap: var(--space-3xl);
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---- Reduced motion: reset all animation initial states ---- */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-fade,
    .reveal-scale,
    .stagger-children > *,
    .split-text .char,
    .split-text .word {
        opacity: 1 !important;
        transform: none !important;
    }

    .reveal-image::after {
        display: none;
    }

    .marquee__inner {
        animation: none;
    }
}

/* ---- Loading spinner ---- */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--color-secondary-rgb), 0.2);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Page transition overlay ---- */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--color-primary);
    z-index: var(--z-max);
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}