/* The button-driven hero.
 *
 * A single-viewport banner contains the scene and generated program. Back,
 * Next, and the progress dots drive the method beats; ordinary page scroll is
 * left alone so the results begin directly below the banner.
 */

.vda-hero {
  position: relative;
  background: var(--vda-bg);
}

.vda-hero__scroller {
  height: 100vh;
  height: 100svh;
}

.vda-hero__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  /* minmax(0, 1fr), not 1fr: the default `auto` minimum lets the cards row grow
     past its share and push the footer off the bottom of the stage, which is
     what cut the simulation controls off on shorter screens. Pinning the row to
     exactly the space left over makes the cards fit the room they are given. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(10px, 2.2vh, 30px);
  max-width: var(--vda-content);
  margin: 0 auto;
  padding: clamp(12px, 2.6vh, 34px) clamp(18px, 3vw, 32px);
}

/* Masthead ------------------------------------------------------------------ */
/* Collapses to a compact single line once the sequence starts, so the cards
   get the vertical room. */

.vda-hero__masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.vda-hero__masthead .vda-display {
  font-size: clamp(2rem, calc(2rem + var(--mast-open, 1) * 3.2vw), 5.2rem);
  transition: font-size var(--vda-slow) var(--vda-ease);
}

.vda-hero__lede {
  max-width: 30ch;
  color: var(--vda-fg);
  font-weight: 450;
  opacity: var(--lede-opacity, 1);
  transition: opacity 180ms var(--vda-ease);
}

.vda-hero__byline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  text-align: right;
  opacity: var(--mast-open, 1);
  /* Fading alone left the authors and buttons holding ~64px of the stage for
     the whole sequence, well after they had become invisible. */
  max-height: calc(var(--mast-open, 1) * 220px);
  overflow: hidden;
  transition: opacity var(--vda-base) var(--vda-ease);
}

/* Card composition ---------------------------------------------------------- */

.vda-hero__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  container-type: size;
}

/* The composition proper. Its width is capped against the height the grid row
   actually has, so a short or medium window scales the cards down instead of
   overflowing it. Container-relative units make this correct on first paint;
   no post-load JavaScript measurement is required.

   2.12 is the tallest thing in the stack per unit width: the scene card runs to
   74% of this box at 16/9, and the code card is 114% of the scene's height. */
.vda-hero__stack {
  position: relative;
  width: 100%;
  max-width: calc(var(--cards-h, 60vh) * 2.12);
  max-width: calc(100cqh * 2.12);
  transition: max-width var(--vda-slow) var(--vda-ease);
}

/* A wide viewport has enough horizontal room to give the arrival pair more
   presence without reducing the vertical breathing room. Later beats retain
   the tighter cap that accommodates the overlapping code panel. */
@media (min-width: 1081px) {
  .vda-hero.is-arrival .vda-hero__stack {
    max-width: calc(var(--cards-h, 60vh) * 2.28);
    max-width: calc(100cqh * 2.28);
  }
}

/* Arrival shows input and result side by side; as the sequence starts the
   result card leaves and the scene takes the width back. --result-open is
   driven from the story controller, so the two are always consistent.

   The fallback is 1, not 0, so the first paint is already the arrival layout. */
.vda-hero__scene {
  position: relative;
  width: calc(min(74%, 860px) - var(--result-open, 1) * min(24%, 280px));
  aspect-ratio: 16 / 9;
  border-radius: var(--vda-radius);
  overflow: hidden;
  background: var(--vda-card);
  border: 1px solid var(--vda-card-border);
  box-shadow: 0 1px 2px rgba(16, 16, 20, 0.06), 0 12px 34px rgba(16, 16, 20, 0.09);
}

.vda-hero__photo,
.vda-hero__canvas,
.vda-hero__masks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vda-hero__photo {
  object-fit: cover;
  /* Sits above the canvas for the cross-dissolve, so it must not swallow the
     pointer once it has faded out — that is what broke orbiting. */
  pointer-events: none;
  opacity: var(--photo-opacity, 1);
  transform: scale(calc(1 + var(--photo-zoom, 0) * 0.03));
  will-change: opacity, transform;
}

