/**
 * Premium Homepage Animation System
 * Subtle, smooth entrance animations for corporate-hr theme
 * Pure CSS + IntersectionObserver JS — no external deps
 */

/* ============================================================
   Base Setup: Elements start hidden, revealed on scroll
   ============================================================ */

/* Elements with animation start invisible and offset */
.anim-fade-up,
.anim-fade-in,
.anim-scale-in,
.anim-slide-left,
.anim-slide-right {
    opacity: 0;
    transition: none;
}

/* Once .anim-visible is added by JS, animate in */
.anim-visible.anim-fade-up {
    animation: animFadeUp var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

.anim-visible.anim-fade-in {
    animation: animFadeIn var(--anim-duration, 0.6s) var(--anim-easing, ease-out) forwards;
}

.anim-visible.anim-scale-in {
    animation: animScaleIn var(--anim-duration, 0.8s) var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

.anim-visible.anim-slide-left {
    animation: animSlideLeft var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

.anim-visible.anim-slide-right {
    animation: animSlideRight var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

/* ============================================================
   Keyframe Animations
   ============================================================ */

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

@keyframes animFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes animScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes animSlideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animSlideRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   Stagger Delay Utilities
   ============================================================ */

.anim-delay-1  { animation-delay: 0.05s !important; }
.anim-delay-2  { animation-delay: 0.10s !important; }
.anim-delay-3  { animation-delay: 0.15s !important; }
.anim-delay-4  { animation-delay: 0.20s !important; }
.anim-delay-5  { animation-delay: 0.30s !important; }
.anim-delay-6  { animation-delay: 0.40s !important; }
.anim-delay-7  { animation-delay: 0.50s !important; }
.anim-delay-8  { animation-delay: 0.60s !important; }
.anim-delay-9  { animation-delay: 0.70s !important; }
.anim-delay-10 { animation-delay: 0.80s !important; }
.anim-delay-11 { animation-delay: 0.90s !important; }
.anim-delay-12 { animation-delay: 1.00s !important; }

/* ============================================================
   Counter Animation
   ============================================================ */

.count-up {
    opacity: 0;
}

.count-up.anim-visible {
    opacity: 1;
    animation: animCountFadeIn 0.4s ease forwards;
}

@keyframes animCountFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   Subtle Decorative Animations
   ============================================================ */

/* Subtle float on decorative elements */
.float-gentle {
    animation: floatGentle 6s ease-in-out infinite;
}

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

/* Subtle pulse on elements */
.pulse-subtle {
    animation: pulseSubtle 3s ease-in-out infinite;
}

@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.75; }
}

/* Shimmer/sweep effect for skeletons (reused from existing) */
.anim-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmerSweep 1.5s infinite;
}

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

/* ============================================================
   Accessibility: Reduce Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-in,
    .anim-scale-in,
    .anim-slide-left,
    .anim-slide-right,
    .count-up,
    .float-gentle,
    .pulse-subtle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Print: No animations
   ============================================================ */

@media print {
    .anim-fade-up,
    .anim-fade-in,
    .anim-scale-in,
    .anim-slide-left,
    .anim-slide-right,
    .count-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}