/* Motion is applied to transparent artwork only, never as a tint over it. */
.home-showcase {background-color: #150104;}
.showcase-frame {position: relative;}
.showcase-frame::before, .showcase-frame::after {
  content: ""; position: absolute; width: 72px; height: 46px; pointer-events: none;
  border-color: #ffdb427d; border-style: solid; z-index: 0;
}
.showcase-frame::before {top: -1px; right: -1px; border-width: 2px 2px 0 0;}
.showcase-frame::after {bottom: -1px; left: -1px; border-width: 0 0 2px 2px;}
.showcase-promise h1 {font-weight: 700;}
.showcase-vehicle {perspective: 1100px;}
.showcase-vehicle img {transform-origin: 50% 55%; backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.showcase-vehicle-signature {letter-spacing: .12em; opacity: .94;}
.moving-brand-logo {
  display: block; position: fixed; left: 0; top: 0; z-index: 6201;
  height: auto; max-width: none; pointer-events: none;
  transform-origin: left top; will-change: transform; background: transparent;
}
.moving-brand-logo[hidden] {display: none;}
.logo-flight-ready :is(.showcase-crest img, .masthead-mark img) {visibility: hidden;}
.logo-flight-ready .showcase-crest {transform: none;}
.logo-flight-ready .masthead-brand > span:last-child {opacity: var(--brand-reveal, 0);}
.logo-flight-ready.menu-open .masthead-brand > span:last-child {opacity: 1;}
.logo-flight-ready.menu-open .masthead-mark img {visibility: visible;}
body.menu-open .moving-brand-logo {visibility: hidden;}
.showcase-sensorbar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; width: 100%; margin-top: 8px;
}
.vehicle-motion-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 44px; max-width: 100%; padding: 9px 16px;
  border: 1px solid #ffda0059; border-radius: 99px;
  background: #170708; color: #ffde44; font: 500 12px/1.4 var(--font); cursor: pointer;
}
.vehicle-motion-button svg {width: 18px; height: 22px; flex: 0 0 auto; background: none;}
.vehicle-motion-button[aria-pressed="true"] {background: #ffda0017; border-color: #ffda0090;}
.vehicle-motion-button:disabled {cursor: default; opacity: .7;}
.vehicle-motion-status {margin: 0; max-width: 330px; min-height: 1.5em; color: #efe8dc; font-size: 11px; line-height: 1.5; text-align: center;}
.showcase-vehicle.phone-depth-active img {
  transform: perspective(850px) translate3d(var(--phone-x, 0px), var(--phone-y, 0px), 12px)
    rotateX(var(--phone-pitch, 0deg)) rotateY(var(--phone-roll, 0deg));
  transition: opacity .2s;
  will-change: transform;
}
@media (min-width: 1281px) {
  .showcase-banner {padding-block: 8px 32px;}
  .showcase-slide {padding-block: 38px 28px;}
  .showcase-vehicle {padding: 20px 18px;}
  .showcase-vehicle-signature {margin-top: 12px;}
}
@media (max-width: 600px) {
  .showcase-vehicle-signature {font-size: 11px;}
  .showcase-vehicle.phone-depth-ready {padding-inline: 5px;}
  .showcase-frame::before, .showcase-frame::after {width: 44px; height: 30px;}
}
@media (prefers-reduced-motion: reduce) {
  .moving-brand-logo {display: none !important;}
  .logo-flight-ready :is(.showcase-crest img, .masthead-mark img) {visibility: visible;}
  .logo-flight-ready .masthead-brand > span:last-child {opacity: 1;}
  .showcase-vehicle.phone-depth-active img {transform: none !important; will-change: auto;}
}