.vda-hero__canvas {
  display: block;
  opacity: var(--canvas-opacity, 0);
  pointer-events: none;
}

.vda-hero.is-interactive .vda-hero__canvas {
  pointer-events: auto;
  cursor: grab;
}

.vda-hero.is-interactive .vda-hero__canvas:active {
  cursor: grabbing;
}

/* Mask overlay (SAM 3) ------------------------------------------------------ */

.vda-hero__masks {
  pointer-events: none;
  opacity: var(--masks-opacity, 0);
}

.vda-hero__masks path {
  fill: var(--mask-fill);
  fill-opacity: 0.26;
  stroke: var(--mask-stroke);
  stroke-opacity: 0.85;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Result card --------------------------------------------------------------- */

.vda-hero__result {
  position: absolute;
  right: 0;
  top: 0;
  width: min(49%, 580px);
  margin: 0;
  opacity: var(--result-open, 1);
  transform: translateX(calc((1 - var(--result-open, 1)) * 18px));
  transition: opacity var(--vda-base) var(--vda-ease),
    transform var(--vda-base) var(--vda-ease);
  /* Only clickable while it is actually on screen — once faded out it must not
     keep intercepting pointer events over the scene beneath it. */
  pointer-events: none;
}

.vda-hero.is-arrival .vda-hero__result {
  pointer-events: auto;
}

.vda-hero__result video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--vda-radius);
  background: var(--vda-card);
  border: 1px solid var(--vda-card-border);
  box-shadow: 0 1px 2px rgba(16, 16, 20, 0.06), 0 12px 34px rgba(16, 16, 20, 0.09);
}

.vda-hero__result figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--vda-muted);
}

.vda-hero__result figcaption b {
  color: var(--vda-accent);
  font-weight: 600;
}

/* Code card ----------------------------------------------------------------- */
/* Taller than the scene card and offset to the right, clipping its corner just
   enough to read as a layered stack rather than a two-column grid. */

.vda-hero__code {
  position: absolute;
  right: 0;
  top: -7%;
  height: 114%;
  width: min(42%, 470px);
  display: flex;
  flex-direction: column;
  border-radius: var(--vda-radius);
  overflow: hidden;
  background: var(--vda-card);
  border: 1px solid var(--vda-card-border);
  box-shadow: 0 2px 6px rgba(16, 16, 20, 0.08), 0 20px 50px rgba(16, 16, 20, 0.16);
  color: var(--vda-on-card);
  opacity: var(--code-opacity, 0);
  transform: translateX(calc((1 - var(--code-opacity, 0)) * 28px));
  transition: transform var(--vda-base) var(--vda-ease);
  pointer-events: none;
}

.vda-hero__code-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--vda-card-border);
  background: var(--vda-card-2);
  color: var(--vda-on-card-faint);
  font-family: var(--vda-mono);
  font-size: 0.72rem;
  flex: none;
}

.vda-hero__code-dots {
  display: flex;
  gap: 6px;
}

.vda-hero__code-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.vda-hero__code-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  /* Fade at both ends so the panel reads as a viewport onto a longer file. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
}

/* Bulma styles bare <pre> with a whitesmoke background and dark text, which
   turned the whole panel light and left the highlighted line near-white on pale
   blue. Reset explicitly rather than relying on the card behind it. */
.vda-hero__code pre,
.vda-hero__code code {
  background: transparent;
  background-color: transparent;
  color: var(--vda-on-card);
  border-radius: 0;
  overflow: visible;
  word-wrap: normal;
}

.vda-hero__code pre {
  margin: 0;
  padding: 18px 0;
  transform: translateY(var(--code-scroll, 0px));
  transition: transform var(--vda-slow) var(--vda-ease);
  font-family: var(--vda-mono);
  font-size: 0.72rem;
  line-height: 1.72;
  tab-size: 4;
}

