/* ==========================================================================
   motion-3d.css — shared chrome for the 3D motions (v2).
   Layout: a phone-sized 3:4 stage (max 440px) at every breakpoint. In a wide
   column, text (H2 + numbered steps or part key) sits left and the stage
   right; in a narrow column it stacks: stage, then the text.
   Component tokens reference the semantic layer in tokens.css only.
   ========================================================================== */

:root {
  --m3-bg: var(--surface-page);
  --m3-stage-max: 720px;
  --m3-tag-fg: var(--text-secondary);
  --m3-title-fg: var(--text-primary);
  --m3-step-fg: var(--text-secondary);
  --m3-step-current: var(--text-primary);
  --m3-num-fg: var(--text-accent);
  --m3-label-fg: var(--text-primary);
  --m3-leader: var(--text-secondary);
  --m3-note-fg: var(--text-secondary);
  --m3-label-size: calc(var(--size-xs) - 1px); /* 12px: on-model labels on a 440px stage */
}

.motion-3d {
  container-type: inline-size;
  background: var(--m3-bg);
}

.m3-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

/* Narrow (tablet, phone): the stage spans the full container width above
   the text. Wide: it fills the 7fr column up to --m3-stage-max. The figure
   is a size container so the stage height follows the column width. */
.m3-figure {
  position: relative;
  width: 100%;
  margin-inline: auto;
  order: -1; /* narrow: stage first, then the text */
  container-type: inline-size;
}

@container (min-width: 760px) {
  /* 5fr text / 7fr stage column; the stage is centred in its column */
  .m3-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
  .m3-figure { order: 0; max-width: var(--m3-stage-max); }
}

/* Text column */
.m3-title {
  margin: 0 0 var(--space-5);
  font-family: var(--type-heading-font);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  letter-spacing: var(--type-heading-tracking);
  color: var(--m3-title-fg);
}

.m3-steps,
.m3-key {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.m3-steps li,
.m3-key li {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.m3-steps li {
  font-family: var(--type-body-font);
  font-size: var(--size-lg);
  line-height: 1.3;
  color: var(--m3-step-fg);
  transition: color 300ms ease-out;
}
.m3-steps li.is-current,
.motion-3d.is-static .m3-steps li { color: var(--m3-step-current); }
.m3-key { gap: var(--space-3); }
.m3-key li {
  font-family: var(--type-label-font);
  font-size: var(--type-label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m3-step-fg);
  transition: color 300ms ease-out;
}
.m3-key li.is-current,
.motion-3d.is-static .m3-key li { color: var(--m3-step-current); }
.m3-steps li::before,
.m3-key li::before {
  content: attr(data-n);
  font-family: var(--type-data-font);
  font-size: var(--type-data-size);
  color: var(--m3-num-fg);
}
.m3-key li::before { color: var(--m3-step-fg); transition: color 300ms ease-out; }
.m3-key li.is-current::before,
.motion-3d.is-static .m3-key li::before { color: var(--m3-num-fg); }

.m3-note {
  margin: var(--space-5) 0 0;
  font-size: var(--size-sm);
  color: var(--m3-note-fg);
}

/* Figure: tag, stage, Replay */
.m3-tag {
  position: absolute;
  z-index: 1;
  bottom: var(--space-2);
  left: var(--space-3);
  font-family: var(--type-label-font);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--m3-tag-fg);
}

/* Height: Motion A min(80svh, 1.0 x width); Motion B (tall exploded stack)
   min(85svh, 1.15 x width). Never taller than the viewport under the header. */
.m3-stage {
  position: relative;
  width: 100%;
  height: min(80svh, 100cqw, 100svh - var(--hdr-h, 65px) - var(--space-6));
  overflow: hidden; /* off-frame tags never widen the page */
  user-select: none;
  -webkit-user-select: none;
}
[data-motion="explode"] .m3-stage {
  height: min(85svh, 115cqw, 100svh - var(--hdr-h, 65px) - var(--space-6));
}
.motion-3d:not(.is-static) .m3-stage { cursor: pointer; }
.motion-3d.can-drag .m3-stage { cursor: grab; touch-action: pan-y; }
.motion-3d.can-drag .m3-stage:active { cursor: grabbing; }

.m3-poster { object-fit: contain; }
.m3-canvas,
.m3-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Part numbers with leader lines; inline tags (IN / OUT) sit on the part */
.m3-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.m3-leaders path { fill: none; stroke: var(--m3-leader); stroke-width: 1; }
.m3-leaders circle { fill: var(--m3-leader); }
.m3-leaders .is-accent { stroke: var(--m3-num-fg); }
.m3-leaders circle.is-accent { fill: var(--m3-num-fg); }

/* Part label: number, with the name below it and an optional note below
   that. Small (12px) so it fits the phone-sized stage at every breakpoint.
   Neutral by default; the key part (cathode) carries the gold number. */
.m3-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--type-label-font);
  font-size: var(--m3-label-size);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m3-label-fg);
  pointer-events: none;
  opacity: 0; /* shown once placed */
}
.m3-num { font-family: var(--type-data-font); }
.m3-label.is-accent .m3-num { color: var(--m3-num-fg); }
.m3-label--left { transform: translateX(calc(-100% - var(--space-1))); align-items: flex-end; text-align: right; }
.m3-label--right { padding-left: var(--space-1); }
.m3-sub {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--type-body-font);
  font-size: var(--m3-label-size);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--m3-note-fg);
}
/* the part note already sits on the model label, so the key list does not repeat it */
.m3-key .m3-sub { display: none; }
.m3-label--inline {
  transform: translate(-50%, calc(-100% - var(--space-2)));
  padding: 0 var(--space-1);
  font-family: var(--type-label-font);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  color: var(--m3-label-fg);
  background: var(--m3-bg);
  border-radius: var(--radius-sm);
}

/* Replay sits inside the stage corner, so the figure is exactly the stage */
.m3-foot {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
}

/* Step title, then a one-line explanation under it */
.m3-step-name,
.m3-step-desc {
  grid-column: 2;
}
.m3-steps li:has(.m3-step-desc) { row-gap: 0; }
.m3-step-desc {
  margin-top: var(--space-1);
  font-size: var(--size-sm);
  line-height: var(--type-body-line);
  color: var(--m3-note-fg);
}
.m3-steps li.is-current .m3-step-desc,
.motion-3d.is-static .m3-step-desc { color: var(--text-secondary); }

.m3-replay {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--m3-bg);
  border: 1px solid var(--btn-quiet-border);
  border-radius: 50%;
  color: var(--btn-quiet-fg);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color 120ms ease, color 120ms ease;
}
.m3-replay:active { transform: scale(0.97); }
.m3-replay::after { /* 44px hit area */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}
.m3-replay svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .m3-replay:hover { background: var(--btn-quiet-bg-hover); color: var(--text-primary); }
}
@media (prefers-reduced-motion: reduce) {
  .m3-replay:active { transform: none; }
}
.m3-replay:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }