/**
 * Ziko.co.il - Animations
 * Smooth entrance animations and effects
 */

/* ===================================================
   FADE 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 scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================================
   ANIMATION CLASSES (Triggered by JS)
   =================================================== */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-fade-up.animated {
    animation-name: fadeInUp;
}

.animate-fade-left.animated {
    animation-name: fadeInLeft;
}

.animate-fade-right.animated {
    animation-name: fadeInRight;
}

.animate-fade.animated {
    animation-name: fadeIn;
}

.animate-scale.animated {
    animation-name: scaleIn;
}

/* Stagger delays for grid items */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.animate-delay-6 { animation-delay: 0.6s; }

/* ===================================================
   HERO SPECIFIC ANIMATIONS
   =================================================== */
/* Slide without opacity: hiding the hero text at opacity:0 pushed LCP past 4s (#547) */
@keyframes heroSlideIn {
    from {
        transform: translateX(-30px);
    }
    to {
        transform: translateX(0);
    }
}

.hero-content {
    animation: heroSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-visual {
    animation: fadeInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
    opacity: 0;
}

/* ===================================================
   COUNTER ANIMATION STYLES
   =================================================== */
.stat-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Pulse effect when counter finishes */
@keyframes counterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.counter-done {
    animation: counterPulse 0.3s ease-out;
}

/* ===================================================
   CARD HOVER ENHANCEMENTS
   =================================================== */
.risk-card,
.check-card,
.included-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

/* ===================================================
   REDUCED MOTION
   =================================================== */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .hero-content,
    .hero-visual {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .animate-on-scroll.animated {
        animation: none;
        opacity: 1;
    }
}