.hero-taxi{position:relative;width:100%;min-width:0}
.hero-taxi-scene{position:relative;overflow:hidden;width:100%;aspect-ratio:2.5;background:#172839;border-radius:12px;isolation:isolate;contain:layout paint}
.hero-taxi-city{position:absolute;width:110%;max-width:none;height:100%;left:-5%;bottom:0;object-fit:fill;animation:hero-taxi-travel 30s linear infinite;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);will-change:transform}
.hero-taxi-minato{animation-delay:-10s}
.hero-taxi-asakusa{animation-delay:0s}
.hero-taxi-sumida{animation-delay:-20s}
.hero-taxi-road{position:absolute;bottom:1%;left:0;width:100%;height:9%;background:#313b55}
.hero-taxi-dashes{position:absolute;top:38%;left:0;width:calc(100% + 100px);height:20%;background:repeating-linear-gradient(to right,#ffc347 0 50px,transparent 50px 100px);animation:hero-taxi-road 1.2s linear infinite}
.hero-taxi-cab{position:absolute;width:76%;left:12%;bottom:1%;aspect-ratio:1983 / 793;animation:hero-taxi-bounce .5s steps(2,end) infinite alternate}
.hero-taxi-cab>img{display:block;width:100%;height:auto}
.hero-taxi-wheel{position:absolute;width:6.6%;aspect-ratio:1;top:67.2%;border-radius:50%;background-image:url('assets/hero-taxi/taxi.webp');background-size:1515.15% auto;animation:hero-taxi-spin .75s linear infinite}
.hero-taxi-rear{left:26.3%;background-position:28.15% 80.8%}
.hero-taxi-front{left:69.6%;background-position:74.5% 80.8%}
.hero-taxi-city,.hero-taxi-cab,.hero-taxi-wheel{image-rendering:pixelated}
.hero-taxi-toggle{position:absolute;right:6px;top:6px;z-index:2;width:36px;height:36px;border:1px solid #75899d;border-radius:50%;padding:0;background:#102231dd;color:#fff;font:700 14px/1 system-ui;cursor:pointer;display:grid;place-items:center}
.hero-taxi-toggle[hidden]{display:none}
.hero-taxi-toggle:focus-visible{outline:3px solid #f4ce58;outline-offset:3px}
.hero-taxi[data-loading] .hero-taxi-scene *,.hero-taxi[data-paused] .hero-taxi-scene *,.hero-taxi[data-offscreen] .hero-taxi-scene *{animation-play-state:paused}
@keyframes hero-taxi-travel{from{transform:translateX(95.4545%)}to{transform:translateX(-177.2727%)}}
@keyframes hero-taxi-road{to{transform:translateX(-100px)}}
@keyframes hero-taxi-bounce{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes hero-taxi-spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.driver-illustration.hero-taxi{max-width:100%;margin-top:10px}.hero-taxi-toggle{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.hero-taxi-scene *{animation:none!important;will-change:auto}.hero-taxi-city:not(.hero-taxi-minato){display:none}.hero-taxi-toggle{display:none}}