/**
 * ERF Suite — grading-suite hero + EK scope panel.
 * Scoped entirely to .erf-suite-ctrl / .erf-suite-* classes added at
 * runtime by erf-suite.js, so nothing here reaches any other instrument
 * cluster, hero, or panel elsewhere on the site.
 */

/* ── Hero: GL canvas + PUNCH zoom ─────────────────────────────────────
   Video and canvas are plain siblings (the video is never reparented —
   moving a live <video> to a new parent interrupts/reloads playback in
   some browsers), so PUNCH's zoom is the same scale transform applied to
   both independently; scoped to .erf-suite-active so it never reaches
   the video on any other page/template. */
.erf-suite-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease, transform 1.6s cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
.erf-hero-wrap.erf-suite-active .erf-hero-video {
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
.erf-hero-wrap.erf-suite-live .erf-suite-gl { opacity: 1; }
.erf-hero-wrap.erf-suite-live .erf-hero-video { opacity: 0; }

/* THE dial-is-dead bug: on the homepage hero, .erf-hero-content sits at
   z-index:10 while the instrument overlay (.erf-inst) is z-index:9 — so
   the text block paints ON TOP of the dial/toggle/plus cluster and eats
   every real pointer click before it reaches them (elementFromPoint at
   the dial center returned .erf-hero-content, not the dial). Case-study
   pages worked only because THEIR content is z-index:8, below the overlay.
   Raising the overlay above the content fixes hit-testing; it's
   pointer-events:none so only .erf-inst-cluster (pointer-events:auto)
   actually intercepts — the hero copy stays fully interactive. Not gated
   on .erf-suite-active: the cluster should be clickable whether or not GL
   initialised (and if the suite falls back, that class is removed, which
   would otherwise re-break the dial). .erf-hero-wrap only exists on the
   homepage hero, so this touches no other instrument chrome. */
.erf-hero-wrap .erf-inst { z-index: 11; }

/* ── Hero controls: readouts + active/press states ───────────────────
   transform:scale(1.08) is the one visual change the spec allows on the
   icons themselves — a transform never reflows, so nothing else in the
   hero moves. */
.erf-suite-ctrl { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* Legibility: the dial/toggle/plus are thin 1.4px strokes at ~78% opacity,
   which vanish against a busy or bright graded frame ("the dial works but
   doesn't show itself"). A soft dark drop-shadow lifts them off ANY
   background — same trick the instrument rail text already uses. Scoped to
   the grading-suite controls only, so no other instrument cluster changes. */
.erf-suite-ctrl .erf-inst-btn svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(0,0,0,0.5));
}
.erf-suite-ctrl .erf-inst-knob,
.erf-suite-ctrl .erf-inst-toggle,
.erf-suite-ctrl .erf-inst-plus { color: rgba(255,255,255,0.92); }

/* Measured live: the rail's left/right text sits at the row's exact
   centerline, but stacking a readout below the icon pushed the readout
   ~13px under that line (and left the icon ~10px above it). A plain
   transform (never reflows, so bottom_left/bottom_right/scroll text on
   either side genuinely never move) shifts the whole icon+readout unit
   up so the readout lands on the same line as that flanking text — the
   icon consequently sits higher too. Homepage hero only. */
.erf-hero-wrap .erf-suite-ctrl { transform: translateY(-13px); }

.erf-suite-ctrl .erf-inst-knob,
.erf-suite-ctrl .erf-inst-toggle,
.erf-suite-ctrl .erf-inst-plus {
  transform: scale(1.08);
  transform-origin: center;
}
.erf-suite-ctrl .erf-inst-knob:active,
.erf-suite-ctrl .erf-inst-toggle:active,
.erf-suite-ctrl .erf-inst-plus:active {
  transform: scale(1.08) translateY(2px);
}
.erf-suite-ctrl .erf-inst-knob:focus-visible,
.erf-suite-ctrl .erf-inst-toggle:focus-visible,
.erf-suite-ctrl .erf-inst-plus:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.erf-inst-knob-needle { transition: transform .36s cubic-bezier(.32,1.25,.5,1); }

/* Active state: border/needle/dot go #fff + glow. SVG strokes use
   currentColor, so setting color on the button reaches them directly.
   Glow halved from the original 2px/8px spread — at this icon's small
   size (~22px) that soft blur was washing out the thin needle line
   against the ring, reading as "the dial goes invisible when clicked". */
.erf-suite-ctrl .erf-inst-knob.is-active-suite,
.erf-suite-ctrl .erf-inst-toggle.is-active-suite,
.erf-suite-ctrl .erf-inst-plus.is-active-suite {
  color: #fff;
  box-shadow: 0 0 1px rgba(255,255,255,.20), 0 0 4px rgba(255,255,255,.08);
  border-radius: 50%;
}

.erf-suite-readout {
  font-family: var(--erf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-width: 88px;
  text-align: center;
  color: rgba(255,255,255,0.45);
}
.erf-suite-ctrl:has(.is-active-suite) .erf-suite-readout {
  color: #fff;
  text-shadow: 0 0 2px rgba(255,255,255,.24), 0 0 8px rgba(255,255,255,.10);
}

/* PUNCH glyph: hide the "+" icon's vertical stroke at max scale so the
   existing SVG reads as "-" without a second icon asset. */
.erf-suite-plus-v { transition: opacity .2s; }
.erf-inst-plus.erf-suite-plus-max .erf-suite-plus-v { opacity: 0; }

/* ── EK scope panel ──────────────────────────────────────────────────── */
/* No SIGNAL readout, per direct instruction — same specificity problem
   as the footer below, so !important is required here too. */
.erf-field.erf-suite-active .erf-field-live { display: none !important; }

.erf-suite-scope {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5;
  background: #000;
}

/* !important: split-section.php scopes its base .erf-field-foot rule with
   a per-instance #uid ID selector (specificity 1,1,0), which otherwise
   always beats this class-only override (0,3,0) regardless of source
   order — silently leaving the footer on its original justify-content:
   flex-end and defeating this rule entirely. gap guarantees a minimum
   separation between the frame counter and LIVE even when space-between
   would otherwise compress them in this narrow panel. */
.erf-field.erf-suite-active .erf-field-foot {
  justify-content: space-between !important;
  align-items: center;
  gap: 10px;
}

/* WFM's own text sits 8px inside its button (padding below); EK-01's
   text sits 1px inside its row (split-section.php's own header padding)
   — this closes that 7px gap so the two lines of text start flush. */
.erf-suite-tabs { display: flex; gap: 6px; margin-left: -7px; }
.erf-suite-tab {
  font-family: var(--erf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8a84;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  line-height: 1.6;
  cursor: pointer;
}
.erf-suite-tab.is-active { color: #f2f2f0; border-color: rgba(255,255,255,0.14); }
.erf-suite-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.erf-suite-live-ind {
  font-family: var(--erf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .1em;
  color: #666;
}
.erf-suite-live-ind.is-live { color: #38ff70; }

/* ── Mobile / reduced-motion fallback: static poster frame ────────────── */
.erf-suite-scope-still {
  width: 100%;
  aspect-ratio: 1.5;
  background-size: cover;
  background-position: center;
}