/* The car scan, fitted into the homepage hero. */
.hero-lightning {
  position: absolute;
  z-index: 0;
  top: var(--header);
  left: 0;
  width: 100%;
  height: min(38%, 340px);
  pointer-events: none;
}
.hero-lightning[hidden] { display: none; }
.hero-experience {
  --experience-background: #080b0d;
  --experience-scan: #339cff;
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: 110px;
  width: 69%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.hero-experience__canvas,
.hero-experience__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 82%, transparent);
  mask-composite: intersect;
}
.hero-experience__fallback { filter: brightness(0.594); }
.hero-experience [hidden] { display: none; }
.hero-experience .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-experience__controls {
  position: absolute;
  right: 8%;
  left: 16%;
  bottom: -8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  color: #aeb8bf;
  font-size: .75rem;
  letter-spacing: .08em;
}
.hero-experience__pause {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: .02em;
  cursor: pointer;
}
.hero-experience__pause:hover { color: var(--white); }
.hero-experience__pause span { color: var(--blue); }
@media (min-width: 1700px) {
  .hero-experience { right: 0; width: 65%; bottom: 120px; }
}
@media (max-width: 1190px) {
  .hero-experience { right: -3%; width: 72%; bottom: 112px; }
}
@media (max-width: 1000px) {
  .hero-experience { right: -6%; width: 78%; bottom: 100px; }
}
@media (max-width: 700px) {
  .hero { min-height: 0; padding-bottom: 96px; display: flex; flex-direction: column; }
  .hero-content { order: 0; }
  .hero-experience {
    position: relative;
    order: 1;
    width: calc(100% + var(--pad) * 2);
    right: auto;
    bottom: auto;
    margin: 1.5rem calc(var(--pad) * -1) 1.5rem;
  }
  .hero-experience__controls { left: var(--pad); right: var(--pad); bottom: -28px; gap: .5rem; font-size: .6875rem; }
  .hero-experience__canvas, .hero-experience__fallback {
    mask-image: linear-gradient(180deg, transparent, #000 8%, #000 84%, transparent);
    mask-composite: add;
  }
}
@media (max-width: 374px) {
  .hero h1 { font-size: clamp(4.8rem, 26vw, 6.4rem); }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button { white-space: nowrap; }
}