/* Scroll-story engine styles: the Sightline site's copy of templates/scroll-story/engine/story.css (card 1f). The template is untouched.
   Differences, all so that this file can live inside the site: no global body/html/* rules (the shell owns them); font sizes only
   through the shell's tokens (check_site.py fails any other size); the stage sits below the menu bar and inside the page width
   with the shell's panel radius; words are placed here (a wide screen: left and centred; a tall screen: the lower third).
   The story file itself is explained in templates/scroll-story/STORY-FORMAT.md. */

.story { position: relative; }
/* a screen-tall placeholder while the story file is on its way; gone once the story has started, failed, or is late (assets/pages/how.js sets data-late) */
.js [data-scroll-story]:not([data-ready]):not([data-late]) { min-height: calc(100vh - var(--bar-space)); min-height: calc(100svh - var(--bar-space)); }

/* The track is as tall as the whole story; the stage sticks under the menu bar while you scroll through it. */
.story-track { position: relative; width: 100%; }

/* The stage hangs one space-2 (8 px) below the menu bar, not against it, so the bar's drop shadow (0 16px 36px) starts on the ink
   ground and not on the panel's own top edge; the same 8 px come off its height. */
.story-stage {
  position: sticky;
  top: calc(var(--bar-space) + var(--space-2));
  width: 100%;
  height: calc(100vh - var(--bar-space) - var(--space-2) - var(--space-4));
  height: calc(100svh - var(--bar-space) - var(--space-2) - var(--space-4));
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-panel);
  background: var(--ink);
}

/* Each scene fills the stage. Its own size is the unit for layers (cqw, cqh, cqmin). */
.story-scene {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  visibility: hidden;
}
.story-scene[data-live="1"] { visibility: visible; }

/* The art frame: every layer of a scene lives in this box, whose shape is fixed (wide: 1.15 to 1 on the right; tall: 0.86 to 1
   above the words), so a layer's x, y and size mean the same thing on every screen and the art only scales. Its own cq units
   (cqmin) measure the frame, not the scene. */
.story-art {
  position: absolute;
  container-type: size;
  width: min(54cqw, 100cqh);
  aspect-ratio: 1.15 / 1;
  right: 2cqw;
  top: 50%;
  transform: translateY(-50%);
}
.story[data-portrait="1"] .story-art {
  width: min(100cqw - 2 * var(--space-4), 50cqh);   /* as big as the lower third's words allow: the picture is the scene, not a small thing above a gap */
  aspect-ratio: 0.86 / 1;
  right: auto;
  left: 50%;
  top: 40cqh;
  transform: translate(-50%, -50%);
}

.story-layer {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}
/* only the scene on screen (or wiping in) is promoted to its own layers */
.story-scene[data-live="1"] .story-layer,
.story-scene[data-live="1"] .story-words { will-change: transform, opacity; }
.story-layer svg,
.story-layer img { display: block; width: 100%; height: auto; overflow: visible; }

.story-missing {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0.4cqmin dashed currentColor;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  padding: 1cqmin;
}

/* The words. The engine moves them with an inline transform, so they are placed with edges and flex, never with a transform. */
.story-words {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-6) var(--space-7);
  width: min(100%, 44rem);
  max-width: 44cqw;
}
.story-words[data-pos="top-left"] { left: 0; top: 0; }
.story-words[data-pos="middle-left"] { left: 0; top: 0; bottom: 0; justify-content: center; }
.story-words[data-pos="bottom-left"] { left: 0; bottom: 0; }
.story-words[data-pos="center"] { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

.story-words h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.story-words p {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-6);
  line-height: 1.45;
  max-width: 32ch;
  text-wrap: pretty;
}

/* A tall screen (a phone held upright): the words sit in the lower third across the whole width, the art above it. */
.story[data-portrait="1"] .story-words {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.story[data-portrait="1"] .story-words h3 { font-size: var(--fs-3); line-height: 1.08; }
.story[data-portrait="1"] .story-words p { margin-top: var(--space-2); font-size: var(--fs-7); line-height: 1.4; max-width: 46ch; }

/* A short, wide screen (a phone held sideways, 568x320 to 932x430): the stage is only 215 to 325 px tall, so the words column is wider
   (fewer lines), its padding and type are smaller, and every line of the words stays inside the stage. The art keeps its frame on the right. */
@media (orientation: landscape) and (max-height: 480px) {
  .story-words { max-width: 52cqw; padding: var(--space-4); }
  .story-words h3 { font-size: var(--fs-3); line-height: 1.08; }
  .story-words p { margin-top: var(--space-2); font-size: var(--fs-7); line-height: 1.4; }
}

/* A very small screen (320 wide): a little less padding and the 15 px size, so the words take as little of it as they can. */
@media (max-width: 359.98px) {
  .story[data-portrait="1"] .story-words { padding: var(--space-3) var(--space-4) var(--space-4); }
  .story[data-portrait="1"] .story-words p { font-size: var(--fs-8); line-height: 1.35; }
}

/* Reduced motion: no pinning, no movement. Each scene becomes a stacked panel. */
.story.is-reduced .story-track { height: auto !important; }
.story.is-reduced .story-stage {
  position: static;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.story.is-reduced .story-scene {
  position: relative;
  inset: auto;
  height: calc(100vh - var(--bar-space) - var(--space-4));
  height: calc(100svh - var(--bar-space) - var(--space-4));
  visibility: visible;
  clip-path: none !important;
  border-radius: var(--r-panel);
}

.story.is-reduced .story-scene[data-live="1"] .story-layer,
.story.is-reduced .story-scene[data-live="1"] .story-words { will-change: auto; }