/*
 * USBizGuru motion library.
 * Small, opt-in classes for the "life" of the site: entrances, floating chips,
 * drifting background blobs, marquees, count-up hooks, scroll reveal.
 * Everything is disabled under prefers-reduced-motion.
 */

@keyframes ubg-rise    { from { transform: translateY(22px); } to { transform: translateY(0); } }
@keyframes ubg-pop     { from { transform: scale(.96); } to { transform: scale(1); } }
@keyframes ubg-bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ubg-bob-lg  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ubg-drift   { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } 100% { transform: translate(0,0) scale(1); } }
@keyframes ubg-drift-2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.12); } 100% { transform: translate(0,0) scale(1); } }
@keyframes ubg-spin    { to { transform: rotate(360deg); } }
@keyframes ubg-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ubg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ubg-dash    { to { stroke-dashoffset: 0; } }
@keyframes ubg-pulse   { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* Entrance: add .rise to siblings; stagger with .d1..d5 */
.rise { animation: ubg-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.pop  { animation: ubg-pop .9s cubic-bezier(.2,.7,.2,1) both .2s; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; }
.d4 { animation-delay: .32s; } .d5 { animation-delay: .4s; }

/* Floating chips and speech bubbles */
.bob    { animation: ubg-bob 4.5s ease-in-out infinite; }
.bob-lg { animation: ubg-bob-lg 5.5s ease-in-out infinite .8s; }

/* Soft background blobs (position with your own left/top) */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none; z-index: 0; }
.blob-drift   { animation: ubg-drift 14s ease-in-out infinite; }
.blob-drift-2 { animation: ubg-drift-2 17s ease-in-out infinite; }

/* Rotating dashed rings behind cutout figures */
.ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(35,137,173,.35); animation: ubg-spin 40s linear infinite; pointer-events: none; }
.ring-gold { border-color: rgba(212,168,75,.35); animation-direction: reverse; animation-duration: 60s; }

/* Gold shimmer sweep for primary CTAs: add .shimmer to .btn-gold */
.btn-gold.shimmer {
    background-image: linear-gradient(90deg, #d4a84b 0%, #c4962f 40%, #f0d78c 50%, #c4962f 60%, #d4a84b 100%);
    background-size: 200% 100%;
    animation: ubg-shimmer 6s linear infinite;
}
.btn-gold.shimmer:hover { animation-duration: 1.4s; }

/* Marquee: .marquee > .marquee-track with content duplicated once */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; width: max-content; animation: ubg-marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-fade::before, .marquee-fade::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none;
}
.marquee-fade::before { left: 0; background: linear-gradient(90deg, var(--marquee-bg, #fff), transparent); }
.marquee-fade::after  { right: 0; background: linear-gradient(270deg, var(--marquee-bg, #fff), transparent); }

/* Animated dashed route line (SVG path) */
.route-line { stroke-dasharray: 6 8; stroke-dashoffset: 600; animation: ubg-dash 3s linear infinite; }

/* Pulsing live indicator (WhatsApp button) */
.pulse-live { animation: ubg-pulse 2.6s ease-out infinite; }

/* Scroll reveal: transform only, so content is always visible at rest */
.rv { transform: translateY(18px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { transform: none; }

/* Hover life */
.lift { transition: transform .25s, box-shadow .25s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(6,35,55,.5); }

@media (prefers-reduced-motion: reduce) {
    .rise, .pop, .bob, .bob-lg, .blob-drift, .blob-drift-2, .ring, .btn-gold.shimmer,
    .marquee-track, .route-line, .pulse-live { animation: none !important; }
    .rv { transform: none; transition: none; }
    .lift { transition: none; }
}