/* ════════════════════════════════════════════════════════════
   AXO-G Animations — animations.css
   Rich motion design for AXO-G House Maker Portal
════════════════════════════════════════════════════════════ */

/* ── 1. Navbar slide down on page load ── */
@keyframes navSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.axog-navbar { animation: navSlideDown .6s cubic-bezier(.4,0,.2,1) both; }

/* ── 2. Hero text entrance stagger ── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideRight {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroSlideLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hero-animate-1 { animation: heroFadeUp     .85s .05s cubic-bezier(.4,0,.2,1) both; }
.hero-animate-2 { animation: heroSlideRight .9s  .2s  cubic-bezier(.4,0,.2,1) both; }
.hero-animate-3 { animation: heroFadeUp     .9s  .4s  cubic-bezier(.4,0,.2,1) both; }
.hero-animate-4 { animation: heroFadeUp     .9s  .6s  cubic-bezier(.4,0,.2,1) both; }
.hero-animate-5 { animation: heroSlideLeft  .9s  .15s cubic-bezier(.4,0,.2,1) both; }
.hero-animate-6 { animation: heroFadeUp     .9s  .8s  cubic-bezier(.4,0,.2,1) both; }

/* ── 3. Typewriter cursor blink ── */
@keyframes blink-cursor {
    0%, 100% { border-right-color: #3cb526; }
    50%       { border-right-color: transparent; }
}
.typewriter-cursor {
    border-right: 3px solid #3cb526;
    animation: blink-cursor .75s step-end infinite;
    padding-right: 3px;
}

/* ── 4. Float / bob ── */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    33%       { transform: translateY(-14px) rotate(2.5deg); }
    66%       { transform: translateY(-7px)  rotate(-1.5deg); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}
.float-anim    { animation: float-gentle 6s   ease-in-out infinite; }
.float-slow    { animation: float-slow   9s   ease-in-out infinite; }
.float-delay-1 { animation-delay: -2.2s; }
.float-delay-2 { animation-delay: -4.4s; }
.float-delay-3 { animation-delay: -1.1s; }

/* ── 5. Animated gradient background (stats strip & hero) ── */
@keyframes gradient-pan {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.stats-strip {
    background: linear-gradient(270deg, #0d2137, #1b3a5c, #0d4a2d, #1b3a5c, #0d2137) !important;
    background-size: 400% 400% !important;
    animation: gradient-pan 10s ease infinite;
}

/* ── 6. Hero background grid drift ── */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(60,181,38,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,181,38,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    animation: grid-drift 20s linear infinite;
    z-index: 0;
}
@keyframes grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 48px 48px; }
}

/* ── 7. Shimmer sweep on primary button hover ── */
@keyframes shimmer-sweep {
    from { left: -80%; }
    to   { left: 120%; }
}
.btn-primary-axog {
    overflow: hidden;
}
.btn-primary-axog::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: none;
}
.btn-primary-axog:hover::after {
    animation: shimmer-sweep .6s ease forwards;
}

/* ── 8. Pulse ring ── */
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: .6; }
    70%  { transform: scale(1.7); opacity: 0;  }
    100% { transform: scale(1.7); opacity: 0;  }
}
.pulse-ring {
    position: relative;
    display: inline-block;
}
.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: rgba(60,181,38,.4);
    animation: pulse-ring 2.2s cubic-bezier(.3,0,.7,1) infinite;
}

/* ── 9. Staggered card entrance ── */
@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(38px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.card-stagger              { animation: cardSlideUp .6s cubic-bezier(.4,0,.2,1) both; }
.card-stagger:nth-child(1) { animation-delay: .04s; }
.card-stagger:nth-child(2) { animation-delay: .11s; }
.card-stagger:nth-child(3) { animation-delay: .18s; }
.card-stagger:nth-child(4) { animation-delay: .25s; }
.card-stagger:nth-child(5) { animation-delay: .32s; }
.card-stagger:nth-child(6) { animation-delay: .39s; }
.card-stagger:nth-child(7) { animation-delay: .46s; }
.card-stagger:nth-child(8) { animation-delay: .53s; }

/* ── 10. Morphing blob ── */
@keyframes blob-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50%       { border-radius: 50% 60% 30% 60% / 30% 70% 60% 40%; }
    75%       { border-radius: 40% 60% 60% 30% / 60% 40% 60% 30%; }
}
.blob-bg {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph 10s ease-in-out infinite;
    pointer-events: none;
}

/* ── 11. Marquee ticker ── */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-wrap  { overflow: hidden; }
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 24s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.trust-ticker {
    background: rgba(255,255,255,.04);
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    padding: .6rem 0;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 1.5rem;
}
.trust-item i { color: #3cb526; }

/* ── 12. Scroll progress bar ── */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #3cb526, #1b3a5c);
    z-index: 9999;
    transition: width .06s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(60,181,38,.55);
}

