/* ============================================================
   SIDE DECORATIVE ANIMATIONS
   ------------------------------------------------------------
   Yeh file sirf us khaali jagah ko cover karti hai jo page ke
   left/right me bachti hai (kyunki .container ki max-width
   1180px hai aur bade screens par bahar khaali space dikhta hai).

   - Purely decorative: pointer-events: none (clicks/content par
     asar nahi padega)
   - Sirf wide screens par dikhta hai jaha wakai khaali jagah ho
   - prefers-reduced-motion respect karta hai
   ============================================================ */

.side-decor {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 140px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;               /* navbar (z-index 1000) aur content ke peeche */
}

.side-decor-left  { left: 0; }
.side-decor-right { right: 0; }

/* ---------- Dashed moving "road" line (beech me) ---------- */
.decor-road {
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    height: 200%;
    transform: translateX(-50%);
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(102, 126, 234, .35) 0px,
        rgba(102, 126, 234, .35) 26px,
        transparent 26px,
        transparent 52px
    );
    animation: roadScroll 3.5s linear infinite;
}

@keyframes roadScroll {
    from { transform: translateX(-50%) translateY(0); }
    to   { transform: translateX(-50%) translateY(52px); }
}

/* ---------- Floating items (bus / cloud / balloon / sparkle) ---------- */
.decor-item {
    position: absolute;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, 0);
    animation-name: floatUp;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .1));
    will-change: transform, opacity;
}

@keyframes floatUp {
    0%   { transform: translate(-50%, 25vh) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: .9; }
    50%  { transform: translate(-50%, 5vh) translateX(22px) rotate(8deg); }
    90%  { opacity: .9; }
    100% { transform: translate(-50%, -25vh) translateX(-22px) rotate(-8deg); opacity: 0; }
}

@keyframes floatUpBounce {
    0%   { transform: translate(-50%, 28vh) translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: .95; }
    50%  { transform: translate(-50%, 6vh) translateY(-6px) rotate(-4deg); }
    90%  { opacity: .95; }
    100% { transform: translate(-50%, -28vh) translateY(0) rotate(4deg); opacity: 0; }
}

/* Bus items get a gentle bounce instead of a plain float */
.decor-item.item-1,
.decor-item.item-2 {
    animation-name: floatUpBounce;
}

.decor-item.item-1 { left: 50%; font-size: 3.8rem; animation-duration: 9s;  animation-delay: 0s;   }
.decor-item.item-2 { left: 65%; font-size: 1.3rem; animation-duration: 11s; animation-delay: 2.5s; }
.decor-item.item-3 { left: 45%; font-size: 1.5rem; animation-duration: 8s;  animation-delay: 5s;   }
.decor-item.item-4 { left: 20%; font-size: 1.2rem; animation-duration: 12s; animation-delay: 1.2s; }

/* ---------- Only show when the viewport actually has empty space
   beside the 1180px container ---------- */
@media (max-width: 1460px) {
    .side-decor { display: none; }
}

/* ---------- Respect reduced-motion users ---------- */
@media (prefers-reduced-motion: reduce) {
    .decor-item,
    .decor-road {
        animation: none;
        opacity: .35;
    }
}