/* Shared neutral card surface; accent only distinguishes the selected mode. */
.road-stage .mode,.road-stage .mode:hover,.road-stage .mode[aria-pressed=true],.cool .road-stage .mode{background:linear-gradient(145deg,#19282ff2,#091820f5)!important;backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s!important;transform:none!important}
.road-stage .mode[aria-pressed=false]{border-color:#a9c9c845!important;box-shadow:0 8px 24px #0002!important}
.road-stage .mode[aria-pressed=true]{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent),0 8px 24px #0003!important}
.road-stage .mode img{top:10px!important;width:174px!important;height:88px!important;transform:translateX(-50%)!important;transition:filter .35s,scale .35s!important;scale:1}
.road-stage .mode:hover img{transform:translateX(-50%)!important;scale:1.025;filter:drop-shadow(0 7px 8px #0005)!important}
.site-header.hero-blend{background:transparent!important;backdrop-filter:none!important;border-bottom-color:transparent!important}
.site-header.hero-blend.scrolled{background:#071e2438!important;backdrop-filter:blur(12px)!important}
/* Explicit scene stacking: every horizon light is below the vehicle and copy. */
.road-stage>main{position:relative;z-index:3}
.road-scene{z-index:3;isolation:isolate}
.road-scene .vehicle-float{left:0%;width:100%;bottom:7%}
.road-ground-reflection{left:0%;width:100%}
.road-scene .van-arrival.arriving{animation:roadVanArrivalLong 2.6s cubic-bezier(.3,.5,.45,1) both}
@keyframes roadVanArrivalLong{0%{opacity:0;transform:translate(9%,-5%) scale(.83);filter:blur(1px)}18%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate(0,0) scale(1);filter:none}}
.road-scene .hero-van{position:relative;z-index:2}
/* Broad, soft beams are masked by the van itself, not drawn across the body. */
.road-high-beams{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.road-high-beams path{filter:blur(7px)}
.road-scene .van-arrival.arriving .road-high-beams{animation:roadLongBeams 3.15s ease-out both}
.road-scene .van-arrival.arriving .hero-headlamp{animation:roadLongLampGlow 3.15s ease-out both}
@keyframes roadLongBeams{0%,82%{opacity:0}100%{opacity:.9}}
@keyframes roadLongLampGlow{0%,82%{opacity:0}100%{opacity:1}}
/* A full-width gold bloom, with feathered edges rather than a travelling line. */
.road-horizon-trace{position:absolute;left:-10%;width:120%;top:55%;height:23%;z-index:1;overflow:visible;pointer-events:none;background:radial-gradient(ellipse 65% 30% at 50% 50%,#f7ce8b3b,transparent 80%);filter:blur(10px);mix-blend-mode:screen}
.road-horizon-trace:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 35% 42% at 35% 50%,#ffdf9c80,#ecc68628 40%,transparent 75%);animation:roadHorizonSweep 8s ease-in-out infinite alternate}
@keyframes roadHorizonSweep{from{transform:translateX(-14%);opacity:.65}to{transform:translateX(27%);opacity:1}}
.road-stage.is-paused .road-horizon-trace:after{animation-play-state:paused}
/* Fade to the exact same colour on both sides of the section boundary. */
.hero-city-edge{position:absolute;left:0;right:0;bottom:-1px;height:82px;z-index:2;pointer-events:none;background:linear-gradient(transparent,#071d25)}
.hero-city-edge svg{display:none}
.road-stage+.city-section{border-top:0!important;background:linear-gradient(180deg,#071d25 0%,#0c292e 70%,#0d3034 100%)!important}
.cool .road-stage+.city-section{background:linear-gradient(180deg,#071d25 0%,#0b293c 70%,#103c50 100%)!important}
.road-stage+.city-section:before{display:none!important}
.road-stage>.ambient-field,.road-stage>.ambient{display:none!important}
.road-star-field{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none;opacity:.8}
.road-stage~section :is(.fleet-visual,.city-art img,.anniversary-mark,.milestone-art img,.story-image .image-shell){clip-path:none!important}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{height:58px!important;width:138px!important;top:8px!important}}
@media(max-width:680px){.hero-city-edge{height:64px}.road-horizon-trace{top:65%;height:18%}}
@media(prefers-reduced-motion:reduce){.road-scene .van-arrival.arriving,.road-scene .van-arrival.arriving .hero-headlamp,.road-scene .van-arrival.arriving .road-high-beams{animation:none!important;transform:none!important;filter:none!important}.road-horizon-trace:after{animation:none;opacity:.4}.road-stage .mode:hover img{scale:1}}

/* Restore the object motion with enough inset for its full rotated bounds. */
.road-stage .mode img{top:15px!important;scale:1!important;transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s!important}
.road-stage .mode:hover img,.road-stage .mode:focus-visible img{transform:translateX(-50%) translateY(-3px) rotate(5deg) scale(1.07)!important;filter:drop-shadow(0 9px 10px #0006) drop-shadow(0 0 7px #edce8540)!important}
.road-stage .mode[data-mode=cool]:hover img{transform:translateX(-50%) translateY(-3px) rotate(-5deg) scale(1.07)!important}
.road-horizon-trace{top:calc(62% - 42px)!important;left:0!important;width:100%!important;height:84px!important;filter:none!important;background:linear-gradient(180deg,transparent 0%,#e8b66a0c 20%,#f4c57655 43%,#ffe1a0a8 50%,#efc27e42 57%,#dfac5b10 76%,transparent 100%)!important;mix-blend-mode:screen}
.road-horizon-trace:after{inset:-20px auto!important;left:0!important;width:45%!important;background:radial-gradient(ellipse 60% 24% at 50% 50%,#fff1cbe6,#f5c66f8c 28%,#edbc6440 48%,transparent 80%)!important;animation:roadHorizonAcross92 6s linear infinite!important}
@keyframes roadHorizonAcross92{from{transform:translateX(-105%)}to{transform:translateX(330%)}}
.road-high-beams path{filter:none!important}
.road-high-beams{opacity:1}
.road-scene .hero-headlamp-near{width:15%;height:26%;background:radial-gradient(ellipse,#fff 0 3%,#effaffe8 8%,#d8f2ffa6 18%,#c4e7ff38 39%,transparent 72%)}
.road-scene .hero-headlamp-far{width:10%;height:22%;background:radial-gradient(ellipse,#fff 0 4%,#effaffe8 9%,#d8f2ff9e 20%,#c4e7ff30 40%,transparent 72%)}
@media(max-width:680px){.road-horizon-trace{top:calc(72% - 42px)!important}.road-stage .mode img{height:74px!important;width:148px!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{top:12px!important;height:56px!important;width:135px!important}}
@media(prefers-reduced-motion:reduce){.road-horizon-trace:after{animation:none!important;transform:translateX(80%)}.road-stage .mode:hover img,.road-stage .mode:focus-visible img,.road-stage .mode[data-mode=cool]:hover img{transform:translateX(-50%)!important}}

/* Larger objects may sit behind the labels; labels remain above and readable. */
.road-stage .mode img{width:220px!important;height:114px!important;top:22px!important;z-index:1}
.road-stage .mode-name,.road-stage .mode-detail,.road-stage .mode-check{z-index:3;text-shadow:0 1px 5px #07151d,0 0 12px #07151d}
.road-stage .mode:hover img,.road-stage .mode:focus-visible img{transform:translateX(-50%) translateY(-3px) rotate(5deg) scale(1.07)!important}
.road-scene .van-arrival.arriving{animation-duration:2.15s!important}
.road-scene .van-arrival.arriving .road-high-beams,.road-scene .van-arrival.arriving .hero-headlamp{animation-duration:2.65s!important}
.road-horizon-trace:after{animation-duration:4.2s!important}
@media(max-width:680px){.road-stage .mode img{width:186px!important;height:98px!important;top:19px!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{width:182px!important;height:91px!important;top:17px!important}}
@media(prefers-reduced-motion:reduce){.road-scene .van-arrival.arriving,.road-scene .van-arrival.arriving .road-high-beams,.road-scene .van-arrival.arriving .hero-headlamp{animation:none!important}.road-horizon-trace:after{animation:none!important}}

/* No stationary strip: only the travelling feathered gold bloom remains. */
.road-horizon-trace{background:none!important;filter:none!important;overflow:visible!important}
.road-horizon-trace:after{background:radial-gradient(ellipse 60% 44% at 50% 50%,#fff1cbb0,#f5c66f70 28%,#edbc6424 55%,transparent 80%)!important;filter:blur(14px);border:0!important;box-shadow:none!important}
/* Place the large objects toward the upper right with room to move. */
.road-stage .mode img{left:auto!important;right:16px!important;top:18px!important;transform:none!important;transform-origin:center;scale:1!important}
.road-stage .mode:hover img,.road-stage .mode:focus-visible img{transform:translateY(-3px) rotate(5deg) scale(1.07)!important}
.road-stage .mode[data-mode=cool]:hover img{transform:translateY(-3px) rotate(-5deg) scale(1.07)!important}
@media(max-width:680px){.road-stage .mode img{right:12px!important;top:16px!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{right:12px!important;top:14px!important}}
@media(prefers-reduced-motion:reduce){.road-stage .mode:hover img,.road-stage .mode:focus-visible img,.road-stage .mode[data-mode=cool]:hover img{transform:none!important}}

/* Feather the photographed horizon itself, below the van, headlights and live gold glow. */
.road-stage>.road-backdrop:before{content:'';position:absolute;z-index:1;left:0;right:0;top:62%;height:16%;transform:translateY(-50%);pointer-events:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
/* The travelling light has transparent space around its whole blurred footprint. */
.road-horizon-trace:after{mask-image:radial-gradient(ellipse 60% 45% at 50% 50%,#000 10%,#0009 45%,transparent 84%);-webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 50%,#000 10%,#0009 45%,transparent 84%)}

/* Upper-left object placement, with the small service symbol on the opposite side. */
.road-stage .mode img{left:16px!important;right:auto!important;top:18px!important}
.road-stage .mode-icon{left:auto!important;right:16px!important;top:16px!important}
/* Illuminate the whole horizon with a broad radial falloff, never a bounded strip. */
.road-horizon-trace{top:calc(62% - 90px)!important;height:180px!important;background:radial-gradient(ellipse 90% 35% at 50% 50%,#ffdda566 0%,#e7b56b30 45%,#d9a05009 70%,transparent 100%)!important;filter:blur(15px)!important;border:0!important;box-shadow:none!important;mask-image:none!important;-webkit-mask-image:none!important}
.road-horizon-trace:after{inset:0 auto!important;height:100%!important;width:50%!important;background:radial-gradient(ellipse 55% 32% at 50% 50%,#ffeccac2 0%,#f5c66f75 32%,#edbc6424 58%,transparent 85%)!important;filter:blur(20px)!important;mask-image:none!important;-webkit-mask-image:none!important}
@media(max-width:680px){.road-stage .mode img{left:12px!important;right:auto!important;top:16px!important}.road-horizon-trace{top:calc(72% - 90px)!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{left:12px!important;right:auto!important;top:14px!important}}

/* Restore the original small corner symbols; large artwork retains its separate placement. */
.road-stage .mode-icon{left:17px!important;right:auto!important;top:14px!important;z-index:4}
/* Narrower travelling highlight over a gentle full-width glow, both with radial falloff. */
.road-horizon-trace{top:calc(62% - 70px)!important;height:140px!important;background:radial-gradient(ellipse 95% 22% at 50% 50%,#ffdda54d 0%,#e7b56b22 45%,#d9a05007 70%,transparent 100%)!important;filter:blur(8px)!important}
.road-horizon-trace:after{background:radial-gradient(ellipse 55% 18% at 50% 50%,#ffeccac2 0%,#f5c66f68 32%,#edbc641c 58%,transparent 85%)!important;filter:blur(12px)!important}
@media(max-width:680px){.road-horizon-trace{top:calc(72% - 70px)!important}}

/* Large illustrations at upper right; original small symbols stay at upper left. */
.road-stage .mode img{left:auto!important;right:16px!important;top:18px!important;object-position:right top!important}
.road-stage .mode-icon{left:17px!important;right:auto!important;top:14px!important}
@media(max-width:680px){.road-stage .mode img{left:auto!important;right:12px!important;top:16px!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{left:auto!important;right:12px!important;top:14px!important}}
.city-art{position:relative}
.tower-beacon{position:absolute;z-index:3;width:5px;height:5px;border-radius:50%;pointer-events:none;background:#ff6868;box-shadow:0 0 4px #ff4747b3,0 0 11px #ff333340;transform:translate(-50%,-50%);animation:towerBeacon98 3.2s ease-in-out infinite}
@keyframes towerBeacon98{0%,28%,65%,100%{opacity:.15}42%{opacity:.92}50%{opacity:.55}}
.tower-beacon.is-paused{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tower-beacon{animation:none;opacity:.4}}

/* Compensate for the different transparent padding in the two original objects. */
.road-stage .mode img{right:6px!important;left:auto!important;top:2px!important}
.road-stage .mode[data-mode=cool] img{top:10px!important}
.road-stage .mode:hover img,.road-stage .mode:focus-visible img{transform:rotate(4deg) scale(1.07)!important}
.road-stage .mode[data-mode=cool]:hover img{transform:rotate(-3deg) scale(1.06)!important}
@media(max-width:680px){.road-stage .mode img{right:6px!important;top:2px!important}.road-stage .mode[data-mode=cool] img{top:10px!important}}
@media(min-width:681px) and (max-height:760px){.road-stage .mode img{right:6px!important;top:2px!important}.road-stage .mode[data-mode=cool] img{top:10px!important}}
/* Remove the travelling horizon and its ambient overlays. */
.road-stage>.road-horizon-trace,.road-stage>.road-horizon-glow,.road-stage>.road-reflection-glow{display:none!important}
/* A long soft gold arc circles close to the ground, behind the vehicle. */
.road-gold-orbit{position:absolute;z-index:0;left:4%;bottom:0;width:94%;height:22%;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round;opacity:.7}
.road-gold-orbit .orbit-base{stroke:#e2b665;stroke-width:1;opacity:.18}
.road-gold-orbit .orbit-light{stroke:#f6d58f;stroke-width:1.6;stroke-dasharray:.72 .28;animation:roadGroundOrbit99 5.6s linear infinite;filter:drop-shadow(0 0 3px #ffcc70a0) drop-shadow(0 0 9px #edb55b55)}
@keyframes roadGroundOrbit99{to{stroke-dashoffset:-1}}
.road-stage.is-paused .road-gold-orbit .orbit-light{animation-play-state:paused}
/* The tower signal is an unfocused flare, without a solid circular dot. */
.tower-beacon{width:16px;height:14px;border-radius:0;background:radial-gradient(ellipse,#ffb2aeb3 0%,#ff555566 16%,#f43b3422 35%,transparent 70%);box-shadow:none;filter:blur(.8px)}
.tower-beacon:before{content:'';position:absolute;left:50%;top:50%;width:18px;height:1.5px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#ff77778c,transparent);filter:blur(.7px)}
.tower-beacon:after{content:'';position:absolute;left:50%;top:50%;width:1px;height:11px;transform:translate(-50%,-50%);background:linear-gradient(transparent,#ff999977,transparent);filter:blur(.7px)}
@media(prefers-reduced-motion:reduce){.road-gold-orbit .orbit-light{animation:none;stroke-dasharray:none;opacity:.35}.road-stage .mode:hover img,.road-stage .mode:focus-visible img,.road-stage .mode[data-mode=cool]:hover img{transform:none!important}}
