/* ============================================================================
   RIDGEHOLD - INSTRUMENTS (styles)
   Companion to instruments.js. Matches DESIGN-SYSTEM-V5.md tokens:
   porcelain #F6F4EF · ink #14161A · teal #0D5B5E · hairline #E2DED6
   ========================================================================== */

/* ---------------------------------------------------- instrument panel --- */
.hero-note {
  margin-top: 18px;
  font-size: .72rem;
  letter-spacing: .04em;
  color: #3E434A;
}
/* the sub carries the explanation; it must not read as a grey wall */
.hero-sub { color: #33383F; }

.hero-scope {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--hair, #E2DED6);
  font-size: .7rem;
  letter-spacing: .14em;
  /* small, letterspaced and uppercase: --muted is AA at body size but reads
     light here, so this one line gets the darker ink (~9:1) */
  color: #3E434A;
  text-transform: uppercase;
}

.instr-band {
  border-top: 1px solid var(--hair);
  padding-block: clamp(56px, 7vw, 92px);
}
.instr-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.instr-head .sec-title { margin: 0; }

.instr-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .instr-grid { grid-template-columns: 1.25fr 1fr; } }
@media (min-width: 1080px) { .instr-grid { grid-template-columns: 1.35fr 1fr .9fr; } }

/* an instrument card: plate-like, hairline framed, no shadow theatre */
.instr {
  border: 1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--paper);
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
  /* cursor tilt: perspective() is applied inline by JS, so this element never
     needs transform-style: preserve-3d (which breaks with backdrop-filter on
     iOS Safari). A plain transform + short transition is enough. */
  transition: transform .18s ease, border-color .2s ease;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) { .instr { transition: none; } }
.instr-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.instr-label {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.instr-figure {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .12em; color: var(--muted);
}
.instr-value {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
  color: var(--ink);
}
.instr-value small {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  color: var(--muted); font-weight: 500;
}
.instr canvas { width: 100%; display: block; }
.instr canvas[data-dither] { height: 132px; }
.instr canvas[data-mono] { height: 116px; }
.instr canvas[data-solid] { height: 208px; }
.instr-foot {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  color: var(--muted); border-top: 1px solid var(--hair); padding-top: 9px;
  display: flex; justify-content: space-between; gap: 10px;
}

/* --------------------------------------------------------- scan loader --- */
.scan {
  position: relative; height: 2px; background: var(--hair);
  overflow: hidden; margin: 0 0 2px;
}
.scan::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 34%; background: var(--accent);
  transform: translateX(-120%);
  opacity: 0;
}
.scan.is-running::after {
  opacity: 1;
  animation: scanSweep 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes scanSweep {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(300%); }
  100% { transform: translateX(300%); }
}
.scan.is-static::after { opacity: 1; transform: translateX(0); width: 42%; }

/* ------------------------------------------------------ curved carousel --- */
.cc {
  position: relative;
  padding-block: 18px 6px;
  outline: none;
}
.cc-stage {
  position: relative;
  height: clamp(268px, 34vw, 348px);
  perspective: 1400px;
  perspective-origin: 50% 46%;
  /* Clip the receding cards at the stage edge. The clip MUST live here, on the
     parent, never on `.cc-track` - overflow on a preserve-3d element silently
     flattens its 3D context. Without this, the off-stage cards extend the page
     and create horizontal overflow on narrow screens. */
  overflow: hidden;
}
.cc-track {
  position: absolute; inset: 0;
  /* ⚠ KEEP THIS ELEMENT BARE. Per CSS Transforms L2, `transform-style:
     preserve-3d` is silently flattened to `flat` if this element gains any of:
     overflow other than visible · opacity < 1 · filter · clip-path · mask ·
     mix-blend-mode other than normal · will-change naming any of those.
     (backdrop-filter is NOT one of them - it's a backdrop-root property, a
     different mechanism.)
     If the carousel ever needs a rounded clip or a fade mask for polish, put it
     on `.cc-stage` or a wrapper - never here, or the 3D collapses without any
     visual error to warn you. Verified clean 2026-10-03. */
  transform-style: preserve-3d;
  touch-action: pan-y;
}
.cc-card {
  position: absolute; top: 0; left: 50%;
  width: min(400px, 74vw);
  margin-left: calc(min(400px, 74vw) / -2);
  height: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--paper);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  transform-origin: 50% 60%;
  /* No transform/opacity transition here. The carousel is spring-driven in
     JS so a gesture can be grabbed and reversed mid-flight; a CSS transition
     cannot be interrupted, and it fights the rAF loop. */
  transition: border-color .3s ease;
  /* will-change is applied per-card by JS only while a move is in flight:
     a standing hint on every card promotes each to its own layer. */
}
.cc-card.is-active { border-color: var(--ink); }
.cc-card .cc-idx {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em;
  color: var(--muted);
}
.cc-card h3 {
  font-size: clamp(19px, 1.9vw, 23px); font-weight: 600;
  letter-spacing: -.015em; margin: 2px 0 0;
}
.cc-card p { color: var(--ink-2); font-size: .93rem; line-height: 1.5; margin: 0; }
.cc-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cc-card li {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--muted); padding-left: 14px; position: relative;
}
.cc-card li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 1px; background: var(--accent);
}
.cc-controls {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
}
.cc-btn {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-1);
  background: transparent; padding: 9px 14px; cursor: pointer;
}
.cc-btn:hover { border-color: var(--ink); }
.cc-btn[disabled] { opacity: .35; cursor: default; }
.cc-dots { display: flex; gap: 7px; margin-left: auto; }
.cc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--hair); background: transparent; cursor: pointer; padding: 0;
}
.cc-dot.is-active { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------- sculpted wordmark --- */
.wordmark-sculpt {
  position: relative;
  display: block;
  width: 100%;
  line-height: .8;
  --sweep-x: 50%;
}
.wordmark-sculpt svg { width: 100%; height: auto; display: block; }
.wordmark-sculpt .wm-fill { fill: var(--ink); opacity: .07; }
.wordmark-sculpt .wm-edge { fill: none; stroke: var(--ink); stroke-opacity: .22; stroke-width: 1.1; }
.wordmark-sculpt .wm-inset { fill: none; stroke: var(--ink); stroke-opacity: .07; stroke-width: 1.1; }
.wordmark-sculpt .wm-sweep {
  fill: url(#wmSweepGrad);
  opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark-sculpt .wm-sweep {
    animation: wmSweep 7.5s cubic-bezier(.45, 0, .55, 1) infinite;
  }
}
@keyframes wmSweep {
  0%   { transform: translateX(-34%); }
  50%  { transform: translateX(34%); }
  100% { transform: translateX(-34%); }
}
.wordmark-sculpt .wm-sweep-wrap {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}

/* ---------------------------------------------------------- reduced ----- */
@media (prefers-reduced-motion: reduce) {
  .cc-card { transition: none; }
  .scan.is-running::after { animation: none; opacity: 1; transform: translateX(0); width: 42%; }
  .wordmark-sculpt .wm-sweep { animation: none; transform: none; opacity: .5; }
}

/* -------------------------------------------------------------- mobile --- */
@media (max-width: 640px) {
  .cc-stage { height: 300px; }
  .cc-card { width: 82vw; margin-left: -41vw; padding: 16px; }
  .cc-controls { flex-wrap: wrap; }
  .cc-dots { margin-left: 0; }
}