/* 3D scroll scenes (scroll3d.js). Official photographs only, placed in a CSS 3D space and scrubbed to
   the scrollbar inside their own section, held on screen with position: sticky.
   Without script and under reduced motion the section is one screen with the finished composition. */

.s3d { position: relative; overflow: clip; background: #07080a; color: #eef0f3; --s3d-ink: #eef0f3; --s3d-muted: #8e8f92; --s3d-body: #c4c6cb; --s3d-accent: #4a5cff; }
.s3d__stage { position: relative; height: var(--s3d-vh, 100svh); min-height: 560px; overflow: clip; perspective: 1400px; perspective-origin: 50% 42%; }
.s3d.is-live { height: var(--s3d-h, 300svh); }
.s3d.is-live .s3d__stage { position: sticky; top: 0; }

/* the room: a glow behind the car, a floor that runs into the distance, a giant name in the dark */
.s3d__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 38% at 50% 58%, rgb(74 92 255 / 0.20), transparent 70%),
              radial-gradient(ellipse 80% 50% at 50% 100%, rgb(238 240 243 / 0.06), transparent 70%); }
.s3d__floor { position: absolute; left: -50%; right: -50%; top: 62%; height: 120%; pointer-events: none;
  transform-origin: 50% 0; transform: rotateX(82deg);
  background-image:
    linear-gradient(rgb(238 240 243 / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(238 240 243 / 0.07) 1px, transparent 1px);
  background-size: 120px 120px; background-position: 50% calc(var(--s3d-run, 0) * 1200px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 50%, transparent 95%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 50%, transparent 95%); }
.s3d__floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(74 92 255 / 0.5) 50%, transparent) 50% 0 / 60% 2px no-repeat; }
.s3d__giant { position: absolute; left: 50%; top: 46%; margin: 0; pointer-events: none; white-space: nowrap;
  font: 600 clamp(120px, 24vw, 380px)/0.8 var(--font-display); font-stretch: 112%; letter-spacing: -0.05em;
  color: rgb(238 240 243 / 0.035); -webkit-text-stroke: 1px rgb(238 240 243 / 0.24);
  transform: translate3d(-50%, -50%, -420px) scale(1.3); transition: opacity 400ms ease; }

.s3d__world { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.s3d-car { margin: 0; position: absolute; left: 50%; top: 60%; width: min(60vw, 880px); aspect-ratio: 1600 / 849;
  transform: translate3d(-50%, -66%, 0); transform-style: preserve-3d; will-change: transform, opacity; }
.s3d-car > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.s3d-car__mirror { transform: scaleY(-1) translateY(-27%); opacity: 0.22; filter: blur(1px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 34%); mask-image: linear-gradient(to top, #000 0%, transparent 34%); }
.s3d-car__shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.15) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: calc(var(--shine, 0) * 100%) 0; }

/* the words over the room */
.s3d__hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; grid-template-rows: auto 1fr auto;
  padding-top: calc(var(--nav, 72px) + var(--s-7, 40px)); padding-bottom: var(--s-7, 40px); }
.s3d__hud :is(a, button) { pointer-events: auto; }
.s3d__head { max-width: 560px; }
.s3d__head h2 { color: var(--s3d-ink); margin: 0; }
.s3d__head p { color: var(--s3d-body); margin-top: var(--s-3, 12px); }
.s3d__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5, 24px); align-items: end; grid-row: 3; }
.s3d__foot > :first-child { grid-column: 1 / span 6; }
.s3d__foot > :last-child { grid-column: 9 / -1; justify-self: stretch; }
.s3d__foot > .s3d__paint { justify-content: flex-end; }
.s3d__info { display: grid; gap: var(--s-2, 8px); min-width: 0; }
.s3d__count { font: 500 13px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--s3d-muted); margin: 0; }
.s3d__name { font: var(--display-weight, 500) var(--t-h2, 40px)/1.05 var(--font-display); font-stretch: var(--display-stretch, 104%); letter-spacing: var(--display-tracking, -0.03em); margin: 0; }
.s3d__meta { color: var(--s3d-body); margin: 0; }
.s3d__info .btn-row { margin-top: var(--s-3, 12px); }
.s3d__swap { transition: opacity 260ms ease, translate 260ms ease; }
.s3d__swap.is-out { opacity: 0; translate: 0 8px; }
.s3d__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end; }
.s3d__rail button { background: none; border: 0; padding: 6px 0 6px 28px; min-height: 32px; color: var(--s3d-muted); cursor: pointer; position: relative;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em; transition: color 200ms; }
.s3d__rail button::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: currentColor; transition: width 300ms ease; }
.s3d__rail button[aria-current="true"] { color: var(--s3d-ink); }
.s3d__rail button[aria-current="true"]::before { width: 22px; left: -6px; background: var(--s3d-accent); }
@media (hover: hover) { .s3d__rail button:hover { color: var(--s3d-ink); } }

/* still composition: no script or reduced motion */
.s3d:not(.is-live) .s3d__world { display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 0 var(--s-5, 24px); padding: 18vh 5vw 26vh; }
.s3d:not(.is-live) .s3d-car { position: relative; left: auto; top: auto; width: 100%; transform: none; }
.s3d:not(.is-live) :is(.s3d-car__mirror, .s3d-car__shine) { display: none; }
.s3d:not(.is-live) .s3d__rail { display: none; }