.vda-hero__code .ln {
  display: block;
  padding: 0 16px;
  color: #868c9a;
  white-space: pre;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--vda-base) var(--vda-ease),
    transform var(--vda-base) var(--vda-ease),
    background var(--vda-base) var(--vda-ease);
}

.vda-hero__code .ln.is-typed {
  opacity: 1;
  transform: none;
}

/* The API call the current beat is illustrating. Every token brightens, not
   just the line's own colour, or the syntax stays unreadable on the wash. */
.vda-hero__code .ln.is-active {
  background: rgba(76, 157, 255, 0.2);
  box-shadow: inset 2px 0 0 var(--vda-accent-on-card);
  color: #eef2f7;
}

.vda-hero__code .ln.is-active .tok-kw { color: #dcb8ff; }
.vda-hero__code .ln.is-active .tok-str { color: #a5e8b4; }
.vda-hero__code .ln.is-active .tok-num { color: #ffc48c; }
.vda-hero__code .ln.is-active .tok-com { color: #8b93a3; }
.vda-hero__code .ln.is-active .tok-api { color: #8fd4ff; }
.vda-hero__code .ln.is-active .tok-def { color: #ffe3a3; }

.vda-hero__code .tok-kw { color: #b184e8; }
.vda-hero__code .tok-str { color: #6fbe86; }
.vda-hero__code .tok-num { color: #d99358; }
.vda-hero__code .tok-com { color: #565b68; font-style: italic; }
.vda-hero__code .tok-api { color: #4c9dff; font-weight: 600; }
.vda-hero__code .tok-def { color: #e0bd72; }

/* Footer row ---------------------------------------------------------------- */

/* Narrative on the left, simulation controls on the right.
 *
 * The controls hold their space on every beat — they are only faded, never
 * removed, so that arriving at the last beat does not reflow the whole stage.
 * Stacking them under the narrative therefore cost ~250px of height at all
 * times, which is what pushed the copy off the bottom of a laptop screen. Side
 * by side, the footer is only as tall as the taller of the two. */
.vda-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  grid-template-areas:
    "narrative sim"
    "nav       sim";
  align-items: end;
  gap: clamp(8px, 1.6vh, 18px) clamp(18px, 2.4vw, 32px);
  min-height: clamp(80px, 13vh, 150px);
}

.vda-hero__narrative { grid-area: narrative; }
.vda-hero__nav { grid-area: nav; }
.vda-hero__sim { grid-area: sim; }

/* The input caption and the beat captions occupy the same cell: the caption
   holds the space on arrival and hands over as the sequence starts. */
.vda-hero__narrative {
  display: grid;
  grid-template-areas: "narrative";
  align-items: end;
  min-width: 0;
}

.vda-hero__narrative > * {
  grid-area: narrative;
  min-width: 0;
}

.vda-hero__beat {
  max-width: 52ch;
  opacity: var(--beat-opacity, 0);
  transform: translateY(calc((1 - var(--beat-opacity, 0)) * 8px));
  /* Smooths the one-frame drop when a beat hands over to the next. */
  transition: opacity 180ms var(--vda-ease);
}

/* Sized against height as well as width: on a short laptop screen the footer is
   competing with the scene card for the same pixels. */
.vda-hero__beat h2 {
  font-size: clamp(1.1rem, 0.7rem + 1.1vh + 0.6vw, 1.75rem);
  font-weight: 640;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: clamp(3px, 0.8vh, 8px) 0 0;
  color: var(--vda-fg);
}

.vda-hero__beat p {
  margin: clamp(3px, 0.7vh, 7px) 0 0;
  color: var(--vda-muted);
  font-size: clamp(0.82rem, 0.55rem + 0.55vh, 0.94rem);
  line-height: 1.45;
}

.vda-hero__beat .vda-tool {
  color: var(--vda-accent);
  font-weight: 550;
}

/* The input caption, overlaid on the photograph: it belongs to the image, and
   putting it there frees the footer for the lede and the navigation. */
.vda-hero__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--vda-mono);
  font-size: 0.74rem;
  line-height: 1.45;
  max-width: 52ch;
  opacity: var(--caption-opacity, 1);
  pointer-events: none;
}

.vda-hero__caption b {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.64rem;
  flex: none;
}

/* Simulation controls -------------------------------------------------------- */

.vda-hero__sim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  align-items: stretch;
  min-width: 0;
  opacity: var(--sim-opacity, 0);
  pointer-events: none;
}

.vda-hero.is-interactive .vda-hero__sim {
  pointer-events: auto;
}

.vda-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vda-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: clamp(4px, 0.7vh, 7px) clamp(9px, 1vw, 14px);
  border-radius: 999px;
  border: 1px solid var(--vda-border);
  background: transparent;
  color: var(--vda-muted);
  font-family: var(--vda-sans);
  font-size: clamp(0.75rem, 0.58rem + 0.32vh, 0.84rem);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--vda-fast) var(--vda-ease),
    border-color var(--vda-fast) var(--vda-ease),
    background var(--vda-fast) var(--vda-ease);
}

.vda-chip:hover {
  color: var(--vda-fg);
  border-color: var(--vda-border-strong);
}

.vda-chip[aria-pressed="true"] {
  color: var(--vda-bg);
  background: var(--vda-fg);
  border-color: var(--vda-fg);
}

/* Outcome dot: green when the tower survives the edit, amber when it falls. */
.vda-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vda-warn);
}

.vda-chip[data-outcome="stands"] .vda-chip__dot {
  background: var(--vda-ok);
}

.vda-chip[aria-pressed="true"] .vda-chip__dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.vda-hero__transport {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 46px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--vda-border);
  border-radius: 999px;
  background: var(--vda-bg-sunken);
}

.vda-hero__play {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vda-accent);
  color: #fff;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: background var(--vda-fast) var(--vda-ease),
    transform var(--vda-fast) var(--vda-ease);
}

.vda-hero__play:hover {
  background: #155fb5;
  transform: scale(1.04);
}

.vda-hero__play:focus-visible {
  outline: 2px solid var(--vda-accent);
  outline-offset: 3px;
}

.vda-hero__scrub {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--vda-border-strong);
  cursor: pointer;
}

.vda-hero__scrub::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--vda-bg-sunken);
  border-radius: 50%;
  background: var(--vda-fg);
  box-shadow: 0 0 0 1px var(--vda-border-strong);
}

