/* styles-animations.css - All keyframes animations */

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

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

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

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

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

@keyframes heroPhoneIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(0.75);
    }
}

@keyframes phoneScreenIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

@keyframes waveMove {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

@keyframes counterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes iconBounce {
    0% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.15) translateY(-5px); }
    50% { transform: scale(0.95) translateY(0); }
    75% { transform: scale(1.05) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes iconGlow {
    0% {
        box-shadow: 0 0 0 0 var(--accent-glow);
        background: var(--accent-glow);
    }
    100% {
        box-shadow: 0 0 20px 5px var(--accent-glow);
        background: var(--accent-glow);
    }
}

@keyframes arrowLineMove {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes painPulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 12px 3px var(--error-bg); }
}

@keyframes solutionGlow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 12px 3px var(--success-bg); }
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes particleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.3);
    }
    8% {
        opacity: 0.15;
        transform: translateY(0) translateX(0) scale(0.6);
    }
    15% {
        opacity: 0.5;
        transform: translateY(0) translateX(0) scale(1);
    }
    30% {
        transform: translateY(calc(var(--drift, -40px) * -0.35)) translateX(calc(var(--drift, -40px) * 0.45));
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
        transform: translateY(var(--drift, -80px)) translateX(calc(var(--drift, -40px) * 0.15)) scale(0.75);
    }
    70% {
        transform: translateY(calc(var(--drift, -40px) * -0.35)) translateX(calc(var(--drift, -40px) * -0.45));
        opacity: 0.6;
    }
    85% {
        opacity: 0.5;
        transform: translateY(0) translateX(0) scale(1);
    }
    92% {
        opacity: 0.15;
        transform: translateY(0) translateX(0) scale(0.6);
    }
}

@keyframes sectionParticleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.3);
    }
    8% {
        opacity: 0.15;
        transform: translateY(0) translateX(0) scale(0.6);
    }
    15% {
        opacity: 0.5;
        transform: translateY(0) translateX(0) scale(1);
    }
    30% {
        transform: translateY(calc(var(--drift, -40px) * -0.35)) translateX(calc(var(--drift, -40px) * 0.45));
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
        transform: translateY(var(--drift, -80px)) translateX(calc(var(--drift, -40px) * 0.15)) scale(0.75);
    }
    70% {
        transform: translateY(calc(var(--drift, -40px) * -0.35)) translateX(calc(var(--drift, -40px) * -0.45));
        opacity: 0.6;
    }
    85% {
        opacity: 0.5;
        transform: translateY(0) translateX(0) scale(1);
    }
    92% {
        opacity: 0.15;
        transform: translateY(0) translateX(0) scale(0.6);
    }
}

@keyframes heroOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(-80px, 40px) scale(1.15); opacity: 0.55; }
    50% { transform: translate(0, 80px) scale(0.85); opacity: 0.3; }
    75% { transform: translate(80px, 40px) scale(1.1); opacity: 0.5; }
}

@keyframes heroOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(70px, -50px) scale(1.1); opacity: 0.45; }
    50% { transform: translate(0, -100px) scale(0.9); opacity: 0.25; }
    75% { transform: translate(-70px, -50px) scale(1.05); opacity: 0.4; }
}

@keyframes phoneRotate {
    0%, 100% { transform: rotateY(-8deg) rotateX(3deg); }
    25% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(8deg) rotateX(-3deg); }
    75% { transform: rotateY(0deg) rotateX(0deg); }
}

@keyframes snowFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.8;
    }
    75% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) translateX(20px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes footerHolidayPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

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

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

@keyframes slideUpMobile {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade-in-up sync and stagger helpers */
:root {
    --anim-duration: 0.56s;
    --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --stagger-step: 0.12s;
}

/* Default hidden state for scroll-animated elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
    will-change: transform, opacity;
}

/* Visible state applied by JS when element is in view */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional class: use keyframe-based fade-in-up */
.fade-in-up {
    animation-name: fadeInUp;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-easing);
    animation-fill-mode: both;
}

/* Utility: small helper for groups that want a custom stagger step */
[data-stagger-delay] > .animate-on-scroll {
    /* children will get inline transitionDelay set by JS */
}