/* ==========================================================================
   DeltaXY, Plane showcase panel

   Styles for the annotated A320 that fills the aviation mission slot on the
   homepage. Paired with assets/js/plane-showcase.js. Deliberately standalone:
   aviation.css dresses the 520px runway strip on aviation.html and is not
   loaded here, so nothing in this file can affect that page.
   ========================================================================== */

.plane-showcase {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Dissolve into the panel rather than stopping at a hard edge. */
  -webkit-mask-image: radial-gradient(120% 116% at 50% 46%, #000 58%, transparent 100%);
          mask-image: radial-gradient(120% 116% at 50% 46%, #000 58%, transparent 100%);
}

.plane-showcase__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 720ms var(--ease);
}

.plane-showcase.is-ready .plane-showcase__canvas { opacity: 1; }

/* --------------------------------------------------------------------------
   Spec readout

   A quiet instrument caption rather than a tooltip: it stays in one place at
   the foot of the panel and changes contents as each system is revealed, so
   nothing tracks across the aircraft or covers it.
   -------------------------------------------------------------------------- */

.plane-showcase {
  /* Sampled off the wireframe so caption and mesh read as one instrument. */
  --xray-green: #8fe3ab;
}

.plane-readout {
  position: absolute;
  left: clamp(0.9rem, 3%, 1.75rem);
  bottom: clamp(0.9rem, 5%, 1.6rem);
  z-index: 2;
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(143, 227, 171, 0.45);
  pointer-events: none;
  opacity: 0;
}

/* Re-triggered on every change, so each system announces itself. */
.plane-readout.is-on {
  animation: plane-readout-in 620ms var(--ease) forwards;
}

.plane-readout b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--xray-green);
  margin-bottom: 0.3rem;
}

.plane-readout span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(143, 227, 171, 0.6);
}

@keyframes plane-readout-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .plane-readout span { display: none; }
}

/* The slot placeholder label sits above the canvas once the study is in, so
   retire it as soon as the scene is up. The dashed frame stays. */
.mission__visual:has(.plane-showcase.is-ready)::after { content: none; }