.vda-hero__scrub::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--vda-bg-sunken);
  border-radius: 50%;
  background: var(--vda-fg);
}

.vda-hero__scrub:focus-visible {
  outline: 2px solid var(--vda-accent);
  outline-offset: 5px;
}

.vda-hero__clock {
  min-width: 4.5ch;
  color: var(--vda-faint);
  font-family: var(--vda-mono);
  font-size: 0.7rem;
  text-align: right;
}

.vda-hero__blurb {
  color: var(--vda-muted);
  font-size: clamp(0.8rem, 0.55rem + 0.5vh, 0.9rem);
  line-height: 1.45;
  max-width: 56ch;
  margin: 0;
}

/* Counterfactual controls stay behind one quiet disclosure until requested. */
.vda-hero__editor {
  position: static;
  width: 100%;
  overflow: visible;
}

.vda-hero__editor > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--vda-muted);
  font-size: 0.8rem;
  font-weight: 550;
  list-style: none;
  transition: color var(--vda-fast) var(--vda-ease),
    border-color var(--vda-fast) var(--vda-ease),
    background var(--vda-fast) var(--vda-ease);
}

.vda-hero__editor > summary::after {
  content: "⌄";
  color: var(--vda-faint);
  font-family: var(--vda-mono);
  font-size: 0.86rem;
  transition: transform var(--vda-fast) var(--vda-ease);
}

