/* LUCAR V9.4 · Emerald Night · purposeful motion, no UI/data rewrite.
   Transform/opacity only, reduced-motion and keyboard-safe. */
:root{--lu-motion-ease:cubic-bezier(.22,1,.36,1);--lu-motion-fast:230ms;--lu-motion-mid:620ms}
html{scroll-padding-top:clamp(78px,7.5vw,106px)}
body{overflow-x:clip}
/* Editorial readability: retain the approved A character, reduce overly loud headings. */
.hero h1{font-size:clamp(54px,6.3vw,106px);line-height:1.13;letter-spacing:-.042em}
#services .services-heading h2{font-size:clamp(40px,4.2vw,65px);line-height:1.13}
#services .service-row{will-change:auto;transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .48s var(--lu-motion-ease)}
#services .service-row:hover,#services .service-row:focus-visible{transform:translateX(5px)}
.site-header .desktop-nav a{position:relative;transition:color .25s ease}
.site-header .desktop-nav a[aria-current="location"]{color:#dceab7}
.site-header .desktop-nav a[aria-current="location"]::after{transform:scaleX(1);opacity:1}
:where(a,button,input,select):focus-visible{outline:2px solid #bfe285!important;outline-offset:4px!important}
/* Branded cursor response is low amplitude, only desktop fine pointer. */
.vehicle-stage{--lu-spot-x:48%;--lu-spot-y:42%;position:relative;isolation:isolate}
.vehicle-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .55s ease;background:radial-gradient(35rem circle at var(--lu-spot-x) var(--lu-spot-y),rgba(190,221,162,.08),transparent 72%)}
.vehicle-stage:hover::before{opacity:1}
.vehicle-stage .vehicle-media img{transition:opacity .38s ease,filter .8s ease,transform 1s var(--lu-motion-ease)}
.vehicle-stage.changing .vehicle-media img{opacity:.2;transform:scale(1.035)}
.vehicle-stage .vehicle-text{position:relative}
.vehicle-stage .vehicle-text :is(.vehicle-description,.vehicle-rate){transition:opacity .36s ease,transform .56s var(--lu-motion-ease)}
.vehicle-stage.changing .vehicle-text :is(.vehicle-description,.vehicle-rate){opacity:.4;transform:translateY(7px)}
/* Elegant car thumbnails: no generic hover zoom that clips vehicles. */
.v8-product{transition:transform .52s var(--lu-motion-ease),box-shadow .52s ease,border-color .32s ease}
.v8-product:hover{transform:translateY(-5px);border-color:#a5bc886c;box-shadow:0 26px 62px rgba(4,17,10,.24)}
.v8-product .v8-photo-trigger img{transform:none!important}
.v8-photo-hint{transition:opacity .26s ease,transform .48s var(--lu-motion-ease)}
.v8-product .v8-photo-trigger:hover .v8-photo-hint{transform:translateY(0)}
/* Per-card reveal after filtering. The cards are always functional if JS fails. */
@keyframes lucar-card-enter{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.motion-enhanced .v8-product.motion-fresh{animation:lucar-card-enter .55s var(--lu-motion-ease) both;animation-delay:var(--lu-card-delay,0ms)}
/* Chapter reveals are CSS-only when JS is active and intersection tracking exists. */
.motion-enhanced .motion-chapter:not(.motion-in-view) .motion-chapter-heading{opacity:0;transform:translate3d(0,17px,0)}
.motion-enhanced .motion-chapter .motion-chapter-heading{transition:opacity .85s var(--lu-motion-ease),transform .85s var(--lu-motion-ease)}
/* Keep meaningful media as real interaction; subtle frame wipe on state changes. */
#services .service-visual{overflow:hidden;isolation:isolate}
#services .service-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(200,234,180,.08) 50%,transparent 80%);transform:translateX(-120%);z-index:2;opacity:0}
#services .service-visual.motion-switching::after{animation:lucar-service-light .55s ease-out both}
@keyframes lucar-service-light{0%{transform:translateX(-110%);opacity:0}25%{opacity:1}100%{transform:translateX(120%);opacity:0}}
#services .service-visual img{transition:opacity .35s ease,filter .45s ease}
#services .service-visual.motion-switching img{filter:saturate(.75) brightness(.88)}
/* Accessible feedback on press and changed rental estimate. */
.motion-pressed{filter:brightness(1.16);transition:filter .18s ease!important}
#estimateValue.motion-updated{animation:lucar-price-update .46s var(--lu-motion-ease)}
@keyframes lucar-price-update{0%{opacity:.45;transform:translate3d(0,8px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
/* Modal opens using transform/opacity, never animate width/height. */
.overlay:not([hidden]) .overlay-backdrop{animation:lucar-backdrop .24s ease both}
.overlay:not([hidden]) .overlay-panel{animation:lucar-modal .42s var(--lu-motion-ease) both}
@keyframes lucar-backdrop{from{opacity:0}to{opacity:1}}
@keyframes lucar-modal{from{opacity:.45;transform:translate3d(0,18px,0) scale(.982)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
/* Gold/olive components receive a single moving highlight on click/hover, not global glow. */
:is(.booking-cta,.header-contact,.cinematic-watch,.outline-button){position:relative;overflow:hidden}
:is(.booking-cta,.header-contact,.cinematic-watch,.outline-button)::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(245,255,215,.14) 45%,transparent 65%);transform:translateX(-110%);transition:transform .64s var(--lu-motion-ease)}
:is(.booking-cta,.header-contact,.cinematic-watch,.outline-button):hover::before{transform:translateX(110%)}
/* Distinctive but composed scroll-up cinematic treatment. */
#cinema .cinematic-interlude-center{transition:transform .85s var(--lu-motion-ease);transform:translate3d(0,var(--lu-cinema-shift,0px),0)}
#cinema .cinematic-interlude-center h2{text-wrap:balance;max-width:1000px}
#showroom,#fleet,#services,#concierge{scroll-margin-top:100px}
@media(max-width:760px){
 .hero h1{font-size:clamp(44px,10.8vw,72px);line-height:1.13}
 #services .services-heading h2{font-size:clamp(35px,9vw,52px)}
 #services .service-row:hover{transform:none}
 #cinema .cinematic-interlude-center{transform:none}
 .vehicle-stage::before{display:none}
 .v8-product:hover{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-enhanced .motion-chapter:not(.motion-in-view) .motion-chapter-heading{opacity:1;transform:none}
 .motion-enhanced .v8-product.motion-fresh{animation:none}
 .overlay:not([hidden]) .overlay-backdrop,.overlay:not([hidden]) .overlay-panel,#estimateValue.motion-updated,#services .service-visual.motion-switching::after{animation:none}
 .vehicle-stage::before,:is(.booking-cta,.header-contact,.cinematic-watch,.outline-button)::before{display:none}
 #cinema .cinematic-interlude-center{transform:none}
}