:root {
  --red: #c9a34d;
  --action-red: #a88232;
  --action-red-hover: #8c6926;
  --brand-red: #c9a34d;
  --lettering-red: #a88232;
  --header-background: #292929;
  --stone: #d5d3ce;
}

.brand-reload img, .intro-logo-fallback, .scroll-brand img,
.moto-showcase-logo, .stock-logo, .footer-brand img { filter: none; }
.hero-copy { left: 63%; width: 32%; top: 44%; }
.site-intro-video { filter: url("#brand-car-intro-tone"); }
.copy-description { margin-top: clamp(9px, 2.1cqw, 30px); }
.motorcycle-scene { background: #bbc1c2 url("./public/assets/hero-car-poster.webp?v=3") center / cover no-repeat; }
/* The mask is sampled from the original poster by main.js. Its full-frame
   proportions follow the same cover framing as the untouched 2K video. */
.hero-wordmark-glint {
  display: block;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: var(--car-wordmark-mask, linear-gradient(transparent, transparent));
  mask-image: var(--car-wordmark-mask, linear-gradient(transparent, transparent));
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
}
.hero-wordmark-glint::after {
  top: 14%;
  bottom: auto;
  height: 24%;
  left: 0;
  width: 100%;
  background: var(--shine-gradient);
  opacity: .65;
  transform: translateX(-50%);
}
.hero.is-finished .hero-wordmark-glint { opacity: 1; }
.hero.is-finished .hero-wordmark-glint::after { animation: title-glint 8s linear infinite alternate; }
.hero-cta { border-color: rgb(150 113 37 / .25); box-shadow: 0 4px 10px -6px rgb(130 94 29 / .3); }
.hero-cta:hover { box-shadow: 0 10px 22px -12px rgb(130 94 29 / .55); }
.ambient-led-right, .ambient-led-floor { box-shadow: 0 0 7px 1px rgb(201 163 77 / .3), 0 0 24px 5px rgb(201 163 77 / .12); }
.stock-arrow { color: #94702b; }
.stock-arrow:not(:disabled):hover { background: var(--action-red); }
.stock-arrow:focus-visible, .stock-viewport:focus-visible { outline-color: var(--action-red); }
.site-footer { background: #282828; }
.site-footer a:hover { color: #efce82; }

@media (max-width: 700px), (max-width: 900px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .hero-copy { left: 60%; width: 36%; top: 43%; }
  .hero-copy .copy-heading { font-size: clamp(10px, 3cqw, 24px); }
  .hero-copy .copy-description { font-size: clamp(6px, 1.4cqw, 12px); }
  .hero-copy .hero-cta { min-width: clamp(92px, 25cqw, 180px); min-height: 34px; font-size: clamp(7px, 1.3cqw, 10px); }
}
@media (max-width: 700px) and (orientation: portrait) {
  .motorcycle-scene { background-position: 27% center; }
  .hero-video { object-position: 27% center; }
  .hero-wordmark-glint { -webkit-mask-position: 27% center; mask-position: 27% center; }
  .hero-copy { top: 43%; }
}