/* ===================================
   PharmaCore - Animations
   animations.css
   =================================== */

/* ---- Fade & Slide In Animations ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Hero Entrance Animations ---- */
.hero-badge {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.2s;
}

.hero-title {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.4s;
}

.hero-description {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.55s;
}

.hero-cta {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.7s;
}

.hero-stats {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.85s;
}

.hero-scroll {
    animation: fadeIn 1s ease both;
    animation-delay: 1.2s;
}

/* ---- Scroll-Triggered Animations (via JS IntersectionObserver) ---- */
.anim-fadeInUp {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-fadeInLeft {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-fadeInRight {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-zoomIn {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* When element is in view */
.anim-fadeInUp.in-view,
.anim-fadeInLeft.in-view,
.anim-fadeInRight.in-view,
.anim-zoomIn.in-view {
    opacity: 1;
    transform: none;
}

/* ---- Stagger children delay ---- */
.stagger-children>*:nth-child(1) {
    transition-delay: 0.05s;
}

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

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

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

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

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

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

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(27, 79, 168, 0.3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(27, 79, 168, 0);
    }
}

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

/* ---- Counter Spin-Up (JS handles number, CSS provides visual) ---- */
.counter-value {
    display: inline-block;
}

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

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

/* ---- Scroll-Watcher JS snippet (injected globally) ---- */