/* ============================================================
   PRODUCT SCENES (prefix sc-)
   The product drawn as an isometric technical illustration: the hero
   scene with its features pinned to parts (.sc-hero), and an exploded
   view of the workflow (.sc-exploded). The drawings are inline SVG made
   by one shared isometric kit, so every scene uses the same projection,
   tones and line weights. Tokens come from mindfox-redesign.css. Load
   last, after the page's own stylesheet (foxpert-pro.css, fox-product.css,
   foxpert-ipad.css, foxpert-web.css or detail-page.css) and after
   product-simple.css where the page loads it.

   Drawing language (an engineering illustration, not clip-art):
     faces       three steel tones from one light, filled in the SVG
     .sc-e       hairline edges inside a part
     .sc-o       a heavier silhouette around each part
     .sc-hatch   section hatching where a part is cut away
     .sc-phantom a phantom line (long, short, short): a neighbouring layer
     .sc-center  an axis (long, short)
     orange      only on what is live: the beam, the sweep, a chosen key,
                 the active callout or stage

   Motion is opt-in and plays once. Every animation sits in the
   `prefers-reduced-motion: no-preference` block and starts when the
   enclosing .mf-reveal turns .is-visible (js/mindfox-redesign.js). The
   default state, which reduced motion and no-JS visitors see, is the
   finished drawing.
   ============================================================ */

.sc-hero,
.sc-exploded {
  --sc-edge: rgba(255, 255, 255, 0.1);
  --sc-out: rgba(214, 220, 230, 0.5);
  --sc-lead: #7E848F;
  --sc-ink: #4C525C;
  --sc-ease: cubic-bezier(0.2, 0, 0, 1);   /* one curve for every entrance */
}

