/* ============================
   YaFacturo Landing - Animations
   ============================ */

/* Fade in on scroll */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.15s; }
.fade-in-delay-2 { transition-delay: 0.3s; }
.fade-in-delay-3 { transition-delay: 0.45s; }

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-children.visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-children.visible > *:nth-child(12) { transition-delay: 0.6s; }
.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* WhatsApp message animation */
@keyframes msgAppear {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chat typing indicator */
.wa-typing {
    display: flex; gap: 4px; padding: 8px 12px;
    align-self: flex-start; background: #1F2C34;
    border-radius: 8px; border-bottom-left-radius: 2px;
}
.wa-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #8696A0; animation: typingDot 1.4s infinite;
}
.wa-typing span:nth-child(2) { animation-delay: 0.2s; }
.wa-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Feature card hover glow */
.feature-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: var(--radius);
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(14,165,233,0.08), transparent 60%);
    opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.feature-card { position: relative; }
.feature-card:hover::before { opacity: 1; }

/* Howto step pulse */
.howto-step-num { animation: none; }
.howto-step:hover .howto-step-num {
    animation: stepPulse 0.6s ease;
}
@keyframes stepPulse {
    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
    100% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
}

/* Pricing popular card shimmer */
.pricing-card.popular::after {
    content: '';
    position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: var(--radius-lg);
    background: linear-gradient(45deg, transparent, rgba(14,165,233,0.1), transparent);
    z-index: -1;
}

/* Gradient bg animation */
.hero-gradient-bg {
    animation: floatBg 20s ease-in-out infinite alternate;
}
@keyframes floatBg {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-40px, 30px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .fade-in { opacity: 1; transform: none; }
    .stagger-children > * { opacity: 1; transform: none; }
}