/* =========================================================
   Top page — first view (Claude Design "Top Page Wireframes" 4a)
   The wireframe was drawn on an 880×560 card; fluid sizes below
   use `vw` values equal to the wireframe px at 880px wide
   (1vw = 8.8px), clamped for small and large screens.
   ========================================================= */

.page-top {
  --gutter: clamp(20px, 5.4545vw, 88px);         /* 48px @ 880 */
  --header-top: clamp(20px, 4.0909vw, 56px);     /* 36px @ 880 */

  --color-hairline-on-photo: rgba(255, 255, 255, .5);
  --color-ring: rgba(255, 255, 255, .35);
  --color-ring-orbit: rgba(201, 162, 75, .6);
  --color-scrim: rgba(10, 10, 10, .55);
  --color-scrim-strong: rgba(10, 10, 10, .7);

  /* Hero photo intrinsic ratio (1489 × 1056) */
  --photo-ratio: 1.410038;   /* w / h */
  --photo-ratio-inv: .709200; /* h / w */
  --photo-focus-y: .72;      /* matches `background-position: center 72%` */

  --pulse-duration: 3.6s;
  --orbit-duration: 60s;

  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* ---------- Overlay header (sits on the hero photo) ---------- */

.site-header--overlay {
  position: absolute;
  top: var(--header-top);
  left: var(--gutter);
  right: var(--gutter);
}

/* The header's own small wordmark only appears once the page has scrolled past
   the hero (which carries the large brand mark instead) — desktop only, since
   on mobile the header keeps scrolling away with the page (unchanged). */
.site-header--overlay .wordmark { display: none; }
/* The shared .wordmark__sub color is tuned for a light background; here it always
   sits on the dark frosted header, so it needs the gold-on-dark variant instead. */
.site-header--overlay .wordmark__sub { color: var(--color-secondary); }

/* The full inline menu only replaces the hamburger at desktop widths — there's
   no room for it on a phone screen, so mobile keeps the hamburger + menu overlay. */
.site-nav--overlay { display: none; }

/* Desktop: the header stays fixed on screen while the page scrolls, and shows
   the full menu inline instead of the hamburger. Over the hero it keeps a thin
   hairline underneath, brand-free, exactly as drawn. Once the hero has scrolled
   by, it contracts into a frosted glass pill — soft blur, low-opacity fill —
   with the wordmark fading in, so the header stays legible over whatever
   content is behind it. */
@media (min-width: 1024px) {
  .site-header--overlay {
    position: fixed;
    justify-content: flex-start;
    gap: clamp(20px, 3vw, 40px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-hairline-on-photo);
    background-color: transparent;
    transition: background-color .4s var(--ease), border-color .4s var(--ease),
      padding .4s var(--ease), border-radius .4s var(--ease), box-shadow .4s var(--ease);
  }
  .site-header--overlay .menu-toggle { display: none; }
  .site-nav--overlay { display: flex; }
  .site-header--overlay .site-header__actions { margin-left: auto; }
  .site-header--overlay .reserve-link { display: none; }
  .site-header--overlay.is-scrolled {
    padding: 16px 28px;
    border-bottom-color: transparent;
    border-radius: 9999px;
    /* A solid (not backdrop-blurred) fill: backdrop-filter renders unreliably
       across browsers/compositors at this fixed + rounded + transitioning
       combination, so contrast for the white menu text comes from opacity alone. */
    background-color: rgba(10, 9, 8, .94);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .site-header--overlay.is-scrolled .wordmark {
    display: inline-flex;
  }
}

.site-header--overlay .menu-toggle {
  width: clamp(24px, 2.9545vw, 36px);            /* 26px @ 880 */
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);                  /* 22px @ 880 */
  font: 400 clamp(11px, 1.3636vw, 15px)/1 var(--font-display); /* 12px @ 880 */
  letter-spacing: .28em;
}

.lang-switch { white-space: nowrap; }
.lang-switch a {
  display: inline-block;
  /* Enlarges the tap target on touch screens without changing the visible text size. */
  padding: 14px 4px;
  margin: -14px -4px;
}
.lang-switch a:hover { color: var(--color-secondary); }

.reserve-link {
  display: inline-block;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-secondary);
  padding: 14px 4px 4px;
  margin: -14px -4px 0;
  transition: color .3s, border-color .3s;
}
.reserve-link:hover { color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }

