/* Animation Base Class */
.animate-on-scroll {
    opacity: 0;
    /* Hidden by default */
    transform: translateY(80px) scale(0.95);
    /* Moved down more and slightly smaller */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* State when visible */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Optional: Different Animation Variations */
.animate-fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.animate-fade-in.is-visible {
    opacity: 1;
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   BUS LOADER STYLES (Moved from loader_new.php)
   ========================================= */

:root {
    --red: #df2228;
}

.loaderOverlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    /* background: #fff; Ensure it has a background to cover content */
    z-index: 1029;
    /* Below navbar (1030) */
    background: #ffffff;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.loaderWrap {
    width: 280px;
    height: 120px;
    /* Increased height to fit road */
    position: relative;
    overflow: hidden;
    transform: scale(1.5);
    /* Increased scale as requested */
    transform-origin: center;
}

.busSvg {
    position: absolute;
    left: 50%;
    top: 26px;
    width: 120px;
    height: auto;
    transform: translateX(-50%);
    will-change: transform;
    /* Removed driveFade animation to keep bus stationary */
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .10));
}


.bus-body {
    transform-box: fill-box;
    transform-origin: 50% 85%;
    animation: suspension .34s ease-in-out infinite alternate;
}

@keyframes suspension {
    from {
        transform: translateY(0px) rotate(-0.25deg);
    }

    to {
        transform: translateY(2.4px) rotate(0.25deg);
    }
}

/* Removed forced red outline styles to allow original SVG colors (filled red) */

/* Spinning wheels */
.wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin .75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.road {
    position: absolute;
    left: 50%;
    bottom: 50px;
    width: 240px;
    height: 4px;
    transform: translateX(-50%);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.road::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200%;
    background: repeating-linear-gradient(90deg,
            #aaa 0,
            #aaa 50px,
            transparent 50px,
            transparent 130px);
    animation: roadMove 1.2s linear infinite;
}

@keyframes roadMove {
    from {
        transform: translateX(-130px);
    }

    to {
        transform: translateX(0);
    }
}

.wind {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wind i {
    position: absolute;
    left: -80px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    animation: wind 1.05s linear infinite;
    filter: blur(.1px);
}

.wind i:nth-child(1) {
    top: 30px;
    width: 56px;
    opacity: .45;
    animation-duration: 1.10s;
}

.wind i:nth-child(2) {
    top: 40px;
    width: 84px;
    opacity: .65;
    animation-duration: 0.98s;
}

.wind i:nth-child(3) {
    top: 50px;
    width: 48px;
    opacity: .40;
    animation-duration: 1.18s;
}

@keyframes wind {
    to {
        transform: translateX(420px);
    }
}

.cloud {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 11px;
    border-radius: 999px;
    background: rgba(189, 189, 189, 0.9);
    left: -60px;
    animation: cloud 4.2s linear infinite;
    filter: blur(.25px);
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(189, 189, 189, 0.9);
}

.cloud::before {
    width: 14px;
    height: 14px;
    left: 6px;
    top: -7px;
}

.cloud::after {
    width: 18px;
    height: 18px;
    left: 14px;
    top: -9px;
}

.cloud.c2 {
    top: 18px;
    transform: scale(.75);
    opacity: .45;
    animation-duration: 5.2s;
}

.cloud.c3 {
    top: 26px;
    transform: scale(.6);
    opacity: .35;
    animation-duration: 6.0s;
}

@keyframes cloud {
    to {
        transform: translateX(520px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .busSvg,
    .bus-body,
    .wheel,
    .road::before,
    .wind i,
    .cloud {
        animation: none !important;
    }
}