/* Macro structure: header, hero stage, section scaffolding, grid rhythm */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--line-hairline);
  margin: 0;
}

/* ---------- Site header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background var(--duration-medium) var(--ease-out-soft),
    border-color var(--duration-medium) var(--ease-out-soft);
}

.site-header[data-scrolled="true"] {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  padding-inline: var(--content-gutter);
}

.site-header__mark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.0625rem;
  letter-spacing: 0.34em;
  text-decoration: none;
  color: var(--text-primary);
  white-space: nowrap;
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 100%;
  height: 1px;
  background: var(--accent-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out-soft);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text-primary);
}

.nav-link[aria-current="true"] {
  color: var(--text-primary);
}

.nav-link[aria-current="true"]::after {
  transform: scaleX(1);
}

.site-header__menu-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-black);
  padding: calc(var(--space-24)) var(--content-gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  font-size: var(--size-h2);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: var(--text-primary);
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (max-width: 47.9375rem) {
  .site-header__nav {
    display: none;
  }
  .site-header__menu-toggle {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--color-black);
}

.hero__pin {
  position: relative;
  height: 100vh; /* fallback for browsers without svh support */
  height: 100svh;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__poster,
.hero__video,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster,
.hero__video {
  /* Source framing is a square studio shot with headroom + floor reflection
     baked in; cover would crop most of that away on a wide viewport. Contain
     keeps the full composition, and the video's own dark vignette blends into
     the page background instead of showing as visible letterboxing. */
  object-fit: contain;
  background: var(--color-black);
  transform: translateZ(0); /* own compositing layer: cheaper repaints while scrubbing */
}

.hero__video {
  will-change: opacity;
  opacity: 0;
}

.hero__video[data-ready="true"] {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.04) 30%,
    rgba(0, 0, 0, 0) 50%
  );
  pointer-events: none;
}

.hero__copy {
  position: absolute;
  z-index: var(--z-hero-copy);
  left: var(--content-gutter);
  bottom: clamp(2rem, 10vh, 5rem);
  max-width: 40rem;
  opacity: 0;
}

.hero__copy .eyebrow {
  color: var(--color-silver);
  margin-bottom: var(--space-4);
}

.hero__copy h1 {
  font-size: var(--size-h1);
  color: var(--text-primary);
}

.hero__subtitle {
  margin-top: var(--space-4);
  font-size: var(--size-body-lg);
  color: var(--text-secondary);
  max-width: 30rem;
}

@media (max-width: 47.9375rem) {
  .hero__copy {
    left: var(--content-gutter);
    right: var(--content-gutter);
    bottom: clamp(1.5rem, 8vh, 3rem);
    max-width: none;
  }
}

/* ---------- Model intro ---------- */
.intro {
  position: relative;
  isolation: isolate;
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding-block: var(--space-16);
  padding-inline: var(--content-gutter);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Faint ambient light from two off-center angles — just enough to keep the
   plain dark field from reading as a flat void, never bright enough to
   compete with the text sitting on top of it. */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 50% at 10% 15%, rgba(255, 255, 255, 0.05), transparent 62%),
    radial-gradient(45% 45% at 92% 85%, rgba(255, 255, 255, 0.035), transparent 65%);
}

.intro .eyebrow {
  color: var(--text-muted);
}

.intro h2 {
  font-size: var(--size-h2);
  max-width: 20ch;
}

.intro__index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  padding-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--size-body-lg);
}

.intro__index li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.intro__index .model-index {
  color: var(--text-muted);
}

/* ---------- Model progress rail ---------- */
.model-progress {
  position: fixed;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-progress);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-out-soft);
}

.model-progress[data-visible="true"] {
  opacity: 1;
}

.model-progress ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}

.model-progress ol::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-hairline);
  transform: translateX(-50%);
}

.model-progress .model-index {
  color: var(--text-muted);
  background: var(--color-black);
  padding-block: var(--space-1);
  position: relative;
  transition: color var(--duration-medium) var(--ease-out-soft);
}

