/* ---------- Hero: final frame (also the reduced-motion / skipped state) ---------- */
.hero {
  position: relative;
  height: 900px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 65% at 24% 32%, rgba(120,140,165,0.11), rgba(11,20,32,0) 70%),
    var(--g-night);

  /* Intro geometry — where the bike starts relative to its final spot */
  --intro-from: translate(-260px, -250px) scale(0.26);
}

.hero-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  background: linear-gradient(180deg, rgba(11,20,32,0) 0%, #111D2B 100%);
}
.hero-floor-glow {
  position: absolute;
  left: 480px; bottom: 10px;
  width: 1000px; height: 190px;
  background: radial-gradient(ellipse 50% 50% at 35% 55%, rgba(120,170,255,0.17), rgba(120,170,255,0) 70%);
  pointer-events: none;
}

/* The bike faces right; never mirror it. Anchor = front-wheel contact point. */
.hero-bike {
  position: absolute;
  /* The headlight sits 704 px into the bike box (76.1% of 925). Keep it at least
     ~86 px left of the copy, which starts at 46vw: on narrower desktops the bike
     slides left instead of the lamp ending up under the text. */
  left: min(-150px, calc(46vw - 790px)); bottom: -170px;
  width: 925px; height: 1000px;
  transform-origin: 80% 99.7%;
}
.hero-bike-settle {
  position: absolute;
  inset: 0;
  transform-origin: 15% 97.8%; /* rear contact: a positive turn dips the nose */
}
.hero-bike img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-beam {
  position: absolute;
  left: 76.1%; top: 43.5%;
  width: 1400px; height: 860px;
  transform: translateY(-50%) rotate(-5deg);
  transform-origin: 0 50%;
  filter: blur(22px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-beam-cone {
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  background: linear-gradient(90deg, rgba(225,238,255,0.62) 0%, rgba(160,200,255,0.30) 16%, rgba(70,145,240,0.13) 45%, rgba(20,122,255,0.05) 75%, rgba(20,122,255,0) 100%);
}
.hero-lamp {
  position: absolute;
  left: 76.1%; top: 43.5%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 3%, rgba(215,232,255,0.8) 7%, rgba(90,160,255,0.32) 20%, rgba(20,122,255,0) 55%);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.55);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  left: 46%; right: var(--gutter); top: 236px;
  z-index: 3;
}
.hero-copy h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: var(--c-text);
  display: flex;          /* flex: the lines' negative margins must not collapse */
  flex-direction: column;
}
/* Each line is lit separately so it can be revealed inside the beam.
   The gradient spans both lines (size 200%), matching a single lit block.
   Padding gives descenders room inside the clipped background. */
.hero-line {
  display: block;
  padding: 0.08em 0 0.12em;
  margin: -0.08em 0 -0.12em;
  background-image: var(--g-hero-text);
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-line:first-child { background-position: 0 0; }
.hero-line:last-child { background-position: 0 100%; }

.hero-lead {
  margin: 28px 0 0;
  max-width: 500px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text-body);
  text-shadow: 0 1px 14px rgba(5, 10, 18, 0.75); /* stays readable where the beam passes behind it */
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-top: 36px;
}
.hero-sub { display: flex; align-items: center; gap: 12px; }
.hero-note {
  margin: 22px 0 0;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}
.hero-note-short { font-size: 13px; color: var(--c-muted); }

.hero-stage { display: contents; } /* desktop: the bike positions against the hero */

/* ---------- Phone ----------
   The hero is one screen tall. The copy sits at the top and the bike fills the space
   left under it (.hero-stage), with the headlight low in that space, so the bike,
   the light and the intro are always on screen whatever the phone's height. */
