/* Hero3D — the E-40 as a turntable render inside the hero figure frame.
   The stage is transparent: the cursor-lit field behind section 01 reads
   straight through the appliance. */

.hero-stage {
  position: relative;
  width: 100%;
  /* Squarer than the flat drawing was: the render carries no dimension lines
     below the chassis, so the box is cropped to what the stack needs. */
  aspect-ratio: 680 / 480;
}

three-d-stage:not(:defined) { visibility: hidden; }

.hero-stage three-d-stage {
  position: absolute;
  inset: 0;
}

/* Until the stage boots — and if it never does — the figure keeps the flat
   exploded drawing. Only one of the two is ever in the layout. */
.hero-stage { display: none; }
.hero-figure.is-3d .hero-stage { display: block; }
.hero-figure.is-3d .hero-fallback { display: none; }

/* ---------- Callouts ---------- */

/* Projected from 3D anchors each frame (see Hero3D.js), so they hold the same
   type as the leader labels the SVG carried: 10px mono, steel, no orange —
   the page's four signal uses are spent elsewhere. */
.hero-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.hero-labels .lbl {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Anchor on the far side of the appliance: the leader runs back inward.
   Placement is set in JS, so this only reverses the leader and the text. */
.hero-labels .lbl--flip { flex-direction: row-reverse; }

.hero-labels .tick {
  width: 20px;
  height: 1px;
  background: var(--steel);
  flex: none;
}

.hero-labels .dot {
  position: absolute;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--steel);
}

@media (max-width: 900px) {
  .hero-labels { font-size: 9px; }
  .hero-labels .tick { width: 16px; }
}

/* Below the hero's single-column break the stage is too narrow for a callout
   on one line — the text wraps into a block instead of running off the frame. */
@media (max-width: 620px) {
  .hero-labels .lbl { align-items: flex-start; }
  .hero-labels .tick { margin-top: 5px; }
  /* A definite width, not a max: an absolutely-positioned shrink-to-fit box
     would size itself off whatever room is left at its current x, and the
     placement below reads that width back. */
  .hero-labels .txt {
    display: block;
    width: 96px;
    line-height: 1.4;
    white-space: normal;
  }
  .hero-labels .lbl { white-space: normal; }
}