/* Auto Xheviti — shared production and review hero styles. */

:root {
  --hx-paper: #F4F4F1;
  --hx-ink: #0B0C0E;
  --hx-muted: #6E7178;
  --hx-hairline: #DEDED9;
  --hx-red: #E21F2B;
  --hx-head-auto: #000000;
  --hx-head-name: #E3010C;
  --hx-display: "Big Shoulders Display", "Big Shoulders", "Oswald", "Arial Narrow", sans-serif;
  --hx-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hx-nav-h: 96px;
  --hx-pad: 56px;

  /* Composition unit: the hero is designed on a 1440 × 900 stage (desktop)
     and a 390 × 844 stage (mobile). 1u = one design pixel, scaled to fit. */
  --hx-w: 1440;
  --hx-h: 900;
  --u: min(calc(100vw / 1440), calc(100svh / 900));
}

@media (max-width: 767px) {
  :root {
    --hx-w: 390;
    --hx-h: 740;
    --hx-nav-h: 72px;
    --hx-pad: 20px;
    --u: min(calc(var(--hx-viewport-width, 100vw) / 390), calc(var(--hx-mobile-height, 100svh) / 740));
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.hx-body {
  margin: 0;
  background: var(--hx-paper);
  color: var(--hx-ink);
  font-family: var(--hx-ui);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.hx-body a { color: inherit; text-decoration: none; }

/* ---------- Navigation (always above the animation) ---------- */

.hx-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--hx-nav-h);
  padding: 0 var(--hx-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--hx-paper);
}

.hx-nav__logo { justify-self: start; display: block; line-height: 0; }
.hx-nav__logo img { height: 52px; width: auto; display: block; }

.hx-nav__links { display: flex; gap: 44px; font-size: 15px; font-weight: 600; }
.hx-nav__links a { padding: 8px 0; position: relative; }
.hx-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.hx-nav__links a:hover::after, .hx-nav__links a:focus-visible::after { transform: scaleX(1); }

.hx-nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

.hx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px 0 18px;
  border: 1px solid var(--hx-ink); border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background .2s ease, color .2s ease;
}
.hx-pill svg, .hx-cta svg { color: var(--hx-red); }
.hx-pill:hover { background: var(--hx-ink); color: var(--hx-paper); }

.hx-menu-btn {
  display: none;
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: var(--hx-ink); color: var(--hx-paper);
  align-items: center; justify-content: center; cursor: pointer;
}

.hx-menu {
  position: absolute; top: calc(var(--hx-nav-h) - 4px); right: var(--hx-pad);
  display: flex; flex-direction: column; min-width: 200px; padding: 8px;
  background: var(--hx-paper); border: 1px solid var(--hx-hairline); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(11, 12, 14, .12);
}
.hx-menu[hidden] { display: none; }
.hx-menu a { padding: 12px 14px; font-size: 16px; font-weight: 500; border-radius: 8px; }
.hx-menu a:hover { background: #EAEAE5; }

.hx-body :focus-visible { outline: 2px solid var(--hx-red); outline-offset: 3px; }

@media (max-width: 767px) {
  .hx-nav__links { display: none; }
  .hx-nav__logo img { height: 38px; }
  .hx-pill { height: 40px; font-size: 14px; padding: 0 12px 0 14px; }
  .hx-menu-btn { display: inline-flex; }
}

/* ---------- Pinned hero ---------- */

.hx-pin {
  position: relative;
  height: 220vh;                       /* viewport + a compact 120vh tint / hold / exit */
  height: 220svh;
}

.hx-anchor-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; scroll-margin-top: var(--hx-nav-h); }

.hx-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hx-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--u) * var(--hx-w));
  height: calc(var(--u) * var(--hx-h));
  transform: translate(-50%, var(--hx-handoff-y, 0px));
}


.hx-headline {
  position: absolute;
  margin: 0;
  top: calc(var(--u) * 196);
  left: 50%;
  translate: -50% 0;
  font-family: var(--hx-display);
  font-weight: 800;
  font-size: var(--hx-head-size, calc(var(--u) * 292));
  line-height: .84;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--hx-ink);
  will-change: transform;
}
.hx-headline__line { display: inline-block; }
.hx-headline__auto { color: var(--hx-head-auto); }
.hx-headline__name { color: var(--hx-head-name); }

.hx-vehicle {
  position: absolute;
  left: calc(var(--u) * 250);
  top: calc(var(--u) * 344);
  width: calc(var(--u) * 1100);
  aspect-ratio: 1100 / 352.12;
  will-change: transform;
}