.vda-hero__editor > summary::-webkit-details-marker {
  display: none;
}

.vda-hero__editor[open] > summary {
  border-color: rgba(26, 111, 212, 0.2);
  background: var(--vda-accent-wash);
  color: var(--vda-accent);
}

.vda-hero__editor[open] > summary::after {
  transform: rotate(180deg);
}

.vda-hero__editor-body {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 10px);
  width: min(460px, calc(100vw - 40px));
  max-height: min(52svh, 430px);
  padding: clamp(9px, 1.2vh, 12px);
  overflow: auto;
  border: 1px solid var(--vda-border);
  border-radius: 14px;
  background: var(--vda-bg);
  box-shadow: 0 20px 50px rgba(16, 16, 20, 0.18), 0 2px 8px rgba(16, 16, 20, 0.08);
  animation: vda-editor-in 180ms var(--vda-ease);
}

.vda-hero__editor:not([open]) > .vda-hero__editor-body {
  display: none;
}

@keyframes vda-editor-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The diff that produced the selected world. */
.vda-hero__diff {
  border: 1px solid var(--vda-border);
  border-radius: 10px;
  background: var(--vda-bg-sunken);
  overflow: hidden;
}

.vda-hero__diff-label {
  margin: 0;
  padding: clamp(6px, 1vh, 9px) 14px;
  border-bottom: 1px solid var(--vda-border);
  color: var(--vda-fg);
  font-family: var(--vda-mono);
  font-size: 0.74rem;
}

.vda-hero__diff pre {
  margin: 0;
  padding: 10px 14px;
  font-family: var(--vda-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--vda-muted);
  /* A long edit scrolls inside the box rather than growing the footer and
     stealing height from the scene card above it. */
  max-height: clamp(48px, 11vh, 120px);
  overflow: auto;
  white-space: pre;
}

.vda-hero__diff .add { color: #1f7a44; }
.vda-hero__diff .del { color: #b03636; }

/* Navigation and progress rail ------------------------------------------------ */

.vda-hero__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
}

.vda-hero__nav .vda-btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 0.94rem;
  font-weight: 600;
}

.vda-hero__next {
  min-width: 168px;
  justify-content: center;
}

.vda-hero__next > span:last-child {
  display: inline-block;
  animation: vda-nudge 2.4s var(--vda-ease) infinite;
}

.vda-hero__back:disabled {
  opacity: 0.34;
  cursor: default;
}

.vda-hero__next:disabled {
  opacity: 0.34;
  cursor: default;
}

.vda-hero__next:disabled:hover {
  background: var(--vda-fg);
  border-color: var(--vda-fg);
}

.vda-hero__next:disabled span:last-child {
  animation: none;
}

.vda-hero__back:disabled:hover {
  border-color: var(--vda-border);
  background: transparent;
}

.vda-hero__skip {
  color: var(--vda-muted);
  white-space: nowrap;
}

.vda-hero__skip:hover {
  color: var(--vda-fg);
}

@keyframes vda-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Outside the cards, in the page margin: sitting inside the composition it
   landed on the code card, whose styling it disappeared into. */
.vda-hero__rail {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: var(--rail-opacity, 1);
}

.vda-hero__rail button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--vda-border-strong);
  cursor: pointer;
  transition: background var(--vda-base) var(--vda-ease),
    transform var(--vda-base) var(--vda-ease);
}

.vda-hero__rail button:hover {
  background: var(--vda-muted);
  transform: scale(1.4);
}

.vda-hero__rail button.is-on {
  background: var(--vda-accent);
  transform: scale(1.5);
}

.vda-hero__rail button:focus-visible {
  outline: 2px solid var(--vda-accent);
  outline-offset: 3px;
}

