/* ============================================================
   FarmSystem.com.au — Animation Classes
   Intersection Observer powered scroll-reveal animations
   ============================================================ */

/* ─── Base: hidden state ─────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.animate-on-scroll.animate-left {
    transform: translateX(-40px);
}

.animate-on-scroll.animate-right {
    transform: translateX(40px);
}

.animate-on-scroll.animate-scale {
    transform: scale(0.96);
}

.animate-on-scroll.animate-fade {
    transform: none;
}

/* ─── Revealed state ─────────────────────────────────────────── */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ─── Staggered delays for card grids ───────────────────────── */
.stagger-children>*:nth-child(1) {
    transition-delay: 0ms;
}

.stagger-children>*:nth-child(2) {
    transition-delay: 100ms;
}

.stagger-children>*:nth-child(3) {
    transition-delay: 200ms;
}

.stagger-children>*:nth-child(4) {
    transition-delay: 300ms;
}

.stagger-children>*:nth-child(5) {
    transition-delay: 400ms;
}

.stagger-children>*:nth-child(6) {
    transition-delay: 500ms;
}

/* Apply opacity/transform to stagger children */
.stagger-children>* {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.stagger-children.is-visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Hero load animations ───────────────────────────────────── */
.hero-anim-badge {
    animation: heroFadeUp 0.6s ease both;
    animation-delay: 0ms;
}

.hero-anim-h1 {
    animation: heroFadeUp 0.6s ease both;
    animation-delay: 150ms;
}

.hero-anim-subtext {
    animation: heroFadeUp 0.6s ease both;
    animation-delay: 300ms;
}

.hero-anim-btns {
    animation: heroFadeUp 0.6s ease both;
    animation-delay: 450ms;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Count-up numbers use this class ───────────────────────── */
.count-up {
    display: inline-block;
}

/* ─── Floating card effect ───────────────────────────────────── */
@keyframes float {

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

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

.float-anim {
    animation: float 4s ease-in-out infinite;
}

/* ─── Pulse ring ─────────────────────────────────────────────── */
@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.pulse-ring {
    position: relative;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    animation: pulseRing 2.5s ease-out infinite;
}