/* Hero model: the P-62 wireframe fills the hero, behind the copy.
   The copy lets pointer events through (except its links and buttons),
   so the whole hero turns the model. */

#site .hero-model{
  --hero-model-bg:var(--paper);
  position:absolute; inset:0; z-index:0;
  background:var(--paper);
}
#site .hero-model__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:grab; touch-action:pan-y;           /* vertical swipes still scroll the page */
}
#site .hero-model[data-drag="on"] .hero-model__canvas{ cursor:grabbing }

/* the copy sits above the model; only its controls take the pointer */
#site .hero--editorial .hero__in{ pointer-events:none }
#site .hero--editorial .hero__in :is(a, button, input, select, textarea){ pointer-events:auto }
/* a paper halo keeps the copy legible where it crosses the lines */
#site .hero--editorial .hero__in :is(.hero__title, .hero__lead, .eyebrow, .hero__proof){
  text-shadow:0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 14px var(--paper);
}

/* the hero is exactly one screen under the nav, so the start view frames the model
   the same way every time; the copy scales with the screen height as well */
#site .hero--editorial{
  height:calc(100svh - var(--v10b-nav-h, 68px));
  padding-block:clamp(2rem, 7vh, 7rem) clamp(2.5rem, 7vh, 6rem);
}
#site .hero--editorial .hero__title--xl{ font-size:clamp(3.4rem, min(8.9vw, 13vh), 9.6rem) }
@media (max-height:640px){ #site .hero--editorial{ height:auto } }

/* loader, three pulsing dots: only shown when loading takes more than a moment. It sits where the car will
   appear (--hero-model-focus-x, from the start view) and fades out as the model fades in. */
#site .hero-model__loader{
  position:absolute; left:var(--hero-model-focus-x, 70%); top:50%; transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:.55rem; color:var(--ink);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
#site .hero-model[data-loader="on"] .hero-model__loader{ opacity:1 }
#site .hero-model__loader i{
  display:block; width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:hero-model-pulse 1.2s ease-in-out infinite;
}
#site .hero-model__loader i:nth-child(2){ animation-delay:.16s }
#site .hero-model__loader i:nth-child(3){ animation-delay:.32s }
@keyframes hero-model-pulse{ 0%, 80%, 100%{ opacity:.2; transform:scale(.7) } 40%{ opacity:1; transform:scale(1) } }
/* phones: the car sits in the lower half under the copy, so does the loader */
@media (max-width:720px){
  #site .hero-model__loader{ left:50%; top:auto; bottom:clamp(7rem, 20vh, 11rem); transform:translateX(-50%) }
}

/* reset: bottom right */
#site .hero-model__reset{
  position:absolute; right:clamp(3.25rem, 5vw, 5rem); bottom:clamp(1rem, 2vh, 1.75rem); z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.6rem .95rem; border:1px solid var(--ink); border-radius:0;
  background:color-mix(in srgb, var(--paper) 88%, transparent); color:var(--ink); cursor:pointer;
  opacity:0; transition:opacity .4s ease, background .15s ease, color .15s ease; pointer-events:none;
}
#site .hero-model[data-state="ready"] .hero-model__reset{ opacity:1; pointer-events:auto }
#site .hero-model__reset:hover{ background:var(--ink); color:var(--paper) }
#site .hero-model__reset:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* hint after a plain wheel over the model */
#site .hero-model__hint{
  position:absolute; right:clamp(3.25rem, 5vw, 5rem); bottom:calc(clamp(1rem, 2vh, 1.75rem) + 2.9rem); margin:0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
#site .hero-model[data-hint="on"] .hero-model__hint{ opacity:1 }

@media (hover:none){ #site .hero-model__hint{ display:none } }
@media (prefers-reduced-motion:reduce){
  #site .hero-model__loader i{ animation:none; opacity:.6 }
}

/* Digital Modelling chapter (02): the same viewer behind the copy, white lines on black.
   It runs the full width of the page and the full height of the dark chapter; the copy
   lets the pointer through, except its links. On phones it sits below the copy instead. */
#site .hero-model--dark{
  --hero-model-bg:var(--v10a-black, #0b0b0b);
  --hero-model-line:#f4f3ee;
  background:var(--hero-model-bg);
  inset:0 auto 0 calc(50% - 50vw); width:100vw; z-index:-1;
}
#site .cap-chapter--2 :is(.cap-meta, .cap-content){ position:relative; z-index:1; pointer-events:none }
#site .cap-chapter--2 :is(.cap-meta, .cap-content) a{ pointer-events:auto }
#site .cap-chapter--2 :is(.cap-campaign, .cap-body, .caps__name, .cap-num, .caps__span, .caps__tags){
  text-shadow:0 0 2px #0b0b0b, 0 0 6px #0b0b0b, 0 0 14px #0b0b0b;
}
#site .hero-model--dark .hero-model__loader,
#site .hero-model--dark .hero-model__hint{ color:rgba(247,246,242,.6) }
#site .hero-model--dark .hero-model__loader{ color:#f4f3ee }
#site .hero-model--dark .hero-model__reset{
  border-color:rgba(247,246,242,.85); color:#f4f3ee; background:rgba(11,11,11,.7);
}
#site .hero-model--dark .hero-model__reset:hover{ background:#f4f3ee; color:#0b0b0b }
@media (max-width:900px){
  #site .hero-model--dark{
    position:relative; inset:auto; z-index:auto; order:3; grid-column:1 / -1;
    width:100vw; margin:-1.75rem 0 0 calc(50% - 50vw); aspect-ratio:3 / 2;   /* close up to the copy */
  }
  #site .cap-chapter--2 :is(.cap-meta, .cap-content){ pointer-events:auto }
}

/* Hero on phones and small tablets: the same arrangement as chapter 02, the copy first
   and the model as a block below it (its own start view, cameraMobile, cropped to the
   car with a window). */
@media (max-width:900px){
  #site .hero--editorial{ height:auto; min-height:0; justify-content:flex-start; padding-bottom:0 }
  #site .hero--editorial .hero-model{
    position:relative; inset:auto; order:5; z-index:auto;
    width:100vw; margin:1rem 0 0 calc(50% - 50vw); aspect-ratio:10 / 9;
  }
  #site .hero--editorial .hero__in{ pointer-events:auto }
  #site .hero--editorial .hero__in :is(.hero__title, .hero__lead, .eyebrow, .hero__proof){ text-shadow:none }
}