/* A single, aligned photograph; lighting is layered above it without distorting the cars. */
.garage-hero{--accent:#d3a528;--glint-x:18%;padding:2.5rem 3vw 0;max-width:1900px;margin:auto}
.garage-hero[data-active=porsche]{--accent:#e1a0a2;--glint-x:50%}
.garage-hero[data-active=range]{--accent:#b0c7b8;--glint-x:82%}
.garage-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding-bottom:2rem}
.garage-heading .eyebrow{margin-bottom:.7rem;color:var(--muted)}
.garage-heading h1{font-size:clamp(2.8rem,5.5vw,6rem);line-height:1.1}
.garage-heading h1 em{color:var(--paper)}
.scene-instruction{max-width:17rem;color:var(--muted);font-size:.875rem}
.touch-hint{display:none}
.garage-scene{position:relative;isolation:isolate;overflow:hidden;background:#15110d}
.scene-stage{position:relative}.panorama-hint{display:none}
.scene-art{position:relative;pointer-events:none;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.012);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scene-image{display:block;width:100%;height:auto;filter:brightness(.88) saturate(.88);transition:filter .7s ease}
.garage-hero:not([data-active=none]) .scene-image{filter:brightness(.53) saturate(.72)}
.scene-light{position:absolute;inset:0;background:url("garage-scene-clean.webp") center/100% 100% no-repeat;filter:brightness(1.14) saturate(1.06);opacity:0;transition:opacity .65s ease;pointer-events:none}
.light-series{mask-image:radial-gradient(ellipse 20% 48% at 18% 53%,black 48%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 20% 48% at 18% 53%,black 48%,transparent 100%)}
.light-porsche{mask-image:radial-gradient(ellipse 20% 45% at 50% 63%,black 48%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 20% 45% at 50% 63%,black 48%,transparent 100%)}
.light-range{mask-image:radial-gradient(ellipse 20% 48% at 82% 58%,black 48%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 20% 48% at 82% 58%,black 48%,transparent 100%)}
.garage-hero[data-active=series] .light-series,.garage-hero[data-active=porsche] .light-porsche,.garage-hero[data-active=range] .light-range{opacity:1}
.scene-beam{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen;pointer-events:none}
.beam-series{background:radial-gradient(ellipse 15% 80% at 18% 12%,#ffd9a618,transparent 70%)}
.beam-porsche{background:radial-gradient(ellipse 15% 80% at 50% 12%,#ffe8d21a,transparent 70%)}
.beam-range{background:radial-gradient(ellipse 15% 80% at 82% 12%,#f4e7cd18,transparent 70%)}
.garage-hero[data-active=series] .beam-series,.garage-hero[data-active=porsche] .beam-porsche,.garage-hero[data-active=range] .beam-range{opacity:1}
.scene-glint{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(110deg,transparent 39%,#fff4d926 49%,transparent 60%);background-size:240% 100%;mask-image:radial-gradient(ellipse 16% 25% at var(--glint-x) 66%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 16% 25% at var(--glint-x) 66%,black,transparent)}
.garage-hero.is-glinting .scene-glint{animation:car-glint 1.35s ease-out both}
@keyframes car-glint{0%{opacity:0;background-position:130% 0}25%{opacity:.75}100%{opacity:0;background-position:-30% 0}}
.car-hotspot{position:absolute;top:27%;height:66%;width:30%;border:0;background:transparent;color:#fff4df;border-radius:5px;cursor:pointer}
.hotspot-series{left:1%;top:30%;width:33%;height:48%}.hotspot-porsche{left:29%;top:47%;width:34%;height:33%}.hotspot-range{left:64.8%;top:37%;width:32%;height:44%}
.car-hotspot:focus-visible{outline:2px solid #fff0ca;outline-offset:-5px;background:#fff2}
.hotspot-marker{position:absolute;left:50%;bottom:0;transform:translate(-50%,10px);opacity:0;border:1px solid #d9cba59e;background:#111b;padding:.25rem .6rem;font-size:.8125rem;letter-spacing:.12em;white-space:nowrap;transition:opacity .5s,transform .5s}
.car-hotspot[data-selected=true] .hotspot-marker,.car-hotspot:hover .hotspot-marker,.car-hotspot:focus-visible .hotspot-marker{opacity:1;transform:translate(-50%,0)}
.garage-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.garage-selectors a{min-width:0;padding:1rem 1.25rem;text-align:left;text-decoration:none;background:transparent;border:0;border-bottom:3px solid transparent;transition:background .4s,border-color .4s;color:var(--paper)}
.garage-selectors a+a{border-left:1px solid var(--line)}
.garage-selectors a>span{display:block}.garage-selectors a em{display:block;font:400 1.5rem/1.3 var(--serif);margin-top:.15rem}
.garage-selectors a[data-selected=true]{background:#ffffff06;border-bottom-color:var(--accent)}
.garage-selectors a:focus-visible{outline-offset:-5px}
.garage-details{display:grid;grid-template-columns:1fr 1.1fr auto;gap:2rem;align-items:center;padding:2rem 1.25rem;border-bottom:1px solid var(--line);min-height:11.5rem}
.garage-details .eyebrow{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem}
.garage-hero:not([data-active=none]) .garage-details .eyebrow{color:var(--accent)}
.garage-details h2{font-size:clamp(1.7rem,2.6vw,2.8rem);line-height:1.15}
.garage-details>p{font-size:.9375rem;color:var(--muted)}
.garage-details .chapter-link{margin:0;font-size:.875rem}
.scene-credit{font-size:.75rem;line-height:1.5;color:var(--muted);padding:.8rem 1.25rem 0}
@media(max-width:1000px){.garage-details{grid-template-columns:1fr 1fr}.garage-details .chapter-link{grid-column:1/-1;justify-self:start}.garage-heading{display:block}.scene-instruction{max-width:none;margin-top:1rem}}
@media(max-width:700px){.garage-hero{padding:1.75rem 0 0}.garage-heading{padding:0 1rem 1.5rem}.garage-heading h1{font-size:clamp(2.4rem,9vw,4rem)}.garage-heading .eyebrow{font-size:.75rem;letter-spacing:.06em}.garage-scene{width:100%}.garage-selectors a{padding:.9rem .6rem;font-size:.8125rem;line-height:1.4}.garage-selectors a em{font-size:1rem}.garage-selectors .selector-meta{font-size:.75rem;letter-spacing:.02em}.garage-details{grid-template-columns:1fr;padding:1.5rem 1rem;gap:1rem;min-height:15rem}.garage-details .chapter-link{grid-column:auto}.scene-credit{padding:.8rem 1rem 0}.hotspot-marker{font-size:.75rem;padding:.1rem .3rem}.car-hotspot{min-height:44px}}
@media(hover:none){.mouse-hint{display:none}.touch-hint{display:inline}.scene-art{transform:none}.hotspot-marker{opacity:.8;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.scene-art{transform:none}.scene-glint{display:none}.scene-light,.scene-image,.scene-beam,.hotspot-marker,.garage-selectors a{transition:none}}