/* Blender 2D Animation: what this exploration adds on top of house-style.css (stage, depth slider, ingredients). */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(fonts/IBMPlexMono-normal-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(fonts/IBMPlexMono-normal-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* ---------- stage: two synced shots + the depth frames ---------- */
.stage { background: #000; }
.stage video,
.stage .depth {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.stage video { transition: opacity 0.25s; }
.stage video[data-hidden='true'] { opacity: 0; }
.stage .depth { opacity: 0; pointer-events: none; }
.stage[data-depth='true'] .depth { opacity: 1; }
.stage-play { z-index: 2; }
.stage-play[hidden] { display: none; }
.stage-top { z-index: 3; }

/* ---------- rail extras ---------- */
.rail-item { width: 100%; text-align: left; }
.rail-item .cu { margin-left: 10px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.depth-card h3 { font-size: 28px; }
.depth-card p { margin: 10px 0 16px; line-height: 1.6; }
.depth-range { display: grid; gap: 8px; }
.depth-range label { font-size: 10px; letter-spacing: 0.05em; color: var(--muted); display: flex; justify-content: space-between; }
.depth-range output { color: var(--accent); font-variant-numeric: tabular-nums; }
input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
input[type='range']::-moz-range-track { height: 2px; background: var(--rule); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
}
input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }

/* ---------- ingredients ---------- */
.section { margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { margin: 0; font: 400 clamp(34px, 3.4vw, 52px) / 1 'Instrument Serif', serif; letter-spacing: -0.02em; }
.section-head h2 em { font-style: normal; color: var(--accent); }
.section-head p { margin: 8px 0 0; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.section-head .totals { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.section-head .totals b { font-weight: 500; color: var(--ink); }
.ingredients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ingredient {
  display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left;
  border: 1px solid var(--rule); background: var(--panel);
}
.ingredient:hover { border-color: var(--accent); color: inherit; }
.ingredient .pic {
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 55%, #5d6480);
  border-bottom: 1px solid var(--rule);
}
.ingredient .pic img, .ingredient .pic video { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }
.ingredient .meta { display: grid; gap: 5px; padding: 12px 12px 14px; }
.ingredient .num { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ingredient strong { font-size: 13px; font-weight: 600; }
.ingredient small { font-size: 10px; line-height: 1.45; color: var(--muted); }
.ingredient .model { font-size: 10px; color: var(--accent); }
.ingredient .open { margin-top: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

.prompt-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 18px 0 0; font-size: 12px; }
.prompt-meta dt { color: var(--muted); }
.prompt-meta dd { margin: 0; }
.drawer-pic { margin: 20px 0 0; max-width: 520px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--panel) 55%, #5d6480); }
.drawer-pic img, .drawer-pic video { display: block; width: 100%; }
.drawer .prompt-excerpt { max-width: 80ch; }

/* ---------- two-column note under the stage ---------- */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.note { padding: 18px; border: 1px solid var(--rule); background: var(--panel); }
.note h3 { margin: 0 0 8px; font: 400 26px / 1.05 'Instrument Serif', serif; }
.note p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.note code { font: 11px var(--mono); color: var(--ink); }

footer.page-end { margin: 72px 0 40px; font-size: 11px; color: var(--muted); }

@media (max-width: 1100px) {
  .ingredients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns: 1fr; }
  .section { margin-top: 48px; }
}

/* glossary tips are positioned past the text; never let them widen the page on phones */
html, body { overflow-x: clip; }
.term-tip { max-width: min(260px, calc(100vw - 32px)); white-space: normal; }
@media (max-width: 800px) {
  /* both actions here are secondary: keep them side by side, equal width */
  .action-row > .action:last-child:nth-child(even) { grid-column: auto; }
}

/* ---------- layers in 3D: the real images as cards at their depths (CSS 3D, no library) ---------- */
.layers3d { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s;
  background: radial-gradient(120% 90% at 50% 40%, #222533, #101118); cursor: grab; touch-action: none; }
.stage[data-layers='true'] .layers3d { opacity: 1; pointer-events: auto; }
.layers3d:active { cursor: grabbing; }
.layers3d .vp { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0;
  perspective: 2000px; perspective-origin: 800px 450px; }
.layers3d .world, .layers3d .l3, .layers3d .camgrp { position: absolute; left: 0; top: 0; width: 1600px; height: 900px;
  transform-style: preserve-3d; transform-origin: 800px 450px; }

.layers3d .l3 > *, .layers3d .camgrp > * { position: absolute; display: block; }
.layers3d .l3 > div { background-repeat: repeat-x; }
.layers3d .frame { left: 0; top: 0; width: 1600px; height: 900px; box-sizing: border-box;
  border: 3px dashed var(--accent); opacity: 0; transition: opacity 0.3s; }
.layers3d .frame span { position: absolute; left: 12px; top: 10px; font: 500 22px var(--mono); letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.layers3d .tag3 { font: 500 30px var(--mono); color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line);
  padding: 6px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; }
.stage[data-layers='true'] video { opacity: 0; }
.layers-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--rule); background: transparent; font-size: 13px; font-weight: 600; }
.layers-toggle .icon { color: var(--accent); }
.layers-toggle:hover, .layers-toggle[aria-pressed='true'] { border-color: var(--accent); }
.depth-range { margin-top: 14px; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 10.5px; }
.legend dt { color: var(--ink); }
.legend dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.legend-note { margin: 10px 0 0 !important; font-size: 10px !important; line-height: 1.5; color: var(--muted); }

/* ---------- play the level (game.js): canvas, HUD, hint, on-screen pad, win card ---------- */
.stage:focus { outline: none; }
.stage .game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none;
  transition: opacity 0.3s; background: #0b0c12; touch-action: none; }
.stage[data-game='true'] .game { opacity: 1; pointer-events: auto; }
.stage[data-game='true'] video { opacity: 0; }

.game-hud { grid-area: badges; justify-self: start; display: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 8px;
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(10px);
  font: 500 13px / 1 var(--mono); font-variant-numeric: tabular-nums; }
.stage[data-game='true'] .game-hud { display: inline-flex; }
.game-hud img { width: 24px; height: 24px; object-fit: contain; }
.game-hud b { font-weight: 500; color: var(--accent); min-width: 6ch; }
.game-hud span { color: var(--muted); min-width: 6ch; text-align: right; }
.game-hud[data-bump='true'] img { animation: hud-bump 0.35s ease-out; }
@keyframes hud-bump { 40% { transform: scale(1.35) rotate(-8deg); } }

/* entry: a glass pill at the foot of the shot */
.game-cta { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px 8px 10px;
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(10px);
  text-align: left; white-space: nowrap; }
.game-cta svg { width: 34px; height: 34px; padding: 9px; border-radius: 3px; background: var(--accent); color: var(--bg); }
.game-cta strong { display: block; font-size: 13px; font-weight: 600; }
.game-cta small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.game-cta:hover { border-color: var(--accent); }
.game-cta[hidden] { display: none; }

.game-hint { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  display: flex; gap: 18px; padding: 12px 16px; border: 1px solid var(--glass-line); border-radius: 4px;
  background: var(--glass); backdrop-filter: blur(10px); font-size: 12px; white-space: nowrap; pointer-events: none;
  transition: opacity 0.4s, transform 0.4s; }
.game-hint span { display: inline-flex; align-items: center; gap: 5px; }
.game-hint span:last-child { color: var(--accent); }
.game-hint[data-gone='true'] { opacity: 0; transform: translate(-50%, -60%); }
.stage:not([data-game='true']) .game-hint { display: none; }

.game-pad { position: absolute; z-index: 3; inset: auto 18px 18px; display: none; justify-content: space-between; align-items: end;
  pointer-events: none; }
.stage[data-game='true'] ~ .game-pad { display: flex; }
.game-pad button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  display: grid; place-items: center; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(10px); color: var(--ink); }
.pad-move { display: flex; gap: 8px; }
.pad-move button { width: 64px; height: 64px; border-radius: 4px; }
.pad-move svg { width: 26px; height: 26px; }
.pad-jump { width: 84px; height: 84px; border-radius: 50%; gap: 0; align-content: center; }
.pad-jump svg { width: 26px; height: 26px; }
.pad-jump span { font: 500 10px / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.game-pad button[data-down='true'] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--bg) 70%, var(--accent)); }

.game-win { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px));
  padding: 26px 26px 22px; border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(14px);
  text-align: center; animation: win-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.game-win[hidden] { display: none; }
.win-big { margin: 10px 0 4px; font: 400 64px / 1 'Instrument Serif', serif; letter-spacing: -0.02em; }
.win-big em { font-style: normal; color: var(--accent); }
.win-time { margin: 0 0 20px; font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.win-actions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: transparent; font-size: 12px; font-weight: 600; }
.win-actions button:hover { border-color: var(--accent); }
.win-actions .win-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.win-actions .win-primary:hover { background: var(--accent-hover); color: var(--bg); }
@keyframes win-in { from { opacity: 0; transform: translate(-50%, -44%) scale(0.96); } }

@media (max-width: 800px) {
  .game-cta { min-height: 44px; padding: 6px 14px 6px 6px; }
  .game-cta svg { width: 30px; height: 30px; padding: 8px; }
  .game-hint { font-size: 10px; gap: 10px; padding: 8px 10px; }
  .game-hint span:nth-child(-n + 2) { display: none; }
  .game-hud { height: 34px; font-size: 11px; }
  .win-big { font-size: 44px; }
}
.stage:has(.game-win:not([hidden])) ~ .game-pad { display: none; }
#tool-exit[hidden] { display: none; }

/* ---------- compare: two looks split by a draggable divider ---------- */
.compare { position: absolute; inset: 0; z-index: 2; cursor: ew-resize; touch-action: none; --split: 50%; }
.compare[hidden] { display: none; }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px;
  background: var(--ink); box-shadow: 0 0 0 1px #0004, 0 0 18px #0006; }
.compare-line:focus-visible { outline: none; background: var(--accent); }
.compare-knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass);
  backdrop-filter: blur(10px); color: var(--ink); }
.compare-knob svg { width: 22px; height: 22px; }
.compare-line:focus-visible .compare-knob, .compare:active .compare-knob { border-color: var(--accent); color: var(--accent); }
.compare-tag { position: absolute; bottom: 18px; margin: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(10px);
  font: 500 11px / 1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.compare-tag-left { left: 18px; }
.compare-tag-right { right: 18px; pointer-events: auto; cursor: pointer; }
.compare-tag-right svg { width: 14px; height: 14px; color: var(--accent); }
.compare-tag-right:hover { border-color: var(--accent); color: var(--ink); }
.stage[data-compare='true'] video { transition: none; }
@media (max-width: 800px) {
  .compare-tag { min-height: 30px; font-size: 9px; padding: 0 8px; }
  .compare-tag-left { left: 10px; } .compare-tag-right { right: 10px; }
  .compare-knob { width: 36px; height: 36px; }
}

/* rail: each look's hero, a round icon made in Scenario from the hero image */
.rail-item .head { margin-left: auto; width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: contain;
  transition: transform 0.2s; }
.rail-item:hover .head { transform: scale(1.07); }
.rail-item.selected .head { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the shot's controls: over the shot when it is wide, in a strip under it when it is narrow ----------
   The shortcut row and the game pad sit beside .stage in .stage-wrap, so on a narrow shot they never cover
   the picture or get cut off, and fullscreen (on .stage-wrap) keeps them. */
.stage-wrap { container: shot / inline-size; }
.stage-wrap > .shortcut-row { position: absolute; z-index: 3; top: 16px; left: 50%; transform: translateX(-50%); }
.stage-wrap:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; }
.stage-wrap:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; }
.stage-wrap:fullscreen .stage { width: min(100%, calc(100vh * 16 / 9)); }
.stage-wrap:-webkit-full-screen .stage { width: min(100%, calc(100vh * 16 / 9)); }
.stage-wrap:fullscreen > .shortcut-row, .stage-wrap:fullscreen > .game-pad { align-self: stretch; }
.stage-wrap:-webkit-full-screen > .shortcut-row, .stage-wrap:-webkit-full-screen > .game-pad { align-self: stretch; }

@container shot (max-width: 780px) {
  .stage-wrap > .shortcut-row {
    position: static; transform: none; justify-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    margin-top: 8px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none;
  }
  .stage-wrap > .shortcut-row button {
    justify-content: center; gap: 8px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 0;
    font-size: 12px; line-height: 1.2; white-space: normal; text-align: left;
  }
  .stage-wrap > .shortcut-row button:hover, .stage-wrap > .shortcut-row button[aria-pressed='true'] { border-color: var(--accent); }
  .stage-wrap > .shortcut-row kbd { flex: none; }
  .stage[data-game='true'] ~ .shortcut-row { display: none; }
  .game-pad { position: static; margin-top: 8px; align-items: stretch; }
  .game-pad button { border-color: var(--rule); background: var(--panel); backdrop-filter: none; }
  .pad-move { gap: 6px; }
  .pad-move button { width: 72px; height: 52px; border-radius: 0; }
  .game-pad .pad-jump { display: flex; align-items: center; justify-content: center; width: 132px; height: 52px; gap: 8px; border-radius: 0; }
  .pad-jump span { display: inline; }
  .game-cta { left: auto; right: 12px; bottom: 12px; transform: none; }
  .compare-tag { bottom: 12px; }
  .stage-badge { position: static; max-width: 100%; margin-top: 8px; padding: 8px 12px; font-size: 11px; white-space: normal; overflow: visible; }
}
@container shot (max-width: 520px) {
  .stage-wrap > .shortcut-row { grid-template-columns: 1fr 1fr; }
  .game-cta { right: 10px; bottom: 10px; }
  .compare-tag { bottom: 10px; }
  .compare-tag-left { left: 10px; } .compare-tag-right { right: 10px; }
}
@container shot (max-width: 360px) {
  .game-hud { gap: 8px; padding: 0 10px 0 6px; }
  .game-hud b { min-width: 5ch; }
  .game-hud span { min-width: 0; }
  .game-cta strong { font-size: 12px; }
  .game-cta small { display: none; }
}

/* the layers badge sits under the shot on narrow screens: let it wrap instead of cutting the sentence */
@media (max-width: 820px) {
  .stage-badge { white-space: normal; overflow: visible; }
}

/* phones held sideways: size the shot (and its control strip) to the screen height, so the whole shot,
   its controls and the game pad are visible at once */
@media (max-height: 500px) and (orientation: landscape) {
  .stage-wrap { width: min(100%, calc((100svh - var(--bar-h) - 72px) * 16 / 9)); margin-inline: auto; }
  .stage-wrap > .shortcut-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage-wrap > .shortcut-row button { font-size: 11px; padding: 4px 6px; gap: 6px; }
}
/* touch screens have no arrow keys: the level's hint keeps only the goal */
@media (hover: none) {
  .game-hint span:nth-child(-n + 2) { display: none; }
}

/* the opening's small second eyebrow line: start it on its own line rather than wrapping with an indent */
@media (max-width: 1100px) {
  .eyebrow .edition { display: block; margin: 4px 0 0; }
}

/* the smallest phones: keep the full title in the top bar */
@media (max-width: 380px) {
  .bar-home { letter-spacing: 0.08em; }
  .bar-title { font-size: 19px; }
}

/* small phones held sideways: the one-row top bar needs short, unwrapped labels to keep the full title */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 820px) {
  .bar-action { white-space: nowrap; padding: 0 10px; }
  .bar-action svg { display: none; }
  .bar-how span { display: none; }
  .bar-how::after { content: 'How'; }
}

/* the site's shared exploration footer (added on import) takes the page's own colours */
:root {
  --exploration-footer-bg: var(--bg);
  --exploration-footer-ink: var(--muted);
  --exploration-footer-border: var(--rule);
}

/* site footer: the shared runtime mounts its tool links in [data-exploration-controls] */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 0;
  padding: 22px 4.2%; border-top: 1px solid var(--rule); background: var(--exploration-footer-bg);
  font: 400 12px / 1.4 var(--mono); color: var(--muted);
}
.foot-id { letter-spacing: 0.1em; text-transform: uppercase; }
.foot-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.foot-link:hover { color: var(--accent); }
.foot [data-exploration-controls] { flex: 1 1 320px; display: flex; justify-content: flex-end; border-top: 0; background: none; } /* the footer draws the rule and background */