/* ═════════════════════════════════════════════════════════════════════════════
   first-10.css — "your first 10 minutes with tangle" (first-10-minutes.html).
   Tokens and nav come from store.css. The tour itself (js/first-10.js) adds
   .f10-js, then .f10-wide (pinned stage that glides between scenes) or
   .f10-narrow (a still crop above each scene). Without JS the stage is just
   the whole screenshot, in flow, above the words.
   ═════════════════════════════════════════════════════════════════════════════ */

.f10-head { padding-bottom: 18px; }
.f10-head h1 { font-size: clamp(38px, 5.6vw, 68px); margin: 2px 0 16px; }
.f10-lede { max-width: 64ch; color: var(--inkMuted); font-size: 16px; }
.f10-lede a { color: var(--oxblood); }

.f10-cine { max-width: 1440px; margin: 0 auto; padding: 8px 28px 90px; }

/* The plugin window: its own dark ground, a hairline frame, a soft drop. */
.f10-stage {
  background: #141210;
  border: 1px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 24, 20, .28);
  margin-bottom: 28px;
}
.f10-frame { position: relative; }
.f10-shot { display: block; width: 100%; height: auto; }

.f10-scene { padding: 22px 0; }
.f10-scene-in { max-width: 58ch; }
.f10-time {
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 10px; letter-spacing: 2px; font-weight: 600; text-transform: lowercase;
  color: var(--oxblood); margin-bottom: 8px;
}
.f10-scene h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.f10-scene p, .f10-scene li { color: var(--inkMuted); }
.f10-scene p { margin: 0 0 11px; }
.f10-scene b { color: var(--ink); font-weight: 600; }
.f10-scene ul { margin: 0 0 12px 18px; }
.f10-scene li { margin: 4px 0; }
.f10-tip { font-size: 13px; color: var(--inkDim) !important; }
.f10-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }

/* ── the SVG view (both modes) ───────────────────────────────────────────── */
.f10-svg { display: block; width: 100%; height: 100%; }
.f10-dim { fill: rgba(8, 7, 6, .64); transition: opacity .25s ease; }
/* The plugin's own accent, not the site's oxblood: it has to read on the
   rack's near-black. */
.f10-ring { fill: none; stroke: #F0523D; transition: opacity .25s ease; }
.f10-svg.is-moving .f10-ring,
.f10-svg.is-moving .f10-dim { opacity: 0; }

/* ── wide: pinned stage beside the words ─────────────────────────────────── */
.f10-cine.f10-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
  gap: 48px;
  align-items: start;
}
/* 16:10, not the full viewport height: the screenshot is wide (about 2:1), so
   a tall stage spent most of itself on letterbox at the whole-rack scenes. The
   zoomed scenes fill whatever shape this is (js/first-10.js fit). */
.f10-wide .f10-stage {
  position: sticky;
  top: max(74px, calc(50vh - 30vw * 10 / 16 + 29px));   /* centred under the 58px nav */
  aspect-ratio: 16 / 10;
  max-height: calc(100vh - 100px);
  margin-bottom: 0;
}
.f10-wide .f10-frame { height: 100%; }
.f10-wide .f10-shot { display: none; }
.f10-wide .f10-scenes { padding: 12vh 0 30vh; }
.f10-wide .f10-scene {
  min-height: 78vh;
  display: flex; align-items: center;
  opacity: .32; transition: opacity .3s ease;
}
.f10-wide .f10-scene.is-on { opacity: 1; }

/* ── narrow / reduced motion: a still crop above each scene ──────────────── */
.f10-narrow .f10-stage { display: none; }
.f10-crop {
  margin: 0 0 16px;
  background: #141210;
  border: 1px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.f10-narrow .f10-scene { padding: 30px 0 18px; border-top: 1px solid var(--hairline); }
.f10-narrow .f10-scene:first-child { border-top: 0; }

@media (max-width: 600px) {
  .f10-cine { padding: 4px 16px 60px; }
  .f10-head.st-wrap { padding-left: 16px; padding-right: 16px; }
}