/* ============================================================
   GARAGE AUTOPRO — ANIMATIONS
   ============================================================ */

/* ── Scroll animations ── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}
.animate-on-scroll.animated         { opacity: 1; transform: none; }
.animate-on-scroll.delay-1.animated { transition-delay: .12s; }
.animate-on-scroll.delay-2.animated { transition-delay: .24s; }
.animate-on-scroll.delay-3.animated { transition-delay: .36s; }
.animate-on-scroll.delay-4.animated { transition-delay: .48s; }

/* ── Hero fade-up ── */
.animate-fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp .8s ease forwards;
}
.animate-fade-up.delay-1 { animation-delay: .18s; }
.animate-fade-up.delay-2 { animation-delay: .34s; }
.animate-fade-up.delay-3 { animation-delay: .50s; }
.animate-fade-up.delay-4 { animation-delay: .66s; }

@keyframes fadeUp {
    to { opacity: 1; transform: none; }
}

/* ── Floating hero icons ── */
.hero-float-1 { animation: float1 6s ease-in-out infinite; }
.hero-float-2 { animation: float2 8s ease-in-out infinite; }
.hero-float-3 { animation: float3 7s ease-in-out infinite; }

@keyframes float1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-22px) rotate(180deg); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-16px) rotate(-12deg); }
}
@keyframes float3 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-13px); }
}

/* ── Scroll indicator ── */
.scroll-indicator { animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-10px); }
}