.sc-hero svg,
.sc-exploded svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Linework ─────────────────────────────────────────────── */
.sc-e { stroke: var(--sc-edge); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-o { fill: none; stroke: var(--sc-out); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-hatch,
.sc-hair { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-center {
  fill: none;
  stroke: rgba(154, 160, 172, 0.55);
  stroke-width: 0.8;
  stroke-dasharray: 14 3 3 3;
  vector-effect: non-scaling-stroke;
}
.sc-phantom {
  fill: none;
  stroke: rgba(154, 160, 172, 0.42);
  stroke-width: 0.8;
  stroke-dasharray: 10 3 2 3 2 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sc-ink { fill: none; stroke: var(--sc-ink); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-ink-block { fill: var(--sc-ink); }
.sc-sign { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-key { fill: #2A2D33; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-key--live { fill: var(--orange); stroke: none; }
.sc-sensor { fill: #262930; }
.sc-film__edge { fill: none; stroke: rgba(214, 220, 230, 0.4); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.sc-sweep { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.sc-beam { visibility: hidden; fill: rgba(255, 123, 28, 0.14); stroke: rgba(255, 123, 28, 0.7); stroke-width: 0.8; vector-effect: non-scaling-stroke; }

/* Conduits: an outline, a steel body, a lighter core; the signal line is orange when its stage is live. */
.sc-pipe path { fill: none; stroke-linejoin: round; }
.sc-pipe__edge { stroke: rgba(214, 220, 230, 0.42); }
.sc-pipe__body { stroke: #24272C; }
.sc-pipe__core { stroke: #3A3E46; }
.sc-flow { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0; }
.sc-trace { fill: none; stroke: rgba(154, 160, 172, 0.4); stroke-width: 0.8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
/* Live accents of a stage: steel until the stage is live, orange when it is. */
.sc-live { fill: none; stroke: var(--sc-live, rgba(214, 220, 230, 0.55)); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-live-dot { fill: var(--sc-live, #C9CED6); }
.sc-live-fill { fill: var(--sc-live, #C9CED6); }

/* A beam that stays on at rest (the X-ray fan of a cabinet): the live part of that scene. */
.sc-ray { fill: rgba(255, 123, 28, 0.12); stroke: rgba(255, 123, 28, 0.7); stroke-width: 0.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* A beam's geometry where nothing fires (a CT geometry file read back): steel, dashed, a faint fill. */
.sc-cone { fill: rgba(154, 160, 172, 0.06); stroke: rgba(154, 160, 172, 0.55); stroke-width: 0.8; stroke-dasharray: 6 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Pictures drawn on a screen in a scene: a radiograph (denser metal reads lighter, voids
   darker), a region marked on it, a plot drawn as a mesh, rows of a list. */
.sc-img { fill: #16181C; stroke: rgba(255, 255, 255, 0.08); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-img__weld { fill: #555B65; }
.sc-img__pore { fill: #16181C; }
.sc-region { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-mesh { fill: none; stroke: rgba(214, 220, 230, 0.55); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-ink--screen { stroke: #5A606B; stroke-width: 1; }
.sc-row-dot { fill: #8C929C; }
/* A browser window drawn on a screen: its bar, the open tab; a dashed link to something apart. */
.sc-chrome { fill: #24272D; }
.sc-tab { fill: #3A3E46; stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-link { fill: none; stroke: rgba(154, 160, 172, 0.5); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
/* A tablet's screen: large round touch targets, one selected, the ring where it was touched
   (shown only while it plays), a dimension across a target, a readout's bars. */
.sc-target { fill: #2E3138; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-target--on { fill: #8C929C; }
.sc-touch { fill: none; stroke: rgba(214, 220, 230, 0.7); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.sc-dim { fill: none; stroke: #9AA0AC; stroke-width: 0.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* A cursor shared by linked views: one line across every chart it belongs to. */
.sc-cursor { fill: none; stroke: #C9CED6; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-bars { fill: none; stroke: #6C727C; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sc-field { fill: #24272D; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
/* A roller's axle end on a conveyor's side: a small ring, not a lamp. */
.sc-axle { fill: none; stroke: #8C929C; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
/* Where a part sits against another (a tablet's edge in its stand's lip): a dark crease. */
.sc-contact { fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* A stylus: a pale body with a flat, a darker tip; its ink is the live part. */
.sc-pencil__body { fill: #B7BCC4; }
.sc-pencil__flat { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sc-pencil__tip { fill: #8C929C; }
.sc-pencil__cap { fill: none; stroke: #8C929C; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.sc-ink-live { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Edges an image enhancement brings out, drawn over the picture on a screen. */
.sc-edges { fill: none; stroke: rgba(214, 220, 230, 0.5); stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* A row picked in a list on a screen, and a slider: its set part and its knob. */
.sc-sel { fill: #2E3138; }
.sc-tech { fill: none; stroke: #C9CED6; stroke-width: 1.6; stroke-linecap: round; }
.sc-knob { fill: #C9CED6; }
/* The image circle on a screen (the detector's field), and a guidewire seen in it. */
.sc-disc { fill: none; stroke: rgba(214, 220, 230, 0.35); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.sc-wire { fill: none; stroke: #C9CED6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* A field shot: the source capsule, a wire IQI's wires (their widths set in the drawing), and a
   safety-zone boundary on the ground, dashed because it is worked out, not built. */
.sc-src { fill: none; stroke: #C9CED6; stroke-width: 5; stroke-linecap: round; }
.sc-iqi { fill: none; stroke: #2A2D33; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-zone { fill: none; stroke: rgba(154, 160, 172, 0.6); stroke-width: 1; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }

/* Frames of the sweep: the unit is drawn at eleven angles; only the last shows at rest. */
.sc-f { visibility: hidden; }
.sc-f--rest { visibility: visible; }

/* Leaders: one dot on the part; the wide set ends on a side edge, the narrow set on the top or bottom. */
.sc-lead__line { fill: none; stroke: var(--sc-hot, var(--sc-lead)); stroke-width: 1.2; stroke-linejoin: round; }
.sc-lead__dot { fill: var(--sc-hot, #C9CED6); }
.sc-lead__ring { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: 0; }
/* The container queries toggle these wrapper groups, never the animated paths inside them:
   Chrome keeps the display an animated SVG element had when its animation started. */
.sc-lead__b { display: none; }
/* A part drawn twice, for the wide and the narrow hero (a sheet that would outweigh the scene when
   the callouts stack); the same rule: only these wrapper groups are toggled. */
.sc-hero .sc-narrow { display: none; }

/* ══ HERO SCENE ════════════════════════════════════════════
   Wide: callouts in two side zones, centred on the end of their leader
   (--y, the exit height written by the scene kit), each with a short
   shoulder line drawn here so the zones can change width.
   Narrow: two callouts above the drawing and two below, each hanging
   from a rule that continues its leader (--bx, the exit position).
   ────────────────────────────────────────────────────────── */
.sc-hero {
  container: sc-hero / inline-size;
  max-width: 760px;
  margin-inline: auto;
}
.sc-hero__stage {
  --zone: 22%;
  --shoulder: 16px;
  position: relative;
  display: grid;
  grid-template-columns: var(--zone) minmax(0, 1fr) var(--zone);
}
.sc-hero__art { grid-column: 2; grid-row: 1; min-width: 0; }

.sc-callouts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sc-callout {
  position: absolute;
  top: var(--y);
  width: var(--zone);
  transform: translateY(-50%);
}
.sc-callout--l { left: 0; padding-right: var(--shoulder); text-align: right; }
.sc-callout--r { right: 0; padding-left: var(--shoulder); }
.sc-callout::before {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--shoulder) - 5px);
  height: 1px;
  background: var(--sc-lead);
}
.sc-callout--l::before { right: 0; }
.sc-callout--r::before { left: 0; }
.sc-callout__title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.sc-callout__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.sc-hero__caption {
  max-width: 34em;
  margin: 22px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-secondary);
}

@container sc-hero (max-width: 699px) {
  .sc-hero__stage { --zone: 24%; }
}
@container sc-hero (max-width: 599px) {
  .sc-hero__stage { --zone: 26%; --shoulder: 13px; }
  .sc-callout__title { font-size: 14px; }
  .sc-callout__line { font-size: 12.5px; line-height: 1.45; }
}

@container sc-hero (max-width: 499px) {
  .sc-hero__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .sc-hero__art { grid-column: 1 / -1; grid-row: 2; }
  .sc-callouts {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .sc-callout {
    position: static;
    grid-row: var(--row);
    width: auto;
    transform: none;
    text-align: left;
    /* the column is half the stage: 2% of it is 1% of the stage */
    margin-left: calc(var(--bx) * 2%);
    padding: calc((var(--row) - 1) * 7px) 8px calc((3 - var(--row)) * 7px) 10px;
    border-left: 1px solid var(--sc-lead);
  }
  .sc-callout--l { grid-column: 1; }
  .sc-callout--r { grid-column: 2; margin-left: calc((var(--bx) - 50) * 2%); }
  .sc-callout::before { display: none; }
  .sc-callout__title { font-size: 14px; }
  .sc-callout__line { font-size: 12.5px; }
  .sc-lead__a { display: none; }
  .sc-lead__b { display: inline; }
  .sc-hero .sc-wide { display: none; }
  .sc-hero .sc-narrow { display: inline; }
  .sc-hero__caption { margin-top: 18px; text-align: left; }
}

/* ══ EXPLODED WORKFLOW ═════════════════════════════════════
   Wide: one canvas in the drawing's own proportions. The background
   svg holds the conduits, the spine and the trace lines; each stage's
   drawing is a window onto the same coordinates (--x, --y, --w, written
   by the scene kit), so the pieces meet exactly; its text sits at
   --lx/--ly. Narrow: the same drawings stack as rows beside their text,
   joined by a trace line through the software layers.

   Lighting (js/product-scenes.js): the script arms the figure, then
   lights the stages in order as the figure scrolls through the
   viewport. Without the script, or with reduced motion, the figure is
   never armed and every stage shows lit.
   ────────────────────────────────────────────────────────── */
.sc-exploded {
  container: sc-x / inline-size;
  max-width: 1040px;
  margin-inline: auto;
}
.sc-exploded__canvas { position: relative; aspect-ratio: var(--ar); }
.sc-exploded .sc-exploded__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-stages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sc-stage { position: static; }
.sc-exploded .sc-stage__svg { position: absolute; left: var(--x); top: var(--y); width: var(--w); }

.sc-stage__text {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 22%;
  transform: translateY(-50%);
}
.sc-stage--in .sc-stage__text { width: 26%; transform: none; }
.sc-stage--out .sc-stage__text { width: 24%; transform: none; }
.sc-stage__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
/* Item balloons, as in an exploded parts drawing. */
.sc-stage__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--sc-lead);
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.sc-stage__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.sc-outs { margin: 0; padding: 0; list-style: none; }
.sc-out {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sc-out[data-out="rack"] { transform: translate(12px, -50%); }
.sc-out[data-out="pdf"] { transform: translate(-50%, -100%) translateY(-8px); }
.sc-out[data-out="cd"] { transform: translate(-50%, 10px); }
/* Placement of a result's label against the point the scene kit gives it (--lx/--ly): a point on
   a side of the result's box, so the label always sits 10 px or more clear of the result. Two
   classes, so these win over Dental's [data-out] rules above for a label of the same name. */
.sc-out.sc-out--r { transform: translate(12px, -50%); }
.sc-out.sc-out--l { transform: translate(calc(-100% - 12px), -50%); }
.sc-out.sc-out--t { transform: translate(-50%, -100%) translateY(-10px); }
.sc-out.sc-out--b { transform: translate(-50%, 10px); }

.sc-tick path { fill: none; stroke: var(--sc-lead); stroke-width: 1; }
.sc-tick circle { fill: #C9CED6; }

/* Lit and live. Unarmed (no script, reduced motion): everything lit, the accents live. */
.sc-exploded:not(.sc-armed) { --sc-live: var(--orange); }
.sc-armed .sc-stage__svg,
.sc-armed .sc-exploded__bg [data-stage] { opacity: 0.26; }
.sc-armed .sc-stage.is-lit .sc-stage__svg,
.sc-armed .sc-exploded__bg .is-lit { opacity: 1; }
.sc-armed .sc-stage:not(.is-lit) .sc-stage__title { color: var(--text-muted); }
.sc-armed .sc-stage:not(.is-lit) .sc-stage__line,
.sc-armed .sc-stage:not(.is-lit) .sc-out { color: #4E535C; }
.sc-armed .is-active { --sc-live: var(--orange); }
.sc-armed .is-active .sc-flow { opacity: 1; }
.sc-armed .sc-stage.is-active .sc-stage__num { color: var(--orange); border-color: var(--orange); }

@container sc-x (max-width: 859px) {
  .sc-exploded__canvas { aspect-ratio: auto; }
  .sc-exploded .sc-exploded__bg { display: none; }
  /* a conduit that carries on across the wide canvas would end in mid-air here */
  .sc-exploded .sc-pipe--x { display: none; }
  .sc-stages { position: static; display: grid; row-gap: 6px; }
  .sc-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }
  .sc-exploded .sc-stage__svg { position: relative; z-index: 1; left: auto; top: auto; width: 100%; }
  .sc-stage__text,
  .sc-stage--in .sc-stage__text,
  .sc-stage--out .sc-stage__text { position: static; width: auto; transform: none; }
  /* the trace line through the software layers, at the centre of their drawings */
  .sc-stage:not(.sc-stage--in):not(.sc-stage--out)::before {
    content: '';
    position: absolute;
    left: 22%;
    top: -6px;
    bottom: -6px;
    border-left: 1px dashed rgba(154, 160, 172, 0.45);
  }
  .sc-stage--in,
  .sc-stage--out { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  /* --nw: a narrow drawing's width, when the scene kit sets one for a compact stage */
  .sc-stage--in .sc-stage__svg { width: var(--nw, 72%); }
  .sc-stage--out .sc-stage__svg { width: var(--nw, 92%); }
  .sc-outs { display: flex; flex-wrap: wrap; gap: 6px 18px; grid-column: 1 / -1; }
  .sc-out,
  .sc-out[data-out] { position: static; transform: none; }
  .sc-stage__title { font-size: 14.5px; }
}

/* ══ MOTION (opt-in, once) ═════════════════════════════════
   One inspection, about four seconds, then the scene rests:
   1. the program key is chosen and the Programs callout settles;
   2. the unit sweeps in eleven frames (a stepped, mechanical move)
      while the panorama film is laid slice by slice behind it;
   3. Panorama, Ceph and Report settle in order, the report sheet
      lifting off as its callout lands.
   Times are from the moment the hero column is revealed.
   ────────────────────────────────────────────────────────── */
.sc-hero {
  --t-sweep: 1.05s;   /* first frame of the sweep */
  --fd: 0.16s;        /* one frame */
  --d0: 0.45s;        /* Programs */
  --d1: 2.85s;        /* Panorama, as the last frame lands */
  --d2: 3.1s;         /* Ceph */
  --d3: 3.35s;        /* Report */
}
.sc-lead:nth-child(1), .sc-callout:nth-child(1) { --d: var(--d0); }
.sc-lead:nth-child(2), .sc-callout:nth-child(2) { --d: var(--d1); }
.sc-lead:nth-child(3), .sc-callout:nth-child(3) { --d: var(--d2); }
.sc-lead:nth-child(4), .sc-callout:nth-child(4) { --d: var(--d3); }

@media (prefers-reduced-motion: no-preference) {
  /* frames: each one is on for its own slot only; the first holds until the sweep starts */
  .is-visible .sc-hero .sc-f { animation: sc-on var(--fd) step-end calc(var(--t-sweep) + var(--k) * var(--fd)); }
  .is-visible .sc-hero .sc-f--first { animation: sc-on calc(var(--t-sweep) + var(--fd)) step-end; }
  .is-visible .sc-hero .sc-f--rest { animation: sc-off calc(var(--t-sweep) + var(--k) * var(--fd)) step-end; }
  .is-visible .sc-hero .sc-beam { animation: sc-on var(--fd) step-end calc(var(--t-sweep) + var(--k) * var(--fd)); }
  .is-visible .sc-hero .sc-slice { animation: sc-off calc(var(--t-sweep) + var(--k) * var(--fd)) step-end; }
  .is-visible .sc-hero .sc-key--live { animation: sc-key 0.15s ease-out calc(var(--d0) + 0.12s) backwards; }

  /* callouts: the leader draws from the part, the dot rings once, the text settles */
  .is-visible .sc-hero .sc-lead__line { animation: sc-draw 0.36s var(--sc-ease) var(--d) backwards; }
  .is-visible .sc-hero .sc-lead__dot { animation: sc-pop 0.22s var(--sc-ease) var(--d) backwards; }
  .is-visible .sc-hero .sc-lead__ring { animation: sc-ring 0.7s ease-out var(--d); transform-box: fill-box; transform-origin: center; }
  .is-visible .sc-hero .sc-callout { animation: sc-settle 0.4s var(--sc-ease) calc(var(--d) + 0.16s) backwards; }
  .is-visible .sc-hero .sc-sheet { animation: sc-lift 0.7s var(--sc-ease) calc(var(--d3) - 0.25s) backwards; }

  .sc-lead__line, .sc-lead__dot { transition: stroke 0.15s ease, fill 0.15s ease; }

  /* scroll lighting of the exploded workflow: stages fade up and their text brightens */
  .sc-armed .sc-stage__svg,
  .sc-armed .sc-exploded__bg [data-stage] { transition: opacity 0.45s var(--sc-ease); }
  .sc-stage__title, .sc-stage__line, .sc-out { transition: color 0.35s var(--sc-ease); }
  .sc-stage__num { transition: color 0.35s var(--sc-ease), border-color 0.35s var(--sc-ease); }
}
/* ── FoXpert Pro (.sc-hero--pro) ─────────────────────────────
   The manipulator brings the weld into the beam in six steps, the
   tube exposes, the radiograph comes up on the monitor, its region is
   marked and plotted in 3D, and the action lands in the audit log. */
.sc-hero--pro {
  --t-sweep: 0.95s;   /* first step of the carriage */
  --fd: 0.14s;        /* one step */
  --t-ray: 1.8s;      /* the exposure */
  --t-img: 2.0s;      /* the radiograph on the monitor */
  --t-reg: 2.25s;     /* the region marked on it */
  --d0: 0.45s;        /* Hardware */
  --d1: 2.6s;         /* 3D, as the plot rises */
  --d2: 3.0s;         /* Audit, as the row lands */
  --d3: 3.35s;        /* AI */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--pro .sc-ray { animation: sc-pop 0.25s ease-out var(--t-ray) backwards; }
  .is-visible .sc-hero--pro .sc-pic { animation: sc-pop 0.45s var(--sc-ease) var(--t-img) backwards; }
  .is-visible .sc-hero--pro .sc-region { animation: sc-draw 0.4s var(--sc-ease) var(--t-reg) backwards; }
  .is-visible .sc-hero--pro .sc-plot {
    animation: sc-rise 0.5s var(--sc-ease) var(--d1) backwards;
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }
  .is-visible .sc-hero--pro .sc-row--new { animation: sc-pop 0.3s ease-out var(--d2) backwards; }
}

/* ── FoXpert Web (.sc-hero--web) ─────────────────────────────
   The tab opens, a study is carried from the device into it in four
   steps, the radiograph comes up, an ROI is marked and a profile drawn,
   the session lands in the library's activity, and the report lifts off. */
.sc-hero--web {
  --t-sweep: 1.0s;    /* the study leaves the stack */
  --fd: 0.14s;        /* one step */
  --t-img: 1.62s;     /* the radiograph in the tab */
  --t-reg: 1.85s;     /* the ROI */
  --t-prof: 2.1s;     /* the line and its profile */
  --d0: 0.45s;        /* Browser, as the tab opens */
  --d1: 0.85s;        /* Offline, as the study leaves the device */
  --d2: 2.55s;        /* Cloud, as the activity row lands */
  --d3: 2.95s;        /* Report, as the sheet lifts off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--web .sc-tab { animation: sc-pop 0.3s ease-out var(--d0) backwards; }
  .is-visible .sc-hero--web .sc-pic { animation: sc-pop 0.45s var(--sc-ease) var(--t-img) backwards; }
  .is-visible .sc-hero--web .sc-region { animation: sc-draw 0.4s var(--sc-ease) var(--t-reg) backwards; }
  .is-visible .sc-hero--web .sc-pline { animation: sc-pop 0.2s ease-out var(--t-prof) backwards; }
  .is-visible .sc-hero--web .sc-pcurve { animation: sc-draw 0.5s var(--sc-ease) var(--t-prof) backwards; }
  .is-visible .sc-hero--web .sc-row--new { animation: sc-pop 0.3s ease-out var(--d2) backwards; }
}

/* ── FoXpert for iPad (.sc-hero--ipad) ───────────────────────
   The study comes up, a touch selects the ROI tool, the ROI is drawn
   and its readout fills, then the Pencil rings the indication in six
   steps while its ink follows. */
.sc-hero--ipad {
  --t-img: 0.55s;     /* the study on the screen */
  --t-reg: 1.35s;     /* the ROI */
  --t-sweep: 2.0s;    /* the Pencil starts the loop */
  --fd: 0.15s;        /* one step of the Pencil */
  --d0: 0.45s;        /* Files */
  --d1: 0.95s;        /* Touch, as the target is touched */
  --d2: 1.6s;         /* Measure, as the readout fills */
  --d3: 2.95s;        /* Pencil, as the loop closes */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--ipad .sc-pic { animation: sc-pop 0.45s var(--sc-ease) var(--t-img) backwards; }
  .is-visible .sc-hero--ipad .sc-touch { animation: sc-ring 0.7s ease-out var(--d1); transform-box: fill-box; transform-origin: center; }
  .is-visible .sc-hero--ipad .sc-target--on { animation: sc-key 0.15s ease-out var(--d1) backwards; }
  .is-visible .sc-hero--ipad .sc-region { animation: sc-draw 0.4s var(--sc-ease) var(--t-reg) backwards; }
  .is-visible .sc-hero--ipad .sc-stats { animation: sc-pop 0.3s ease-out var(--d2) backwards; }
  .is-visible .sc-hero--ipad .sc-ink-live { animation: sc-draw calc(var(--fd) * 5) linear var(--t-sweep) backwards; }
}

/* ── Fox UT (.sc-hero--ut) ───────────────────────────────────
   The probe fires its focal laws across the weld one angle at a
   time, the flaw on the fusion face is marked as a beam crosses it,
   the sector settles, the TOFD pair's lateral wave is traced and the
   newest .nde file lands on the stack. */
.sc-hero--ut {
  --t-sweep: 1.0s;    /* the first focal law */
  --fd: 0.15s;        /* one focal law */
  --t-ind: 1.6s;      /* the flaw, as the 58-degree law crosses it */
  --t-lat: 2.3s;      /* the lateral wave */
  --d0: 0.45s;        /* Open */
  --d1: 2.05s;        /* PAUT, as the sector settles */
  --d2: 2.45s;        /* TOFD */
  --d3: 2.95s;        /* .nde, as the file lands */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--ut .sc-ind { animation: sc-pop 0.3s ease-out var(--t-ind) backwards; }
  .is-visible .sc-hero--ut .sc-lat { animation: sc-pop 0.3s ease-out var(--t-lat) backwards; }
}

/* ── Fox CT (.sc-hero--ct) ───────────────────────────────────
   The volume fills layer by layer, the casting rising through it
   with its top cut across, then the pore the analysis finds is
   marked and the slices lift off the volume. */
.sc-hero--ct {
  --t-sweep: 0.9s;    /* the first layer */
  --fd: 0.18s;        /* one layer */
  --t-ind: 2.3s;      /* the pore, marked */
  --d0: 0.45s;        /* FDK */
  --d1: 2.05s;        /* GPU, as the volume completes */
  --d2: 2.45s;        /* Porosity, as the pore is marked */
  --d3: 2.95s;        /* Export, as the slices lift off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--ct .sc-ind { animation: sc-pop 0.3s ease-out var(--t-ind) backwards; }
}

/* ── Fox Eddy (.sc-hero--eddy) ───────────────────────────────
   The scan is drawn along all three views at once (the figure of
   eight on the impedance plane, the I and Q strip charts), then the
   cursor settles on the third notch, the candidate is marked and the
   report lifts off. */
.sc-hero--eddy {
  --t-sweep: 0.8s;    /* the scan starts */
  --t-dur: 1.4s;      /* the scan, end to end */
  --t-cur: 2.2s;      /* the cursor settles */
  --t-ind: 2.4s;      /* the candidate, marked */
  --d0: 0.45s;        /* CSV */
  --d1: 2.25s;        /* Plane, as the scan completes */
  --d2: 2.55s;        /* Review, as the candidate is marked */
  --d3: 2.95s;        /* Reports, as the sheet lifts off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--eddy .sc-sig,
  .is-visible .sc-hero--eddy .sc-ink-live { animation: sc-draw var(--t-dur) linear var(--t-sweep) backwards; }
  .is-visible .sc-hero--eddy .sc-cur { animation: sc-pop 0.3s ease-out var(--t-cur) backwards; }
  .is-visible .sc-hero--eddy .sc-ind { animation: sc-pop 0.3s ease-out var(--t-ind) backwards; }
}

/* ── Fox Baggage Scanner (.sc-hero--bag) ─────────────────────
   One bag rides the belt through the fan beam in ten steps while its
   image builds on the monitor strip by strip, then F2 is chosen and
   the items' edges sharpen, and the item the scanner reports is boxed.
   Belt lands last, after the bag has stopped, so the drawing does not
   tie the belt's motion to the station. */
.sc-hero--bag {
  --t-sweep: 0.85s;   /* the first step of the bag */
  --fd: 0.13s;        /* one step */
  --t-key: 2.3s;      /* F2 */
  --t-reg: 2.65s;     /* the reported item, boxed */
  --d0: 1.45s;        /* Material, as the image completes */
  --d1: 2.35s;        /* Enhance, as F2 is chosen */
  --d2: 2.7s;         /* Overlay, as the box is drawn */
  --d3: 3.05s;        /* Belt, on the row of subsystems */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--bag .sc-key--live { animation: sc-key 0.15s ease-out var(--t-key) backwards; }
  .is-visible .sc-hero--bag .sc-edges { animation: sc-pop 0.3s ease-out var(--t-key) backwards; }
  .is-visible .sc-hero--bag .sc-region { animation: sc-draw 0.4s var(--sc-ease) var(--t-reg) backwards; }
}

/* ── Fox Medical Viewer (.sc-hero--med) ──────────────────────
   An order is picked from the worklist, the technique is set, the
   image comes up from the detector and its window and level settle in
   three steps, a length is measured across it, and the report lifts
   off. Nothing flashes at the detector: the scene shows no exposure
   being made. */
.sc-hero--med {
  --t-tech: 0.85s;    /* the technique sliders */
  --t-img: 1.55s;     /* the image on the console */
  --t-sweep: 1.75s;   /* window and level, first step */
  --fd: 0.2s;         /* one step */
  --t-meas: 2.45s;    /* the length, measured */
  --d0: 0.45s;        /* Worklist, as the order is picked */
  --d1: 0.95s;        /* Technique */
  --d2: 2.55s;        /* Review, as the length is measured */
  --d3: 3.0s;         /* Report, as the sheet lifts off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--med .sc-sel { animation: sc-pop 0.3s ease-out var(--d0) backwards; }
  .is-visible .sc-hero--med .sc-tech { animation: sc-draw 0.45s var(--sc-ease) var(--t-tech) backwards; }
  .is-visible .sc-hero--med .sc-pic { animation: sc-pop 0.45s var(--sc-ease) var(--t-img) backwards; }
  .is-visible .sc-hero--med .sc-meas { animation: sc-draw 0.4s var(--sc-ease) var(--t-meas) backwards; }
  .is-visible .sc-hero--med .sc-meas-end { animation: sc-pop 0.2s ease-out var(--t-meas) backwards; }
}

/* ── Fox Arc (.sc-hero--arc) ─────────────────────────────────
   A protocol is chosen, the beam pulses six times through the C while
   the guidewire advances on the live screen and the fluoroscopy timer
   runs, then the subtraction is drawn on the reference screen and the
   run lifts off for the PACS. */
.sc-hero--arc {
  --t-sweep: 0.85s;   /* the first pulse */
  --fd: 0.22s;        /* one pulse period: the beam is on for half of it */
  --t-dsa: 2.25s;     /* the subtraction */
  --d0: 1.6s;         /* Fluoro, as the last pulse lands */
  --d1: 2.45s;        /* DSA */
  --d2: 0.45s;        /* Protocols, as the key is chosen */
  --d3: 3.0s;         /* PACS, as the run lifts off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--arc .sc-beam { animation-duration: calc(var(--fd) / 2); }
  .is-visible .sc-hero--arc .sc-key--live { animation: sc-key 0.15s ease-out calc(var(--d2) + 0.12s) backwards; }
  .is-visible .sc-hero--arc .sc-timer { animation: sc-draw calc(var(--fd) * 6) linear var(--t-sweep) backwards; }
  .is-visible .sc-hero--arc .sc-dsa { animation: sc-draw 0.6s var(--sc-ease) var(--t-dsa) backwards; }
}

/* ── Fox RT Guide (.sc-hero--rtg) ────────────────────────────
   The IQI is laid on the film, the safety-zone boundaries are drawn
   out on the ground one after another, the source steps down its
   guide tube to the centre of the weld and exposes the film, then an
   entry is chosen in the reference on the phone. The phone moves
   last and is joined to nothing, so nothing reads as the app driving
   the source. */
.sc-hero--rtg {
  --t-iqi: 0.4s;      /* the IQI, laid on the film */
  --t-zone: 0.9s;     /* the first boundary */
  --t-sweep: 1.75s;   /* the source's first step */
  --fd: 0.12s;        /* one step */
  --t-ray: 2.5s;      /* the exposure, as the source arrives */
  --d0: 2.6s;         /* Exposure */
  --d1: 0.5s;         /* IQI */
  --d2: 1.5s;         /* Zones, as the outer boundary is drawn */
  --d3: 3.1s;         /* Standards, as the entry is chosen */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--rtg .sc-iqi-set { animation: sc-pop 0.3s ease-out var(--t-iqi) backwards; }
  .is-visible .sc-hero--rtg .sc-ring { animation: sc-pop 0.3s ease-out calc(var(--t-zone) + var(--k) * 0.2s) backwards; }
  .is-visible .sc-hero--rtg .sc-zdim { animation: sc-pop 0.3s ease-out calc(var(--t-zone) + 0.5s) backwards; }
  .is-visible .sc-hero--rtg .sc-exp { animation: sc-pop 0.3s ease-out var(--t-ray) backwards; }
  .is-visible .sc-hero--rtg .sc-pick { animation: sc-pop 0.3s ease-out calc(var(--d3) - 0.1s) backwards; }
}

/* ── Fox Radiation Safety (.sc-hero--rad) ────────────────────
   The shield's thickness is dimensioned, the three zones come up
   one after another on the ground and, through the camera, on the
   phone, the survey points are logged along the outer boundary, and
   the report lifts off. Nothing moves at the source. */
.sc-hero--rad {
  --t-thk: 0.4s;      /* the shield, dimensioned */
  --t-zone: 0.8s;     /* the first zone, on the ground and on the phone */
  --t-pt: 1.85s;      /* the first survey point */
  --d0: 0.5s;         /* Dose */
  --d1: 2.35s;        /* Survey, as the last point is logged */
  --d2: 1.45s;        /* AR, as the outer zone shows on the phone */
  --d3: 2.95s;        /* Records, as the report lifts off */
}
@media (prefers-reduced-motion: no-preference) {
  .is-visible .sc-hero--rad .sc-thk { animation: sc-pop 0.3s ease-out var(--t-thk) backwards; }
  .is-visible .sc-hero--rad .sc-zring { animation: sc-pop 0.3s ease-out calc(var(--t-zone) + var(--k) * 0.2s) backwards; }
  .is-visible .sc-hero--rad .sc-ar { animation: sc-pop 0.3s ease-out calc(var(--t-zone) + 0.1s + var(--k) * 0.2s) backwards; }
  .is-visible .sc-hero--rad .sc-pt { animation: sc-pop 0.3s ease-out calc(var(--t-pt) + var(--k) * 0.18s) backwards; }
}

/* Pointing at a callout lights its leader and dot. */
.sc-hero__stage:has(.sc-callout:nth-child(1):hover) .sc-lead:nth-child(1),
.sc-hero__stage:has(.sc-callout:nth-child(2):hover) .sc-lead:nth-child(2),
.sc-hero__stage:has(.sc-callout:nth-child(3):hover) .sc-lead:nth-child(3),
.sc-hero__stage:has(.sc-callout:nth-child(4):hover) .sc-lead:nth-child(4) { --sc-hot: var(--orange); }

@keyframes sc-on { 0%, 100% { visibility: visible; } }
@keyframes sc-off { 0%, 100% { visibility: hidden; } }
@keyframes sc-key { from { fill: #2A2D33; } }
/* Drawn with the path's own length (--len, user units, written by the scene kit). */
@keyframes sc-draw {
  from { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
  to   { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; }
}
@keyframes sc-pop { from { opacity: 0; } }
@keyframes sc-ring {
  from { opacity: 1; transform: scale(0.4); }
  to   { opacity: 0; transform: scale(1.6); }
}
@keyframes sc-settle { from { opacity: 0; translate: 0 6px; } }
@keyframes sc-lift { from { opacity: 0; transform: translate(0, 16px); } }
@keyframes sc-rise { from { opacity: 0; transform: scaleY(0.05); } }