/* ── 13. Back to Top ── */
#back-to-top {
    position: fixed;
    bottom: 2rem; right: 2rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3cb526, #2d8a1c);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(60,181,38,.5);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s, transform .3s, box-shadow .3s;
    z-index: 1000;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover   { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(60,181,38,.65); }

/* ── 14. Animated input focus glow ── */
@keyframes input-glow {
    0%   { box-shadow: 0 0 0 0   rgba(60,181,38,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(60,181,38,0);  }
    100% { box-shadow: 0 0 0 0   rgba(60,181,38,0);  }
}
.form-control:focus, .form-select:focus { animation: input-glow .65s ease-out; }

/* ── 15. Ripple on click ── */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: ripple-expand .65s linear;
    pointer-events: none;
}
@keyframes ripple-expand { to { transform: scale(4); opacity: 0; } }

/* ── 16. Contractor card green top bar slide in ── */
.contractor-card {
    position: relative;
}
.contractor-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3cb526, #1b3a5c);
    border-radius: var(--radius-md, 14px) var(--radius-md, 14px) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.contractor-card:hover::before { transform: scaleX(1); }

/* ── 17. Section heading animated underline ── */
.section-heading-underline { position: relative; display: inline-block; }
.section-heading-underline::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 3px;
    background: linear-gradient(90deg, #3cb526, #1b3a5c);
    border-radius: 99px;
    transition: width .75s cubic-bezier(.4,0,.2,1);
}
.section-heading-underline.visible::after { width: 100%; }

/* ── 18. Nav link underline slide ── */
.nav-link-axog { position: relative; }
.nav-link-axog::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: linear-gradient(90deg, #3cb526, #2d8a1c);
    border-radius: 99px;
    transition: width .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1);
}
.nav-link-axog:hover::after, .nav-link-axog.active::after { width: 80%; left: 10%; }

/* ── 19. Logo hover wiggle ── */
@keyframes logo-wiggle {
    0%, 100% { transform: rotate(0deg)  scale(1); }
    25%       { transform: rotate(-3deg) scale(1.06); }
    75%       { transform: rotate(3deg)  scale(1.06); }
}
.nav-brand-axog:hover img { animation: logo-wiggle .5s ease; }

/* ── 20. Icon spin on card hover ── */
@keyframes spin-once {
    from { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.18); }
    to   { transform: rotate(360deg) scale(1); }
}
.axog-card:hover .icon-spin { animation: spin-once .55s cubic-bezier(.4,0,.2,1); }

/* ── 21. Stat number flash on count-up complete ── */
@keyframes num-flash {
    0%   { color: #3cb526; transform: scale(1.15); }
    100% { color: inherit;  transform: scale(1); }
}
.count-flash { animation: num-flash .35s ease-out; }

/* ── 22. Card hover gradient overlay ── */
.axog-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(135deg, rgba(60,181,38,.06), rgba(27,58,92,.06));
    transition: opacity .35s;
    pointer-events: none;
}
.axog-card:hover::after { opacity: 1; }

/* ── 23. Floating icon cluster items ── */
.icon-cluster-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    padding: .65rem;
    animation: float-gentle 6s ease-in-out infinite;
}

/* ── 24. Skeleton shimmer (loading state) ── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* ── 25. Page-level fade in ── */
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.page-content { animation: page-fade-in .4s ease both; }

/* ── 26. Category tag bounce on hover ── */
@keyframes tag-bounce {
    0%, 100% { transform: scale(1); }
    40%       { transform: scale(1.12); }
    70%       { transform: scale(.95); }
}
.section-tag:hover { animation: tag-bounce .4s ease; cursor: default; }

/* ── 27. Badge "verified" shimmer glow ── */
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(60,181,38,.2); }
    50%       { box-shadow: 0 0 14px rgba(60,181,38,.55); }
}
.badge-verified { animation: badge-glow 2.5s ease-in-out infinite; }

/* ── 28. Step number pulse ── */
.step-number {
    animation: step-pulse 3s ease-in-out infinite;
}
@keyframes step-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(60,181,38,.3); }
    50%       { box-shadow: 0 4px 28px rgba(60,181,38,.65); }
}

/* ── 29. Hero orb enhanced animation ── */
@keyframes float-orb {
    0%, 100% { transform: translateY(0)    scale(1)    rotate(0deg); }
    33%       { transform: translateY(-30px) scale(1.06) rotate(5deg); }
    66%       { transform: translateY(-15px) scale(.97)  rotate(-3deg); }
}
.hero-orb { animation: float-orb 10s ease-in-out infinite !important; }
.hero-orb-2 { animation-duration: 13s !important; animation-delay: -4s !important; }

/* ── 30. Tooltip pop ── */
@keyframes tooltip-pop {
    from { opacity: 0; transform: scale(.85) translateY(4px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
[data-bs-toggle="tooltip"]:hover .tooltip { animation: tooltip-pop .2s ease; }