/* ---- the model page: the car arrives, its real dimensions draw around it, then it changes paint */
.s3d--blueprint .s3d-car { width: min(70vw, 1040px); top: 60%; }
.s3d-car__paint { position: absolute; inset: 0; }
.s3d-car__paint > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 500ms ease; }
.s3d-car__paint > img.is-on { opacity: 1; }
.dim { position: absolute; color: var(--s3d-ink); font: 500 13px/1.2 var(--font-mono); letter-spacing: 0.02em; }
.dim__line { position: absolute; background: rgb(238 240 243 / 0.75); transform-origin: 0 50%; }
.dim--h .dim__line { transform-origin: 50% 100%; }
.dim__line::before, .dim__line::after { content: ""; position: absolute; background: inherit; }
.dim--x .dim__line { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(var(--d, 1)); }
.dim--x .dim__line::before, .dim--x .dim__line::after { top: -6px; width: 1px; height: 13px; }
.dim--x .dim__line::before { left: 0; } .dim--x .dim__line::after { right: 0; }
.dim--x .dim__label { position: absolute; left: 50%; top: calc(50% + 10px); translate: -50% 0; white-space: nowrap; opacity: var(--d, 1); }
.dim--h .dim__line { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(var(--d, 1)); }
.dim--h .dim__line::before, .dim--h .dim__line::after { left: -6px; height: 1px; width: 13px; }
.dim--h .dim__line::before { top: 0; } .dim--h .dim__line::after { bottom: 0; }
.dim--h .dim__label { position: absolute; left: calc(50% + 14px); top: 50%; translate: 0 -50%; white-space: nowrap; opacity: var(--d, 1); }
.dim--dot .dim__pin { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--s3d-ink); background: rgb(74 92 255 / 0.6); transform: scale(var(--d, 1)); }
.dim--dot .dim__pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgb(238 240 243 / 0.3); }
.dim--dot .dim__label { position: absolute; right: 18px; bottom: 14px; white-space: nowrap; padding-right: 10px; border-right: 1px solid rgb(238 240 243 / 0.6); text-align: right; opacity: var(--d, 1); }
.dim--x.dim--blue .dim__line { background: var(--s3d-accent); }
.s3d__stat { position: absolute; right: max(5vw, calc((100vw - 1280px) / 2)); top: calc(var(--nav, 72px) + 40px); z-index: 1; pointer-events: none; text-align: right; opacity: var(--d, 1);
  transform: translate3d(0, calc((1 - var(--d, 1)) * 30px), 0); }
.s3d__stat b { display: block; font: 500 clamp(40px, 5vw, 76px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--s3d-ink); }
.s3d__stat span { color: var(--s3d-muted); font-size: var(--t-small, 14px); }
.s3d__paint { display: flex; align-items: center; gap: var(--s-3, 12px); }
.s3d__paint-name { color: var(--s3d-ink); font-size: var(--t-small, 14px); min-width: 12ch; text-align: right; }
.s3d__sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgb(238 240 243 / 0.35); padding: 0; cursor: pointer; transition: transform 200ms; }
.s3d__sw[aria-current="true"] { transform: scale(1.5); box-shadow: 0 0 0 2px #07080a, 0 0 0 3px var(--s3d-ink); }
.s3d--blueprint:not(.is-live) .s3d__world { display: block; padding: 0; }
.s3d--blueprint:not(.is-live) .s3d-car { position: absolute; left: 50%; top: 58%; width: min(70vw, 1040px); transform: translate(-50%, -66%); }

@media (max-width: 1023px) {
  .s3d-car { width: 88vw; }
  .s3d--blueprint .s3d-car { width: 84vw; }
  .s3d__stat { right: 5vw; top: auto; bottom: 30%; }
  .s3d:not(.is-live) .s3d__world { grid-template-columns: repeat(2, 1fr); padding: 22vh 5vw 30vh; }
}
@media (max-width: 639px) {
  .s3d__stage { min-height: 600px; }
  .s3d-car { width: 96vw; top: 54%; }
  .s3d--blueprint .s3d-car { width: 94vw; top: 52%; }
  .dim--dot .dim__label { right: auto; left: 18px; padding: 0 0 0 8px; border-right: 0; border-left: 1px solid rgb(238 240 243 / 0.6); text-align: left; }
  .s3d__giant { top: 46%; }
  .s3d__rail { display: none; }
  .s3d__foot { grid-template-columns: 1fr; row-gap: var(--s-4, 16px); }
  .s3d__foot > :first-child, .s3d__foot > :last-child { grid-column: 1 / -1; }
  .s3d__paint { justify-content: space-between; }
  .s3d__paint-name { text-align: left; order: -1; flex: 1; }
  .dim { font-size: 11px; }
  .dim--h { display: none; }
  .s3d__stat { display: none; }
  .s3d:not(.is-live) .s3d__world { grid-template-columns: repeat(2, 1fr); padding: 26vh 4vw 34vh; }
  .s3d--blueprint:not(.is-live) .s3d-car { width: 94vw; top: 52%; }
}

/* depth on the rest of the page: photographs lean in as they arrive, the hero falls back as you leave it */
.d3 { transform-origin: 50% 85%; }
.d3.is-moving { will-change: transform; }
.d3-tilt { transition: transform 600ms var(--ease, ease); }
.d3-tilt.is-tilting { transition: transform 140ms linear; }
@media (prefers-reduced-motion: reduce) { .d3, .d3-tilt, .s3d-car, .hero__bg { transform: none !important; } }
/* the hero photograph zooms inside its own frame, never past the page edge */
main > .hero--photo { overflow: clip; }