/* ==========================================================================
   OrthoAlign Rehab — Animations
   Keyframes, scroll-reveal, micro-interactions
   ========================================================================== */

/* ── Keyframe Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    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 scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes drawLine {
    from { height: 0; }
    to { height: 100%; }
}

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

/* ── Scroll Reveal Classes ───────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    transform: translateX(-80px);
}

.reveal--left.visible {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(30px);
}

.reveal--right.visible {
    transform: translateX(0);
}

.reveal--scale {
    transform: scale(0.92);
}

.reveal--scale.visible {
    transform: scale(1);
}

/* Stagger Delays for Card Grids */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }
.reveal--delay-6 { transition-delay: 600ms; }

/* ── Hero Animations ─────────────────────────────────────────────────────── */
.hero-animate {
    animation: fadeInUp 1s var(--ease-out) forwards;
    opacity: 0;
}

.hero-animate--delay-1 { animation-delay: 200ms; }
.hero-animate--delay-2 { animation-delay: 400ms; }
.hero-animate--delay-3 { animation-delay: 600ms; }
.hero-animate--delay-4 { animation-delay: 800ms; }

.hero-image-animate {
    animation: fadeInRight 1.2s var(--ease-out) forwards;
    animation-delay: 300ms;
    opacity: 0;
}

/* ── Hover Micro-Interactions ────────────────────────────────────────────── */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

.hover-scale {
    transition: transform var(--duration-normal) var(--ease-spring);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* ── Loading / Shimmer ───────────────────────────────────────────────────── */
.shimmer {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── Counter Animation ───────────────────────────────────────────────────── */
.counter-animate {
    animation: countUp 0.6s var(--ease-out) forwards;
}

/* ── Floating Elements ───────────────────────────────────────────────────── */
.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* ── Nav Transition ──────────────────────────────────────────────────────── */
.nav-transition {
    transition: background-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                backdrop-filter var(--duration-normal) var(--ease-out);
}

/* ── Infinite Marquee ────────────────────────────────────────────────────── */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    padding: var(--space-4) 0;
    /* Optional: gradient fades on edges for a premium look */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-flex;
    gap: var(--space-6);
    animation: marquee-scroll 40s linear infinite;
}

.marquee-content--reverse {
    animation-direction: reverse;
}

.marquee-content--fast {
    animation: marquee-scroll 20s linear infinite;
}

.cluster-gap {
    margin-right: 80px;
}

@media (max-width: 768px) {
    .cluster-gap {
        margin-right: 16px; /* Smaller gap on mobile to prevent layout issues */
    }
    
    .condition-card {
        width: 240px !important; /* Slightly smaller cards on mobile */
    }
}

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

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - (var(--space-6) / 2))); }
}