/* Wheelz landing page - 10 second looping motion graphic.
   Pure SVG + CSS keyframes (one 10s timeline); only the stat counters use a tiny script. */

.wm-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.wm-svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.wm-svg text { font-family: inherit; }
.wm-svg * { transform-box: fill-box; }

.wm-toggle {
    position: absolute; right: 12px; bottom: 12px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(2, 6, 23, 0.65); color: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; opacity: .75; transition: opacity .2s;
}
.wm-toggle:hover, .wm-toggle:focus-visible { opacity: 1; }
.wm-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.wm-toggle .wm-ico-play { display: none; }
.wm-paused .wm-toggle .wm-ico-pause { display: none; }
.wm-paused .wm-toggle .wm-ico-play { display: block; }

.wm-paused .wm-svg *, .wm-offscreen .wm-svg * { animation-play-state: paused !important; }

/* ---- timeline: every animation below shares the same 10s loop ---- */
.wm-s1, .wm-s2, .wm-s3, .wm-s4, .wm-glow {
    animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: both;
    animation-timing-function: linear;
}
.wm-glow { animation-name: wm-glow; animation-duration: 16s; }
@keyframes wm-glow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -30px); } }

/* scene visibility */
.wm-s1 { animation-name: wm-s1; }
.wm-s2 { animation-name: wm-s2; }
.wm-s3 { animation-name: wm-s3; }
.wm-s4 { animation-name: wm-s4; }
@keyframes wm-s1 { 0% { opacity: 0; } 3% { opacity: 1; } 24% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wm-s2 { 0%, 24% { opacity: 0; } 28% { opacity: 1; } 47% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wm-s3 { 0%, 47% { opacity: 0; } 51% { opacity: 1; } 73% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wm-s4 { 0%, 73% { opacity: 0; } 77% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }

/* generic element animation settings */
.wm-a { animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* ---- Scene 1: the car drives in ---- */
.wm-car { animation-name: wm-car; animation-timing-function: cubic-bezier(.3, .6, .3, 1); }
@keyframes wm-car {
    0% { transform: translateX(-520px); }
    17% { transform: translateX(0); }
    21% { transform: translateX(0); animation-timing-function: ease-in; }
    27% { transform: translateX(640px); }
    100% { transform: translateX(640px); }
}
.wm-road-dash { stroke-dasharray: 60 50; animation: wm-road 0.9s linear infinite; }
@keyframes wm-road { to { stroke-dashoffset: -110; } }
.wm-wheel { transform-origin: center; animation: wm-spin 0.5s linear infinite; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

.wm-h1a { animation-name: wm-rise-a; }
.wm-h1b { animation-name: wm-rise-b; }
@keyframes wm-rise-a { 0%, 5% { opacity: 0; transform: translateY(40px); } 10% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes wm-rise-b { 0%, 9% { opacity: 0; transform: translateY(40px); } 14% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }

/* ---- Scene 2: modules connect ---- */
.wm-h2 { animation-name: wm-h2; }
@keyframes wm-h2 { 0%, 28% { opacity: 0; transform: translateY(30px); } 32% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
.wm-hub { transform-origin: center; animation-name: wm-hub; }
@keyframes wm-hub { 0%, 28% { opacity: 0; transform: scale(.3); } 33% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
.wm-link { stroke-dasharray: 1; animation-name: wm-link; }
@keyframes wm-link { 0%, 33% { stroke-dashoffset: 1; } 38% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.wm-tile { transform-origin: center; animation-name: wm-tile; }
@keyframes wm-tile { 0%, 33% { opacity: 0; transform: scale(.2); } 38% { opacity: 1; transform: scale(1.08); } 40% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
.wm-pulse { transform-origin: center; animation: wm-pulse 2.5s ease-out infinite; }
@keyframes wm-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---- Scene 3: follow-up alerts ---- */
.wm-h3 { animation-name: wm-h3; }
@keyframes wm-h3 { 0%, 51% { opacity: 0; transform: translateY(30px); } 55% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
.wm-alert { animation-name: wm-alert; }
@keyframes wm-alert { 0%, 54% { opacity: 0; transform: translateX(200px); } 59% { opacity: 1; transform: translateX(-12px); } 61% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); } }

/* ---- Scene 4: brand + call to action ---- */
.wm-logo { transform-origin: center; animation-name: wm-logo; }
@keyframes wm-logo { 0%, 77% { opacity: 0; transform: scale(.4) rotate(-90deg); } 83% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.wm-word { animation-name: wm-word; }
@keyframes wm-word { 0%, 80% { opacity: 0; transform: translateY(40px); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
.wm-tag { animation-name: wm-tag; }
@keyframes wm-tag { 0%, 84% { opacity: 0; transform: translateY(30px); } 89% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
.wm-cta { transform-origin: center; animation-name: wm-cta; }
@keyframes wm-cta { 0%, 88% { opacity: 0; transform: scale(.7); } 92% { opacity: 1; transform: scale(1.06); } 94% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
.wm-cta-ring { transform-origin: center; animation: wm-cta-ring 1.6s ease-out infinite; }
@keyframes wm-cta-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.25, 1.5); opacity: 0; } }

/* reduced motion: show the final brand frame only */
@media (prefers-reduced-motion: reduce) {
    .wm-svg *, .wm-svg *::before { animation: none !important; }
    .wm-s1, .wm-s2, .wm-s3 { display: none; }
    .wm-s4, .wm-s4 * { opacity: 1; transform: none; }
    .wm-toggle { display: none; }
}

/* ---- Home hero: give the animation more room (desktop) ----
   The home hero text column is narrower (col-lg-5) and its type is scaled down so the
   copy no longer out-heights the animation. Scoped to .hero-home so the other landing
   pages that share .hero-title keep their sizes. */
@media (min-width: 992px) {
    /* Size the hero to its content instead of the full viewport height (bootstrap min-vh-100),
       so there is no big empty band above the text; top padding clears the fixed navbar. */
    .hero-home { min-height: 0; }
    .hero-home > .container > .row { min-height: 0 !important; padding-top: 112px; padding-bottom: 72px; }
    .hero-home .hero-title { font-size: 2.1rem; line-height: 1.22; margin-bottom: 1rem; }
    .hero-home .hero-subtitle { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1rem; }
    .hero-home .hero-seo-line { font-size: 0.8rem; line-height: 1.55; margin-bottom: 0.6rem; }
    .hero-home .hero-trust-line { font-size: 0.85rem; margin-bottom: 1rem; }
    .hero-home .hero-buttons { margin-bottom: 1.25rem; }
    .hero-home .hero-buttons .btn { padding: 0.7rem 1.5rem; font-size: 1rem; margin-top: 8px; }
    .hero-home .hero-stats { margin-top: 1rem !important; }
    .hero-home .stat-item h3 { font-size: 1.6rem; margin-bottom: 0.25rem; }
    .hero-home .stat-item p { font-size: 0.82rem; margin-bottom: 0; }
}