/* ============================================
   ANIMATIONS — GSAP-driven & CSS
   ============================================ */

/* Fade-in base state (GSAP will animate these) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
}

/* Glow utilities */
.glow-green {
    box-shadow: 0 0 20px var(--green-dim), 0 0 40px var(--green-glow);
}

.glow-amber {
    box-shadow: 0 0 20px var(--amber-dim);
}

/* Node pulse animation for architecture */
.arch-node.pulse {
    animation: nodePulse 0.6s ease;
}

@keyframes nodePulse {
    0%   { box-shadow: 0 0 0 0 var(--green-dim); }
    50%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Counter flash */
.counter.flash {
    animation: counterFlash 0.4s ease;
}

@keyframes counterFlash {
    0%   { color: var(--green); }
    100% { color: var(--text); }
}

/* Metric card shimmer on load */
.metric-card.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(111, 191, 115, 0.04),
        transparent
    );
    animation: shimmer 1.5s ease forwards;
}

@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* Hero title text glow */
.text-green {
    text-shadow: 0 0 20px var(--green-dim);
}

/* Smooth hover lift */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}

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

/* Chatbot bounce entrance */
.chatbot__toggle {
    animation: chatBounce 0.6s ease 2s backwards;
}

@keyframes chatBounce {
    0%   { transform: scale(0); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoad 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

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