/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS — GSAP helpers, keyframes, reveal classes
   ═══════════════════════════════════════════════════════════════════ */

/* ── GSAP Reveal States (initial hidden states) ── */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
}

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

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

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

.reveal-rotate {
    opacity: 0;
    transform: rotate(-5deg) translateY(40px);
    will-change: transform, opacity;
}

/* ── Stagger children ── */
.stagger-children>* {
    opacity: 0;
    transform: translateY(30px);
}

/* ── Floating animations ── */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(3deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: float-slow 10s ease-in-out infinite;
}

/* ── Pulse ── */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.4), 0 0 80px rgba(0, 212, 255, 0.1);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* ── Marquee / Ticker ── */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ── Gradient shift ── */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* ── Shimmer / Skeleton ── */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg,
            var(--glass-bg) 25%,
            var(--glass-bg-hover) 50%,
            var(--glass-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ── Spin ── */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* ── Line Draw ── */
@keyframes line-draw {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ── Counter Number Animation ── */
.counter-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Section transition helper ── */
.section-transition-top {
    margin-top: calc(-1 * var(--radius-section));
    position: relative;
    z-index: 1;
}

/* ── Magnetic button effect helper ── */
.magnetic {
    transition: transform var(--duration-normal) var(--ease-expo);
}

/* ── Text split animation helpers ── */
.split-word {
    display: inline-block;
    overflow: hidden;
}

.split-char {
    display: inline-block;
    transform: translateY(100%);
}

/* ── Image reveal ── */
.img-reveal {
    position: relative;
    overflow: hidden;
}

.img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg-deep);
    transform-origin: right;
    transition: transform 1s var(--ease-expo);
}

.img-reveal.revealed::after {
    transform: scaleX(0);
}

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