/* One photographic room: the three cars share floor, light and perspective. */
.hero--car .hero-horizon{opacity:.2}
.hero--car .hero-content{position:relative;z-index:2;justify-content:flex-end;padding-top:400px;padding-bottom:56px}
.hero--car .hero-meta{position:absolute;top:110px;left:40px;right:40px;color:#ffffffb0;text-shadow:0 1px 8px #050505}
.hero-car-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:1400px}
.hero-car-ambient,.hero-car-floor{display:none}
.hero-car-rig{position:absolute;left:50%;top:46px;width:min(1120px,calc(100% - 48px));aspect-ratio:22/9.35;transform:translate3d(calc(-50% + var(--car-x,0px)),var(--car-y,0px),0) rotateY(var(--car-turn,0deg));transform-origin:50% 65%;will-change:transform}
.hero-car-frame{position:absolute;inset:0;isolation:isolate;mask-image:linear-gradient(to right,transparent,#000 3%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 74%,transparent 96%);mask-composite:intersect;animation:car-reveal 1.8s cubic-bezier(.18,.7,.28,1) both}
.hero-car-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#050505cc,transparent 34%);pointer-events:none}
.hero-car-photo{display:block;width:100%;height:100%;object-fit:contain}
.hero-car-sheen{position:absolute;inset:-10%;background:linear-gradient(110deg,transparent 42%,#ffffff0d 50%,transparent 58%);mix-blend-mode:screen;opacity:0;animation:car-light-pass 2.5s ease-in-out .9s both}
.hero-car-vignette{display:none}
.hero--car h1{margin-top:24px;text-shadow:0 2px 35px #05050588}
.hero--car .hero-lower{position:relative;isolation:isolate}
.hero--car.is-car-away .hero-car-frame,.hero--car.is-car-away .hero-car-sheen{animation-play-state:paused}
@keyframes car-reveal{from{opacity:0;transform:translate3d(24px,8px,-40px) rotateY(-2deg) scale(.98)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}}
@keyframes car-light-pass{0%{opacity:0;transform:translateX(-80%)}20%{opacity:.4}75%{opacity:.25}100%{opacity:0;transform:translateX(90%)}}
@media(min-width:768px) and (max-width:1100px){.hero-car-rig{top:145px;width:calc(100% - 48px)}.hero--car .hero-content{padding-top:370px;justify-content:center}}
@media(max-width:767px){
 .hero-car-rig{top:76px;width:100%}
 .hero-car-frame{mask-image:linear-gradient(to right,transparent,#000 2%,#000 99%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 87%,transparent)}
 .hero--car .hero-content{justify-content:flex-start;min-height:0;padding-top:285px;padding-bottom:40px}
 .hero--car .hero-meta{position:static;height:32px;font-size:8px;letter-spacing:.13em}
 .hero--car h1{margin-top:24px;font-size:clamp(30px,9.6vw,41.6px)}
 .hero--car h1>span{white-space:nowrap}
 .hero--car .hero-lower{margin-top:28px;padding-top:22px}
 .hero--car .hero-rule{margin-top:32px}
}
@media(max-width:767px) and (max-height:700px){
 .hero-car-rig{top:70px}
 .hero--car .hero-content{padding-top:230px;padding-bottom:28px}
 .hero--car .hero-meta{height:25px;font-size:7px}
 .hero--car h1{margin-top:20px}
 .hero--car .hero-lower{margin-top:20px;padding-top:18px;gap:16px}
 .hero--car .hero-rule{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){
 .hero-car-frame,.hero-car-sheen{animation:none!important}
 .hero-car-rig{transform:translateX(-50%)!important;will-change:auto}
 .hero-car-sheen{display:none}
}
