/* ============================================================
   home_business.css
   Landing page animation styles for home_business.html.
   Pure CSS — no Tailwind processing required.
   ============================================================ */

/* ── Animated hero background ───────────────────────────────── */
.hero-bg-animated {
    background: linear-gradient(135deg, #eef2ff 0%, #f8f9ff 25%, #eff6ff 55%, #f0fdf4 100%);
    background-size: 300% 300%;
    animation: heroGradient 12s ease infinite;
}
@keyframes heroGradient {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* ── Hero left content entrance ─────────────────────────────── */
.hero-content-animate {
    opacity: 0;
    transform: translateY(22px);
    animation: heroContentIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes heroContentIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Hero card entrance ──────────────────────────────────────── */
.hero-card-animate {
    opacity: 0;
    transform: translateX(32px);
    animation: heroCardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes heroCardIn {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Hero card step reveal ───────────────────────────────────── */
.hero-step {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-step.step-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Floating badges ─────────────────────────────────────────── */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    40%      { transform: translateY(-7px); }
    70%      { transform: translateY(-4px); }
}
.badge-float-1 { animation: floatBadge 4.2s ease-in-out infinite; }
.badge-float-2 { animation: floatBadge 4.2s ease-in-out infinite 1.8s; }

/* ── Checkmark pop ───────────────────────────────────────────── */
.check-pop {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.check-pop.animate {
    opacity: 1;
    transform: scale(1);
}

/* ── Download button pulse ───────────────────────────────────── */
@keyframes downloadPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.download-pulse { animation: downloadPulse 1.8s ease-out infinite; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children inside a reveal-group */
.reveal-group .reveal-item:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal-item:nth-child(2) { transition-delay: 0.07s; }
.reveal-group .reveal-item:nth-child(3) { transition-delay: 0.14s; }
.reveal-group .reveal-item:nth-child(4) { transition-delay: 0.21s; }
.reveal-group .reveal-item:nth-child(5) { transition-delay: 0.28s; }
.reveal-group .reveal-item:nth-child(6) { transition-delay: 0.35s; }

/* ── Counter numbers ─────────────────────────────────────────── */
.counter-num { display: inline-block; }