/* Coordinates measured against the supplied 3344 x 1888 cockpit photograph.
   The existing 1920 x 1080 animation is never stretched or rearranged.
   Crop y=260..860; bottom information is raised within the same coordinate space. */
#section-10.instrument--mockup {
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  background: #05050b;
}
.instrument-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 3344 / 1888;
  container-type: inline-size;
}
.instrument-mockup__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.instrument-mockup__screen {
  position: absolute;
  left: 10.65%;
  top: 32%;
  width: 78.6%;
  height: 38.85%;
  container-type: size;
  overflow: hidden;
  /* This is the physical screen silhouette, not a website component radius. */
  clip-path: polygon(3% 0, 97% 0, 98% 1%, 98.5% 3%, 100% 96%, 99.7% 98%, 99% 100%, 1% 100%, .3% 98%, 0 96%, 1.5% 3%, 2% 1%);
  background: #0a090d;
}
.instrument-mockup__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100cqh * 1920 / 600);
  height: calc(100cqh * 1080 / 600);
  transform: translate(-50%, -51.851852%);
}
#section-10 .instrument__fallback,
#section-10 .instrument__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a090d;
  object-fit: contain;
  transition: none;
}
#section-10 .instrument__fallback { display: block; opacity: 1; }
#section-10 .instrument__fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Reuse the same poster pixels; move only the two information strips. */
#section-10 .instrument__poster-main { clip-path: polygon(0 0, 100% 0, 100% 74.074074%, 82.291667% 74.074074%, 82.291667% 100%, 26.5625% 100%, 26.5625% 74.074074%, 0 74.074074%); }
#section-10 .instrument__poster-left { clip-path: inset(74.074074% 73.4375% 16.666667% 4.166667%); transform: translateY(-2.314815%); }
#section-10 .instrument__poster-right { clip-path: inset(75% 6.25% 17.592593% 82.291667%); transform: translateY(-2.962963%); }
#section-10 .instrument__frame { opacity: 0; visibility: hidden; }
#section-10.is-frame-loaded .instrument__frame { opacity: 1; visibility: visible; }
#section-10.is-frame-loaded .instrument__fallback { opacity: 0; }
@media (min-width: 414px) and (max-width: 479px) and (orientation: portrait) {
  #section-10:not(.is-live) .instrument__frame { opacity: 0; visibility: hidden; }
  #section-10:not(.is-live) .instrument__fallback { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #section-10 .instrument__frame { display: none; }
  #section-10 .instrument__fallback { opacity: 1; }
}