/* ==========================================================================
   Taxi drive-off effect for signing in and out (drive-off.js).
   ========================================================================== */

.do-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: radial-gradient(80% 60% at 50% 60%, rgba(15, 67, 55, .25), rgba(8, 24, 20, .55));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .25s ease, visibility .25s;
}

.do-overlay.is-on { opacity: 1; visibility: visible; pointer-events: all; cursor: progress; }

/* the road the cab drives on */
.do-road {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 46px);
    height: 5px;
    background: repeating-linear-gradient(90deg, rgba(240, 192, 112, .9) 0 40px, transparent 40px 72px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    animation: do-lane .35s linear infinite;
}

.do-overlay.is-out .do-road { animation-direction: reverse; }
@keyframes do-lane { to { background-position: -72px 0; } }

.do-caption {
    position: absolute;
    left: 50%;
    top: calc(50% - 110px);
    transform: translate(-50%, 10px);
    padding: 10px 20px;
    border-radius: 999px;
    font: 700 16px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .01em;
    color: #fff;
    background: #0f4337;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .3s ease .1s, transform .4s cubic-bezier(.2, .8, .2, 1) .1s;
    white-space: nowrap;
}

.do-caption i { color: #f0a132; margin-right: 8px; font-style: normal; }
.do-overlay.is-on .do-caption { opacity: 1; transform: translate(-50%, 0); }

.do-cab {
    position: absolute;
    left: 0;
    top: calc(50% - 50px);
    width: 250px;
    will-change: transform;
}

.do-cab .lp-veh { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .45)); }
.do-cab .lp-veh__rim { transform-box: fill-box; transform-origin: center; animation: do-spin .18s linear infinite; }
.do-overlay.is-out .do-cab .lp-veh { transform: scaleX(-1); }
.do-overlay.is-out .do-cab .lp-veh__sign { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
@keyframes do-spin { to { transform: rotate(360deg); } }

/* launch wobble: the body squats on take-off */
.do-cab__body { animation: do-squat .5s cubic-bezier(.3, 1.6, .5, 1) both; transform-origin: 20% 100%; }
@keyframes do-squat { 0% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }

.do-puff {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(242, 243, 239, 1) 0%, rgba(214, 217, 211, .8) 40%, rgba(196, 200, 193, 0) 70%);
    filter: blur(3px);
    animation: do-puff var(--life, 1s) cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes do-puff {
    0% { opacity: .95; transform: translate(0, 0) scale(.3); }
    100% { opacity: 0; transform: translate(var(--dx, -40px), var(--dy, -50px)) scale(var(--s, 2.6)); }
}

@media (prefers-reduced-motion: reduce) {
    .do-overlay { display: none; }
}