@media (max-width: 900px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse 80% 45% at 30% 75%, rgba(120,140,165,0.10), rgba(11,20,32,0) 70%),
      var(--g-night);
    --intro-from: translate(-90px, -120px) scale(0.36);
  }
  .hero-floor { height: 220px; background: linear-gradient(180deg, rgba(11,20,32,0), #111D2B); }
  .hero-floor-glow { display: none; }

  .hero-stage { display: block; position: relative; order: 2; flex: 1 1 auto; min-height: 240px; }
  /* Box 444 × 480: the headlight is 209 px down (43.5%), so top = 80% − 209 px puts it at 80% of the
     stage. On short phones that keeps the handlebars clear of the copy while the lamp stays on screen. */
  .hero-bike { left: -130px; top: calc(80% - 209px); bottom: auto; width: 444px; height: 480px; }
  .hero-beam {
    width: 640px; height: 520px;
    transform: translateY(-50%) rotate(-32deg);
    filter: blur(16px);
  }
  .hero-beam-cone {
    clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
    background: linear-gradient(90deg, rgba(225,238,255,0.6) 0%, rgba(160,200,255,0.28) 20%, rgba(70,145,240,0.1) 55%, rgba(20,122,255,0) 100%);
  }
  .hero-lamp {
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,232,255,0.8) 8%, rgba(90,160,255,0.3) 22%, rgba(20,122,255,0) 55%);
  }
  .hero-vignette { box-shadow: inset 0 0 120px 20px rgba(0,0,0,0.5); }

  .hero-copy { position: relative; order: 1; left: auto; right: auto; top: auto; margin: 96px var(--gutter) 0; }
  .hero-line { background-image: var(--g-hero-text-mobile); }
  .hero-lead { margin-top: 20px; }
  .hero-actions { display: block; margin-top: 26px; }
  .hero-actions .btn { display: flex; width: 100%; min-height: 56px; }
  .hero-sub { margin-top: 8px; justify-content: space-between; } /* 18 px in the design, less the 44 px link's extra height */
  .hero-sub .text-link { font-size: 15px; }
}

/* Short phones (most phones with the browser bar showing): tighter copy and a
   slightly smaller bike, so the handlebars clear the copy and the lamp stays in view. */
@media (max-width: 900px) and (max-height: 760px) {
  .hero-copy { margin-top: 84px; }
  .hero-copy h1 { font-size: 50px; }
  .hero-lead { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .hero-actions { margin-top: 18px; }
  .hero-actions .btn { min-height: 52px; }
  .hero-sub { margin-top: 4px; }
  /* Box 400 × 432: headlight 188 px down */
  .hero-bike { left: -112px; top: calc(78% - 188px); width: 400px; height: 432px; }
  .hero-lamp { width: 130px; height: 130px; }
}

/* ---------- Intro (html[data-intro] is set before first paint) ----------
   Timeline ≈ 4 s: approach 0–2.1 s → settle 1.75–2.45 s → lamp 2.3 s →
   beam 2.75 s → lines 3.0/3.15 s → lead 3.35 s → CTA 3.55 s → nav 3.7 s */
:root[data-intro="full"] .hero-bike {
  animation:
    vk-approach 2.1s cubic-bezier(0.22, 0.72, 0.28, 1) both, /* ease-out, no overshoot: never slides back */
    vk-appear 0.35s ease-out both;
}
:root[data-intro="full"] .hero-bike-settle { animation: vk-settle 0.7s ease-in-out 1.75s both; }
:root[data-intro="full"] .hero-lamp { animation: vk-flicker 0.55s linear 2.3s both; }
:root[data-intro="full"] .hero-beam-cone { animation: vk-sweep 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 2.75s both; }
:root[data-intro="full"] .hero-floor-glow { animation: vk-appear 0.8s ease-out 2.85s both; }
:root[data-intro="full"] .hero-line { animation: vk-reveal 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) 3s both; }
:root[data-intro="full"] .hero-line + .hero-line { animation-delay: 3.15s; }
:root[data-intro="full"] .hero-lead { animation: vk-appear 0.5s ease-out 3.35s both; }
:root[data-intro="full"] .hero-actions,
:root[data-intro="full"] .hero-note { animation: vk-rise 0.5s ease-out 3.55s both; }
:root[data-intro="full"] .nav { animation: vk-appear 0.5s ease-out 3.7s both; }

/* Reduced motion, or a repeat visit in the same session: final frame, simple fade */
:root[data-intro="fade"] .hero-bike,
:root[data-intro="fade"] .hero-copy,
:root[data-intro="fade"] .hero-floor-glow,
:root[data-intro="fade"] .nav { animation: vk-appear 0.6s ease-out both; }

@keyframes vk-approach {
  from { transform: var(--intro-from); }
  to { transform: none; }
}
@keyframes vk-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vk-settle {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes vk-flicker {
  0% { opacity: 0; }
  12% { opacity: 0.85; }
  22% { opacity: 0.1; }
  38% { opacity: 1; }
  48% { opacity: 0.35; }
  62%, 100% { opacity: 1; }
}
@keyframes vk-sweep {
  from { transform: scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes vk-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0.25; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes vk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}