.hx-vehicle__drive { position: absolute; inset: 0; will-change: transform; }

.hx-car { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* The native-coordinate blackout shares the vehicle SVG transform; one group opacity takes every
   window and the windshield from clear to opaque #000 together. */
.hx-glass { opacity: var(--hx-tint, 0); }

/* Soft contact shadow on its own layer (percentages keep it locked to the car at any scale) */
.hx-shadow { position: absolute; inset: 0; pointer-events: none; }
.hx-shadow span { position: absolute; display: block; border-radius: 50%; }
.hx-shadow__ambient {
  left: 3%; width: 93%; top: 91%; height: 14%;
  background: radial-gradient(closest-side, rgba(10, 11, 13, .26), rgba(10, 11, 13, .1) 55%, rgba(10, 11, 13, 0));
}
.hx-shadow__contact { top: 96%; height: 6%; width: 21%; background: radial-gradient(closest-side, rgba(10, 11, 13, .55), rgba(10, 11, 13, 0)); }
.hx-shadow__contact--rear { left: 10%; }
.hx-shadow__contact--front { left: 73%; }

.hx-copy {
  position: absolute;
  left: calc(var(--u) * 56);
  top: calc(var(--u) * 724);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--u) * 20);
}
.hx-copy__tagline {
  margin: 0;
  font-size: max(16px, calc(var(--u) * 22));
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.27;
}

.hx-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 22px;
  border-radius: 999px;
  background: var(--hx-ink); color: var(--hx-paper) !important;
  font-size: 15px; font-weight: 600;
  transition: transform .2s ease;
}
.hx-cta:hover { transform: translateY(-1px); }

.hx-indicator {
  position: absolute;
  top: calc(var(--u) * 832);
  left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hx-muted);
}
.hx-indicator__track { position: relative; width: 120px; height: 2px; background: var(--hx-hairline); overflow: hidden; }
.hx-indicator__fill { position: absolute; inset: 0; background: var(--hx-ink); transform: scaleX(0); transform-origin: left; }

/* Until the vehicle assets are decoded, the animated layers stay hidden (set by the inline head script),
   so the entrance never starts with missing layers. Without JS everything shows in its settled place. */
.hx-js .hx-headline, .hx-js .hx-vehicle, .hx-js .hx-copy, .hx-js .hx-indicator { visibility: hidden; }
.hx-js.hx-live .hx-headline, .hx-js.hx-live .hx-vehicle, .hx-js.hx-live .hx-copy,
.hx-js.hx-live .hx-indicator { visibility: visible; }

/* ---------- Mobile composition (390 × 740 stage) ---------- */
@media (max-width: 767px) {
  .hx-sticky { height: calc(var(--u) * 740); }
  .hx-headline {
    left: calc(var(--u) * 10);
    translate: none;
    top: calc(var(--u) * 150);
    font-size: calc(var(--u) * 148);
    white-space: normal;
  }
  .hx-headline__line { display: block; }
  .hx-headline__space { display: none; }
  .hx-vehicle { left: 0; top: calc(var(--u) * 334); width: calc(var(--u) * 390); }
  .hx-copy { left: calc(var(--u) * 20); top: calc(var(--u) * 488); gap: 14px; }
  .hx-copy__tagline { font-size: max(17px, calc(var(--u) * 20)); }
  .hx-indicator { top: max(calc(var(--u) * 620), calc(var(--u) * 488 + 110px)); }
  .hx-js .hx-headline, .hx-js .hx-vehicle, .hx-js .hx-copy, .hx-js .hx-indicator { visibility: visible; }
  .hx-car-loading .hx-vehicle { visibility: hidden; }
  .hx-vehicle, .hx-vehicle__drive { backface-visibility: hidden; }
}

html:not(.hx-js) .hx-pin { height: auto; }
html:not(.hx-js) .hx-sticky { position: relative; }

.hx-after {
  margin: 0;
  padding: 20px var(--hx-pad);
  color: var(--hx-muted); font-size: 13px; text-align: center;
}
.hx-after a { text-decoration: underline !important; text-underline-offset: 3px; }

.hx-debug {
  position: fixed; left: 12px; bottom: 12px; z-index: 30;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(11, 12, 14, .85); color: #fff;
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Reduced motion: no pin, no travel, settled tinted state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-pin { height: auto; }
  .hx-sticky { position: relative; }
}