.model-progress li[data-active="true"] .model-index {
  color: var(--text-primary);
}

.model-progress li[data-active="true"] .model-index::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 1px;
  height: 6px;
  background: var(--accent-signal);
  transform: translateX(-50%);
}

@media (max-width: 63.9375rem) {
  .model-progress {
    display: none;
  }
}

/* ---------- Model chapters ---------- */
.model {
  position: relative;
  background: var(--surface-panel);
}

.model[data-model="taycan"] {
  background: #23272b; /* cool titanium grey */
}

.model[data-model="macan"] {
  background: #2b2822; /* warm chalk-adjacent grey */
}

.model[data-model="cayenne"] {
  background: #222224; /* deep graphite, still lifted off black */
}

.model__pin {
  position: relative;
  height: 100vh; /* fallback for browsers without svh support */
  height: 100svh;
  overflow: hidden;
}

/* Full-bleed stage: the crossing motion lives in the locked-camera footage itself
   (frame-scrubbed exactly like the hero), not in a CSS-transformed car element. */
.model__stage {
  position: absolute;
  inset: 0;
}

.model__stage video,
.model__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Source clips are square studio shots with the full composition (overhead
     light lines, floor reflection) authored into that frame — cover would
     crop most of it away on a wide stage. Contain keeps it whole; the dark
     background blends with the section's own dark theme instead of showing
     as visible letterboxing. See hero__poster/hero__video for the same call. */
  object-fit: contain;
  object-position: 68% center;
  background: var(--color-black);
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0); /* own compositing layer: cheaper repaints while scrubbing */
}

/* Push the car toward the side opposite the reveal text — ltr models keep
   their text on the left (car right of center), rtl models mirror it — so
   the two never overlap regardless of how a given clip is framed. This is a
   direction-based fallback for any model without its own override below;
   every clip frames its car differently within its own source square, so in
   practice each model needs its own tuned value, not one shared number. */
.model[data-direction="rtl"] .model__stage video,
.model[data-direction="rtl"] .model__stage img {
  object-position: 32% center;
}

.model[data-model="cayenne"] .model__stage video,
.model[data-model="cayenne"] .model__stage img {
  object-position: 84% center;
}

.model[data-model="taycan"] .model__stage video,
.model[data-model="taycan"] .model__stage img {
  object-position: 18% center;
}

.model[data-model="macan"] .model__stage video,
.model[data-model="macan"] .model__stage img {
  object-position: 16% center;
}

.model__stage video[data-ready="true"] {
  opacity: 1;
}

.model__stage img.model__poster {
  opacity: 1;
  z-index: 1;
}

.model__stage video {
  z-index: 2;
}

.model__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Localized scrim behind the reveal text so it reads over any footage */
.model__scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  z-index: 3;
  pointer-events: none;
}

.model__scrim[data-side="right"] {
  left: auto;
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

.model__reveal {
  position: absolute;
  left: var(--content-gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: 26rem;
  z-index: var(--z-hero-copy);
}

/* Desktop-only: side-by-side layout positions the reveal panel opposite the
   car. On mobile the panel stacks below (full width, no left/right), so
   these must not leak through — [data-side="right"] alone has higher
   specificity than the mobile reset below and would otherwise win regardless
   of source order. */
@media (min-width: 48rem) {
  .model__reveal[data-side="right"] {
    left: auto;
    right: var(--content-gutter);
  }

  .model[data-model="taycan"] .model__reveal[data-side="right"],
  .model[data-model="macan"] .model__reveal[data-side="right"] {
    right: calc(var(--content-gutter) + 3rem);
  }
}

.model__reveal .spec-label {
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-4);
}

.model__reveal h2 {
  font-size: var(--size-h2);
  color: var(--text-primary);
}

.model__statement {
  margin-top: var(--space-4);
  font-size: var(--size-body-lg);
  color: var(--text-secondary);
  max-width: 24ch;
}

.rule--reveal {
  margin-block: var(--space-6);
  width: 3rem;
  transform-origin: left;
}

.model__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.model__specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line-hairline);
  max-width: 22rem;
}

