/* ธีม */
.depot-theme {
    --depot-yellow: #ff9c19;
    --depot-black: #111;
    --depot-white: #fff;
    --depot-grey: #9aa1a9;
    --depot-glass: #f3f7ff;
    --depot-smoke: #cfd6dd;
}

.splash-card {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    backdrop-filter: saturate(1.05);
}

.splash-wrap {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    justify-items: center;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
    animation: fadeIn .45s ease-out both;
    --rz-primary: #ff9c19;
    --rz-primary-contrast: #000;
}

/* ฉากรถ */
.truck-container {
    width: min(680px,88vw);
    aspect-ratio: 16/9;
    position: relative;
}

.truck-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: -12%; /* จูนให้ล้อแตะถนนพอดี */
    transform: translateX(-50%);
}

/* ถนน (เลื่อนไปทางขวา) */
.road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    height: 32px;
    background: linear-gradient(to bottom,#eaecef,#d7dbe0);
    border-top: 2px solid rgba(0,0,0,.15);
    border-bottom: 2px solid rgba(0,0,0,.12);
    overflow: hidden;
}

    .road .lane {
        position: absolute;
        top: 50%;
        left: -20%;
        width: 140%;
        height: 4px;
        background: repeating-linear-gradient(90deg,var(--depot-white) 0 32px,transparent 32px 64px);
        transform: translateY(-50%);
        opacity: .9;
        animation: laneMove 1.6s linear infinite; /* ← เคลื่อนทางขวา */
    }

/* ทั้งคันเด้งเบา ๆ */
.drive {
    transform-origin: 50% 50%;
    animation: bob 2.4s ease-in-out infinite;
}

/* ล้อ: อยู่กับที่ แต่หมุนแบบสปินเนอร์ */
.wheel .spin {
    transform-origin: center;
    /*animation:wheelSpin 0.9s linear infinite;*/
}

/* ควัน: ลอยขึ้นจากท้ายหัวรถ (ด้านขวาของหัวรถ) */
.smoke {
    opacity: 0
}

.s1 {
    animation: puffUp 1.8s ease-out infinite 0s;
}

.s2 {
    animation: puffUp 1.8s ease-out infinite .25s;
}

.s3 {
    animation: puffUp 1.8s ease-out infinite .5s;
}

/* ข้อความโหลด */
.loading-text {
    display: grid;
    gap: .5rem;
    place-items: center;
    text-align: center;
    color: #1a1a1a;
    font-weight: 600;
}

    .loading-text > div {
        font-size: 1.05rem
    }

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2.5px)
    }
}
/* ถนนเลื่อนไปทางขวา */
@keyframes laneMove {
    to {
        transform: translate(20%,-50%)
    }
}
/* ล้อสปินเนอร์ */
@keyframes wheelSpin {
    to {
        transform: rotate(360deg)
    }
}
/* ควันลอยขึ้น */
@keyframes puffUp {
    0% {
        opacity: 0;
        transform: translate(0,0) scale(.7)
    }

    20% {
        opacity: .75
    }

    100% {
        opacity: 0;
        transform: translate(0,-24px) scale(1.35)
    }
}

/* มือถือ */
@media (max-width:520px) {
    .splash-wrap {
        width: min(92vw,520px);
        padding: 1rem 1.1rem;
        border-radius: 12px;
        background: rgba(255,255,255,.82)
    }

    .road {
        height: 26px
    }
}