/* FyreFly Systems: Alef 3D wireframe scenes (landing flange, "From plate to pipeline", topic
   carousel, four-lever tabs). Pairs with scenes-core.js, line-scenes.js and gasket-journey.js;
   the markup is in scripts/scientific-figures/scene-*.html.

   The drawings take their colours from the --fi-scene-* custom properties below. Override them on
   any ancestor (a section, the whole page) to restyle every scene inside it; scripts re-read them
   when the theme changes. Page chrome (text, hairlines, focus) uses the site tokens from
   /shared/ff/tokens.css, with fallbacks so the scenes also work on a bare page.

     --fi-scene-bg          ground of a drawing
     --fi-scene-line        wireframe lines
     --fi-scene-muted       labels
     --fi-scene-accent      highlighted lines (the purple of Alef)
     --fi-scene-accent-ink  highlighted labels and accent text, a step stronger than the accent
     --fi-scene-rule        hairlines around the controls
     --scn-font             mono face of the labels (--ff-mono when the page defines it)
     --scn-ratio            aspect ratio of a free-standing drawing (default 16 / 10) */

:root {
  --fi-scene-bg: #f4f4f2;
  --fi-scene-line: #0b0b0b;
  --fi-scene-muted: #595959;
  --fi-scene-accent: #7646d7;
  --fi-scene-accent-ink: #6035b4;
  --fi-scene-rule: #c0c0c0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fi-scene-bg: #111111;
    --fi-scene-line: #ededeb;
    --fi-scene-muted: #9d9d9d;
    --fi-scene-accent: #9a74ee;
    --fi-scene-accent-ink: #b597ff;
    --fi-scene-rule: #3a3a37;
  }
}
:root[data-theme="dark"] {
  --fi-scene-bg: #111111;
  --fi-scene-line: #ededeb;
  --fi-scene-muted: #9d9d9d;
  --fi-scene-accent: #9a74ee;
  --fi-scene-accent-ink: #b597ff;
  --fi-scene-rule: #3a3a37;
}

/* Hover and state changes of the scene controls use the site's interaction timing (tokens.css). */
[data-scn-root] { --scn-dur: var(--dur-hover, 0.3s); --scn-ease: var(--ease-plain, ease); }

/* ===== A drawing (canvas) ===== */
.scn-scene {
  --scn-font: var(--ff-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--scn-ratio, 16 / 10);
  overflow: hidden;
  background: var(--fi-scene-bg);
  color: var(--fi-scene-line);
}
.scn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
/* A drawing that cannot be dragged (the landing flange) is a backdrop: clicks and text selection pass through it. */
.scn-canvas:not(.is-interactive) { pointer-events: none; }
.scn-canvas.is-interactive { cursor: grab; }
.scn-canvas.is-dragging { cursor: grabbing; }
.scn-canvas:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: -4px; }