.model__specs .spec-label {
  color: var(--text-muted);
}

.model__specs .spec-value {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--text-primary);
  text-align: right;
}

.model__note {
  margin-top: var(--space-6);
  font-size: var(--size-small);
  color: var(--text-muted);
  max-width: 26ch;
}

@media (max-width: 63.9375rem) {
  .model__reveal {
    max-width: 20rem;
  }
}

@media (max-width: 47.9375rem) {
  /* .model__pin stays 100svh on every breakpoint — only the internal
     composition changes here: stacked, not overlaid. */
  .model__pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
    padding-block: var(--space-16);
  }
  .model__stage {
    position: relative;
    height: 38vh;
    min-height: 220px;
    flex-shrink: 0;
  }
  .model__scrim {
    display: none;
  }
  /* The per-model horizontal pushes (68%, 84%, 18%, etc.) exist to clear
     space for the reveal text sitting *beside* the car on desktop — and
     object-position can only shift the whole (uncropped) frame within its
     box, not reposition the car within the frame itself. On mobile there's
     no side text panel to clear room for, and letting a still-off-center car
     float in a mostly-empty letterboxed box just reads as broken. Cropping
     to fill the box instead (cover) makes the car the dominant, intentional
     subject of a small screen; the modest crop this needs at these stage
     proportions costs only a sliver of the studio ceiling/floor, not the car.
     Selector specificity matches the per-model rules being overridden
     (.model[data-model="x"] .model__stage video) so this actually wins. */
  .model[data-model] .model__stage video,
  .model[data-model] .model__stage img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .model__reveal {
    position: relative;
    inset: auto;
    transform: none;
    left: auto;
    right: auto;
    max-width: none;
    padding-inline: var(--content-gutter);
  }
}

@media (max-width: 26.5em) {
  .model__specs li:nth-child(3) {
    display: none;
  }
}

/* ---------- Outro (closing scroll-scrubbed sequence) ----------
   Formerly a separate static .closing section followed by the pinned video;
   now one fused sequence — the copy overlays the same pinned stage and only
   reveals once the departure footage has faded to black, so the statement
   lands right as the car is gone, not alongside it. */
.outro {
  position: relative;
  background: var(--color-black);
}

.outro__pin {
  position: relative;
  height: 100vh; /* fallback for browsers without svh support */
  height: 100svh;
  overflow: hidden;
}

.outro__media {
  position: absolute;
  inset: 0;
}

.outro__poster,
.outro__video,
.outro__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.outro__poster,
.outro__video {
  /* Same square-studio-shot framing as the hero and model stages — contain
     keeps the full composition instead of cropping it to fill a wide viewport. */
  object-fit: contain;
  background: var(--color-black);
  transform: translateZ(0); /* own compositing layer: cheaper repaints while scrubbing */
}

.outro__video {
  will-change: opacity;
  opacity: 0;
}

.outro__video[data-ready="true"] {
  opacity: 1;
}

.outro__copy {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-copy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-24) var(--content-gutter);
  opacity: 0;
  visibility: hidden;
}

.outro__copy h2 {
  font-size: var(--size-statement);
  max-width: 18ch;
  color: var(--text-primary);
}

.outro__subtitle {
  color: var(--text-secondary);
  font-size: var(--size-body-lg);
}

.outro__cta {
  margin-top: var(--space-8);
  min-height: 44px;
  padding-inline: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--line-hairline-strong);
  border-radius: 2px;
  transition: border-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft);
}

.outro__cta:hover {
  border-color: var(--accent-signal);
  color: var(--text-primary);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-hairline);
  padding: var(--space-12) var(--content-gutter) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--size-small);
  color: var(--text-muted);
}

.site-footer__mark {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  color: var(--text-secondary);
  font-size: var(--size-small);
}

.site-footer__models {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

.site-footer__year {
  font-family: var(--font-mono);
}