/* Static fallback ------------------------------------------------------------ */
/* Reduced motion, narrow viewports and missing WebGL all land here: nothing is
   pinned, the cards unstack into normal flow, and the live scene is replaced by
   the MuJoCo render of the same rollout. The chips stay live in both modes, so
   there is only ever one set of controls in the DOM. */

.vda-hero__fallback {
  display: none;
}

.vda-hero.is-static .vda-hero__scroller {
  height: auto;
}

.vda-hero.is-static .vda-hero__stage {
  position: relative;
  height: auto;
  display: block;
  padding-top: clamp(40px, 8vh, 80px);
  padding-bottom: clamp(40px, 8vh, 80px);
}

/* Nothing is height-constrained here, so the cards run at full width in normal
   flow rather than being fitted to a stage that no longer exists. */
.vda-hero.is-static .vda-hero__cards {
  display: block;
}

.vda-hero.is-static .vda-hero__stack {
  max-width: none;
}

.vda-hero.is-static .vda-hero__byline {
  max-height: none;
}

.vda-hero.is-static .vda-hero__canvas,
.vda-hero.is-static .vda-hero__rail,
.vda-hero.is-static .vda-hero__result,
.vda-hero.is-static .vda-hero__back,
.vda-hero.is-static .vda-hero__next,
.vda-hero.is-static .vda-hero__transport {
  display: none;
}

.vda-hero.is-static .vda-hero__scene,
.vda-hero.is-static .vda-hero__code {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  top: auto;
  opacity: 1;
  transform: none;
  margin-bottom: 20px;
}

.vda-hero.is-static .vda-hero__code {
  height: min(60svh, 480px);
}

.vda-hero.is-static .vda-hero__masks {
  opacity: 1;
}

.vda-hero.is-static .vda-hero__beat,
.vda-hero.is-static .vda-hero__sim {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vda-hero.is-static .vda-hero__foot {
  display: block;
}

.vda-hero.is-static .vda-hero__sim {
  margin-top: 24px;
}

.vda-hero.is-static .vda-hero__editor-body {
  position: static;
  width: auto;
  max-height: none;
  margin-top: 8px;
  box-shadow: none;
}

.vda-hero.is-static .vda-hero__fallback {
  display: block;
  margin-bottom: 16px;
}

.vda-hero__fallback video {
  width: 100%;
  display: block;
  border-radius: var(--vda-radius);
  border: 1px solid var(--vda-card-border);
  background: var(--vda-card);
}

/* Narrow ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .vda-hero__scene {
    width: 100%;
  }

  .vda-hero__rail {
    left: -20px;
  }

  /* The code card is supporting material, not load-bearing: the beat captions
     already say what the program is doing. Below this width the overlap costs
     more of the scene than the panel is worth, so it goes — and with it the
     result card, which has nowhere to sit once the scene is full width. */
  .vda-hero__code,
  .vda-hero__result {
    display: none;
  }

  /* Nothing overhangs the scene any more, so the composition is exactly 16/9. */
  .vda-hero__stack {
    max-width: calc(var(--cards-h, 60vh) * 16 / 9);
    max-width: calc(100cqh * 16 / 9);
  }

  /* The narrative needs the width back once the scene is full-bleed. */
  .vda-hero__foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  }
}

/* Short and medium windows: the stage is one screen, so everything in the
   footer has to give ground before the scene card does. The controls above
   already scale with vh; this is the point at which one row has to go entirely.
   The beat copy says what the scene is doing, and the diff is the row that
   carries the argument, so the blurb is the one that can be spared. */
@media (max-height: 900px) {
  .vda-hero__chips {
    gap: 5px;
  }

  .vda-hero__blurb {
    display: none;
  }
}

@media (max-width: 820px) {
  .vda-hero__masthead {
    flex-direction: column;
    align-items: flex-start;
  }

  .vda-hero__byline {
    align-items: flex-start;
    text-align: left;
  }

  .vda-hero__foot {
    grid-template-columns: 1fr;
    grid-template-areas:
      "narrative"
      "nav"
      "sim";
  }
}