@media (max-width: 639px) {
  .lang-switch { letter-spacing: .18em; }
  .site-header__actions { gap: 14px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  container-type: size;
  background: var(--color-bg-dark);
}

/* Photo-space layer: same box as a `cover` background positioned at center 72%.
   No transform / z-index here, so its children share the hero's stacking context
   and can sit above .hero__shade (the rings are not darkened by the scrim). */
.hero__stage {
  --stage-w: max(100cqw, 100cqh * var(--photo-ratio));
  --stage-h: calc(var(--stage-w) * var(--photo-ratio-inv));
  position: absolute;
  width: var(--stage-w);
  height: var(--stage-h);
  left: calc((100cqw - var(--stage-w)) / 2);
  top: calc((100cqh - var(--stage-h)) * var(--photo-focus-y));
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--color-scrim) 0%, rgba(10, 10, 10, 0) 38%, rgba(10, 10, 10, 0) 70%, var(--color-scrim-strong) 100%),
    linear-gradient(90deg, var(--color-scrim) 0%, rgba(10, 10, 10, 0) 45%);
}

/* Rings are centred on the vanishing point between the two cars.
   Percent margins resolve against the stage width, so they centre a square
   sized as a fraction of that width. */
.hero__ring,
.hero__crosshair,
.hero__callout { z-index: 2; }

.hero__ring {
  position: absolute;
  left: 50%;
  top: 63.03%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero__ring--pulse {
  width: 72.727%;                 /* 640 / 880 */
  margin: -36.364% 0 0 -36.364%;
  border: 1px solid var(--color-ring);
  animation: heartbeat var(--pulse-duration) var(--ease) infinite;
  will-change: transform, opacity;
}

.hero__ring--orbit {
  width: 47.727%;                 /* 420 / 880 */
  margin: -23.864% 0 0 -23.864%;
  border: 1px dashed var(--color-ring-orbit);
  animation: orbit var(--orbit-duration) linear infinite;
  will-change: transform;
}

.hero__orbit-dot {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 10px var(--color-secondary);
}

.hero__crosshair {
  position: absolute;
  left: 50%;
  top: 63.03%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
}
.hero__crosshair::before,
.hero__crosshair::after {
  content: "";
  position: absolute;
  background: var(--color-hairline-on-photo);
}
.hero__crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; }
.hero__crosshair::after { top: 50%; left: 0; height: 1px; width: 100%; }

/* Vehicle callouts */
.hero__callout {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 clamp(9px, 1.0227vw, 12px)/1 var(--font-mono);   /* 9px @ 880 */
  letter-spacing: .2em;
  white-space: nowrap;
}
.hero__callout--left  { left: 13.636%;  top: 58.35%; }   /* 120px, 318px @ 880×560 */
.hero__callout--right { right: 10.909%; top: 55.46%; }   /* 96px,  300px @ 880×560 */

.hero__callout-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.hero__callout-line {
  flex: none;
  width: clamp(28px, 3.8636vw, 56px);            /* 34px @ 880 */
  height: 1px;
  background: var(--color-hairline-on-photo);
}

/* Brand block — upper-left sky */
.hero__brand {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: max(16.07cqh, calc(var(--header-top) + 54px));   /* 90px / 560px */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3636vw, 18px);              /* 12px @ 880 */
}

.hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: inherit;
  font-weight: 400;
}

.hero__wordmark {
  font: 300 clamp(36px, 5.4545vw, 88px)/1 var(--font-display);  /* 48px @ 880 */
  letter-spacing: .3em;
}

.hero__sub {
  font: 400 clamp(9px, 1.1364vw, 15px)/1 var(--font-display);   /* 10px @ 880 */
  letter-spacing: .6em;
  color: var(--color-secondary);
}

.hero__tagline {
  margin: 6px 0 0;
  font: 400 clamp(13px, 1.7045vw, 22px)/1.8 var(--font-mincho); /* 15px @ 880 */
  letter-spacing: .3em;
}

.hero__scroll {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(20px, 3.6364vw, 48px);           /* 32px @ 880 */
  margin: 0;
  font: 400 clamp(10px, 1.1364vw, 13px)/1 var(--font-mono);     /* 10px @ 880 */
  letter-spacing: .16em;
  color: var(--color-text-sub-on-dark);
}

/* Callouts sit on the cars; once the photo is cropped at the sides
   (portrait / near-square viewports) the cars leave the frame, so hide them. */
@media (max-aspect-ratio: 11/10) {
  .hero__callout { display: none; }
}

/* ---------- Motion ---------- */

/* "Heartbeat": a slow, eased double beat. */
@keyframes heartbeat {
  0%, 100% { transform: scale(1);     opacity: .5; }
  14%      { transform: scale(1.03);  opacity: .95; }
  28%      { transform: scale(1.005); opacity: .6; }
  42%      { transform: scale(1.022); opacity: .85; }
  62%      { transform: scale(1);     opacity: .5; }
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ring--pulse,
  .hero__ring--orbit { animation: none; }
}