.scn-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.scn-caption { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--ink-muted, #4d4d47); }
.scn-hint { display: block; margin-top: var(--space-2, 8px); font-size: 13px; color: var(--ink-muted, #4d4d47); }
.scn-flange { margin: 0; }
.scn-flange .scn-caption { margin-top: var(--space-3, 12px); }

/* ===== Buttons shared by the gasket controls ===== */
.scn-btn {
  height: 40px; min-width: 40px; padding: 0 14px;
  border: 1px solid var(--fi-scene-line); border-radius: 0;
  background: transparent; color: var(--fi-scene-line);
  font: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--scn-dur) var(--scn-ease), color var(--scn-dur) var(--scn-ease), border-color var(--scn-dur) var(--scn-ease);
}
.scn-btn:hover { background: color-mix(in srgb, var(--fi-scene-accent) 14%, transparent); }
.scn-btn--solid { background: var(--fi-scene-line); color: var(--fi-scene-bg); min-width: 104px; }
.scn-btn--solid:hover { background: var(--fi-scene-accent-ink); border-color: var(--fi-scene-accent-ink); color: var(--fi-scene-bg); }
.scn-btn--icon { width: 40px; padding: 0; font-size: 18px; letter-spacing: 0; line-height: 1; }
.scn-btn:focus-visible, .scn-scrub:focus-visible, .scn-chapter:focus-visible, .scn-tab:focus-visible,
.scn-dot:focus-visible, .scn-arrow:focus-visible, .scn-carousel__pause:focus-visible, .scn-slide__proof:focus-visible,
.scn-gasket__svg:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }

/* ===== From plate to pipeline ===== */
.scn-gasket { container: scn-gasket / inline-size; }
.scn-gasket__fig { margin: 0; display: grid; gap: var(--space-4, 16px); grid-template-columns: minmax(0, 1fr); }
.scn-gasket__fig > figcaption { max-width: 56ch; }
.scn-gasket__main { min-width: 0; }
.scn-gasket__stage { position: relative; aspect-ratio: 16 / 10; background: var(--fi-scene-bg); color: var(--fi-scene-line); overflow: hidden; }
.scn-gasket__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.scn-gasket__stage.is-dragging .scn-gasket__svg { cursor: grabbing; }
.scn-gasket__stage.is-panning .scn-gasket__svg { cursor: move; }
.scn-gasket__svg:focus-visible { outline-offset: -4px; }
.scn-gasket__axis { stroke: var(--fi-scene-accent); animation: scn-axis-flow 1.6s linear infinite; }   /* gasket-journey.js pauses it while it is hidden */
@keyframes scn-axis-flow { to { stroke-dashoffset: -58; } }
.scn-noscript { padding: var(--space-6, 32px); margin: 0; color: var(--fi-scene-muted); }

.scn-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.scn-chapter {
  position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: baseline;
  padding: 8px 6px; text-align: center;
  border: 1px solid var(--fi-scene-rule); background: transparent; color: var(--ink, #1a1a1a);
  font: inherit; cursor: pointer; transition: background var(--scn-dur) var(--scn-ease);
}
.scn-chapter::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--fi-scene-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-cta, 0.35s) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.scn-chapter:hover { background: color-mix(in srgb, var(--fi-scene-accent) 8%, transparent); }
.scn-chapter.is-active::before { transform: scaleX(1); }
.scn-chapter__no { font-family: var(--scn-font, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-muted, #4d4d47); }
.scn-chapter__title { display: block; font-size: 14px; }
.scn-chapter__text { display: none; font-size: 14px; line-height: 1.5; color: var(--ink-muted, #4d4d47); margin-top: 2px; }
.scn-chapter.is-active .scn-chapter__no, .scn-chapter.is-active .scn-chapter__title { color: var(--fi-scene-accent-ink); }

.scn-controls { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--fi-scene-rule); }
/* Until the script has mounted, the controls keep their room (no layout shift) but cannot be used; without scripting they go. */
.scn-gasket:not([data-scn-ready]) .scn-controls { visibility: hidden; }
@media (scripting: none) { .scn-gasket .scn-controls { display: none; } }
.scn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scn-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted, #4d4d47); width: 88px; }
.scn-scrub { flex: 1 1 200px; min-width: 120px; height: 24px; accent-color: var(--fi-scene-accent); cursor: pointer; }
.scn-readout { display: flex; flex-direction: column; align-items: flex-end; min-width: 220px; font-family: var(--scn-font, ui-monospace, monospace); text-transform: uppercase; }
.scn-readout__stage { font-size: 12px; letter-spacing: 0.14em; color: var(--ink, #1a1a1a); }
.scn-readout__sub { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-muted, #4d4d47); }
.scn-spacer { flex: 1 1 auto; }

@container scn-gasket (max-width: 600px) {
  .scn-gasket__stage { aspect-ratio: 4 / 3; }
  .scn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scn-readout { min-width: 0; width: 100%; align-items: flex-start; }
  .scn-btn { height: 44px; }
  .scn-btn--icon { width: 44px; }
}
@container scn-gasket (min-width: 860px) {
  .scn-gasket__fig { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.7fr); column-gap: var(--space-7, 48px); align-content: start; }
  .scn-gasket__fig > figcaption { grid-column: 1; grid-row: 1; }
  .scn-gasket__fig > .scn-chapters { grid-column: 1; grid-row: 2; display: block; border-top: 1px solid var(--fi-scene-rule); }
  .scn-gasket__fig > .scn-gasket__main { grid-column: 2; grid-row: 1 / span 2; }
  .scn-chapter {
    grid-template-columns: 44px minmax(0, 1fr); gap: 10px; text-align: left; padding: 12px 10px 12px 0;
    border: 0; border-bottom: 1px solid var(--fi-scene-rule);
  }
  .scn-chapter::before { left: 0; right: auto; top: -1px; bottom: -1px; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .scn-chapter.is-active::before { transform: scaleY(1); }
  .scn-chapter__no { padding-left: 14px; font-size: 12px; }
  .scn-chapter__title { font-size: 16px; }
  .scn-chapter__text { display: block; }
}

/* ===== Topic carousel ===== */
.scn-carousel { container: scn-carousel / inline-size; position: relative; color: var(--ink, #1a1a1a); }
/* The leaving and arriving slides slide sideways by 24px: clip that, or a carousel flush with a narrow screen scrolls sideways. */
.scn-carousel__slides { display: grid; overflow-x: clip; }
.scn-slide {
  grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--scn-dir, 1) * 24px));
  transition: opacity 0.6s var(--scn-ease), transform 0.6s var(--ease-reveal, cubic-bezier(0.25, 1, 0.3, 1)), visibility 0s linear 0.6s;
}
.scn-slide.is-leaving { transform: translateX(calc(var(--scn-dir, 1) * -24px)); }
.scn-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scn-slide__art { position: relative; min-width: 0; aspect-ratio: 4 / 3; align-self: stretch; background: var(--fi-scene-bg); overflow: hidden; }
.scn-slide__art .scn-scene { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.scn-slide__index {
  position: absolute; top: var(--space-4, 16px); right: var(--space-4, 16px); z-index: 1; padding: 5px 10px;
  font-family: var(--scn-font, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.18em;
  background: var(--fi-scene-line); color: var(--fi-scene-bg);
}
.scn-slide__name {
  position: absolute; left: 0; bottom: var(--space-5, 24px); z-index: 1; padding: 8px 16px 8px var(--space-4, 16px);
  font-size: clamp(18px, 2.4vw, 26px); line-height: 1.2; background: var(--fi-scene-line); color: var(--fi-scene-bg);
}
.scn-slide__info { display: flex; flex-direction: column; justify-content: center; padding: var(--space-5, 24px) 0 var(--space-3, 12px); min-width: 0; }
.scn-slide__title { margin: 0 0 var(--space-2, 8px); font-size: clamp(28px, 4.4cqw, 44px); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.scn-slide__tagline { margin: 0 0 var(--space-4, 16px); font-size: 18px; line-height: 1.4; color: var(--fi-scene-accent-ink); }
.scn-slide__desc { margin: 0 0 var(--space-5, 24px); max-width: 48ch; font-size: 16px; line-height: 1.7; color: var(--ink-muted, #4d4d47); }
.scn-slide__proof {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0;
  padding: 8px 18px; border: 1px solid var(--fi-scene-rule); border-radius: 999px;
  font-size: 14px; line-height: 1.4; color: var(--ink, #1a1a1a); text-decoration: none;
  transition: border-color var(--scn-dur) var(--scn-ease), color var(--scn-dur) var(--scn-ease), background var(--scn-dur) var(--scn-ease);
}
a.scn-slide__proof:hover { border-color: var(--fi-scene-accent); color: var(--fi-scene-accent-ink); background: color-mix(in srgb, var(--fi-scene-accent) 10%, transparent); }
.scn-slide__proof-label { color: var(--ink-muted, #4d4d47); }
.scn-slide__proof:focus-visible { outline-offset: -3px; }

.scn-carousel__bar {
  position: relative; display: flex; align-items: center; gap: var(--space-4, 16px);
  margin-top: var(--space-4, 16px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--fi-scene-rule);
}
.scn-carousel__progress { position: absolute; left: 0; right: 0; top: -1px; height: 3px; overflow: hidden; pointer-events: none; }
.scn-carousel__progress > i { display: block; width: 100%; height: 100%; background: var(--fi-scene-accent); transform: scaleX(0); transform-origin: left center; }
.scn-carousel__dots { display: flex; align-items: center; flex: 1 1 auto; justify-content: center; }
/* 24px hit area (WCAG 2.5.8), 10px visible square */
.scn-dot { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.scn-dot::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--fi-scene-rule); transition: background var(--scn-dur) var(--scn-ease); }
.scn-dot:hover::before { background: var(--fi-scene-muted); }
.scn-dot.is-active::before { background: var(--fi-scene-accent); }
.scn-carousel__arrows { display: flex; gap: var(--space-2, 8px); }
.scn-arrow, .scn-carousel__pause {
  width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fi-scene-rule); border-radius: 50%; background: transparent; color: var(--ink, #1a1a1a);
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color var(--scn-dur) var(--scn-ease), color var(--scn-dur) var(--scn-ease), background var(--scn-dur) var(--scn-ease);
}
.scn-arrow:hover, .scn-carousel__pause:hover { border-color: var(--fi-scene-accent); color: var(--fi-scene-accent-ink); background: color-mix(in srgb, var(--fi-scene-accent) 10%, transparent); }
/* Two bars while running, one triangle while paused. */
.scn-carousel__glyph { position: relative; display: block; width: 12px; height: 12px; }
.scn-carousel__glyph::before, .scn-carousel__glyph::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; background: currentColor; transition: opacity 0.15s ease; }
.scn-carousel__glyph::before { left: 1px; }
.scn-carousel__glyph::after { right: 1px; }
.scn-carousel.is-paused .scn-carousel__glyph { width: 0; height: 0; margin-left: 3px; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.scn-carousel.is-paused .scn-carousel__glyph::before, .scn-carousel.is-paused .scn-carousel__glyph::after { opacity: 0; }

@container scn-carousel (min-width: 760px) {
  .scn-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scn-slide__art { aspect-ratio: auto; min-height: 420px; }
  .scn-slide__info { padding: var(--space-6, 32px) 0 var(--space-6, 32px) var(--space-7, 48px); }
  .scn-slide--flip .scn-slide__art { order: 2; }
  .scn-slide--flip .scn-slide__info { order: 1; padding: var(--space-6, 32px) var(--space-7, 48px) var(--space-6, 32px) 0; }
}

/* Without scripting every topic is simply listed. */
@media (scripting: none) {
  .scn-carousel__slides { display: block; }
  .scn-slide, .scn-slide.is-leaving { opacity: 1; visibility: visible; transform: none; margin-bottom: var(--space-7, 48px); }
  .scn-carousel__bar { display: none; }
}

/* ===== Four levers ===== */
.scn-levers { container: scn-levers / inline-size; }
.scn-levers__layout { display: grid; gap: var(--space-5, 24px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.scn-levers__art { margin: 0; min-width: 0; }
.scn-levers__art .scn-scene { aspect-ratio: 4 / 3; }
.scn-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fi-scene-rule); border-left: 1px solid var(--fi-scene-rule); }
.scn-tab {
  position: relative; margin: 0; padding: 14px 10px; border: 0; border-right: 1px solid var(--fi-scene-rule); border-bottom: 1px solid var(--fi-scene-rule);
  background: transparent; color: var(--ink-muted, #4d4d47); font: inherit; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; cursor: pointer;
  transition: background var(--scn-dur) var(--scn-ease), color var(--scn-dur) var(--scn-ease);
}
.scn-tab:hover { background: color-mix(in srgb, var(--fi-scene-accent) 8%, transparent); color: var(--ink, #1a1a1a); }
.scn-tab[aria-selected="true"] { color: var(--fi-scene-accent-ink); box-shadow: inset 0 3px 0 var(--fi-scene-accent); }
.scn-tab:focus-visible { outline-offset: -4px; }
.scn-panel { margin: 0; padding: var(--space-5, 24px) 2px 0; font-size: 17px; line-height: 1.7; color: var(--ink-muted, #4d4d47); max-width: 52ch; min-height: 10.2em; }
.scn-panel:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 4px; }
.scn-panel p { margin: 0; }
@container scn-levers (min-width: 560px) {
  .scn-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container scn-levers (min-width: 820px) {
  .scn-levers__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7, 48px); }
  .scn-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scn-levers__art .scn-scene { aspect-ratio: 1 / 1; }
}

/* ===== Reduced motion: still drawings, no slide movement, no auto-advance ===== */
@media (prefers-reduced-motion: reduce) {
  .scn-gasket__axis { animation: none; }
  .scn-slide, .scn-chapter, .scn-chapter::before { transition: none; }
  .scn-slide, .scn-slide.is-leaving { transform: none; }
  .scn-carousel__progress, .scn-carousel__pause { display: none; }
}

/* Engaged: every drawing you can drag answers the pointer and the keyboard the same way — an accent
   frame and a faint tint while it is hovered, dragged or focused. Backdrops that cannot be dragged
   (the Gimel hero, the Gimel area map, the landing flange) stay plain. Drawn on ::after so it sits
   over the canvas without catching the pointer. */
.scn-scene::after, .scn-gasket__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.scn-scene:has(> .scn-canvas.is-interactive:hover)::after,
.scn-scene:has(> .scn-canvas.is-interactive:focus-visible)::after,
.scn-scene:has(> .scn-canvas.is-dragging)::after,
.scn-gasket__stage:hover::after,
.scn-gasket__stage:has(.scn-gasket__svg:focus-visible)::after,
.scn-gasket__stage.is-dragging::after {
  box-shadow: inset 0 0 0 2px var(--fi-scene-accent);
  background-color: color-mix(in srgb, var(--fi-scene-accent) 5%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .scn-scene::after, .scn-gasket__stage::after { transition: none; }
}
:root.ff-paused .scn-scene::after, :root.ff-paused .scn-gasket__stage::after { transition: none; }