/* pb-story-window.css — the shared geometry of a "story window" section.
 *
 * A story window is a scroll-driven SECTION of the /what-is-panoblu story on one
 * of our own product pages: a tall wrapper, a sticky full-viewport iframe of the
 * embed shell, and _skeleton/js/pb-story-window.js posting the wrapper's own
 * scroll progress into it. Three sections use these rules (Seaview: acts 5 + 8;
 * /ir: the thermal acts; the home page), so they live in ONE file rather than in
 * three copies of a <style> block that would drift apart at the first change.
 * Link it from the partial, with a ?v= token, and bump the token when this file
 * changes. It is deliberately NOT part of site.css: only the pages that carry a
 * section should pay for it, and site.css is loaded by all 54.
 *
 * The heading band above the frame is each partial's own — it belongs to that
 * page's register, not to this geometry.
 *
 * TWO THINGS HERE ARE LOAD-BEARING, not styling:
 *
 *  1. THE SECTION MUST NEVER TRAP THE WHEEL. `overscroll-behavior` is left at
 *     `auto` on the stage and is never set to `none`, for the same reason the
 *     embed shell's own html/body carry `auto` (see EMBED.md → overscroll-
 *     behavior must stay auto): the property governs a scroll container AT ITS
 *     BOUNDARY, and a container that cannot scroll is always at its boundary, so
 *     `none` on an `overflow:hidden` box tells the browser not to pass the wheel
 *     up to the page either. A visitor scrolling past a playing frame must never
 *     get stuck on it, and here it would also sever the very scroll the story
 *     runs on.
 *
 *  2. THE SECTION MUST NEVER COLLAPSE TO ZERO HEIGHT. --pb-storywin-track is a dial
 *     the page sets and can get wrong; `min-height` is the floor under it, and
 *     the stage's height is stated absolutely rather than inherited from a child
 *     that could measure 0 (an iframe with no content does).
 */

.pb-storywin {
  /* THE PACING DIAL. Default = the real page's own pacing for the window: it
     spends 2500vh on the whole story, so a window is 2500vh x the story fraction
     its acts occupy. Acts 5 + 8 are 0.150 + 0.090 = 0.240 of the story, so
     600vh. Shorten it per page from the section's own style attribute after
     looking at it; below about one screen per act the beats feel snatched. */
  --pb-storywin-track: 600vh;
  /* CLEARING THE STICKY SITE HEADER. Same measure as the mast-mounting scroll
     story's `.pbmast__viewer` inset, which solves the same problem: the header
     is `position: sticky; top: 0`, so it is over the top of a sticky stage for
     the whole length of the section and not just at the top of the page. That
     partial insets its CONTENT inside a full-viewport stage; here the frame IS
     the picture, with nothing inside it we can inset, so the stage itself starts
     below the header and is that much shorter. The story lays itself out in vh
     against the frame's own box, so a shorter frame is simply a shorter viewport
     to it. */
  --pb-storywin-top: clamp(72px, 11vh, 104px);
  background: #130C0E;
}

.pb-storywin__track {
  position: relative;
  height: var(--pb-storywin-track);
  min-height: 100svh;
  /* The frame reports its own progress from this element's rect. Scroll
     anchoring would shift scrollY to keep content stable when anything above the
     section changes height (the cookie banner leaving, a lazy image landing),
     which reads as the visitor scrolling and jumps the story. */
  overflow-anchor: none;
}

/* 100svh, with 100vh as the fallback for browsers without it: svh avoids the
   mobile URL-bar resize jump, which on a story whose every card is placed in vh
   would re-lay the whole frame out mid-scroll. */
.pb-storywin__stage {
  position: sticky;
  top: var(--pb-storywin-top);
  height: calc(100vh - var(--pb-storywin-top));
  height: calc(100svh - var(--pb-storywin-top));
  overflow: hidden;
  background: #050607;                  /* the story's own ground, behind the frame */
}

.pb-storywin__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* REDUCE MOTION. The frame's own gate has already turned the story into a poster
   with a link to the full page, and 600vh of scroll past a still picture is
   worse than none: the section becomes one screen. The floor above keeps it from
   collapsing. */
@media (prefers-reduced-motion: reduce) {
  /* Written as `height`, not as the custom property: a page that shortened the
     dial from its own inline style attribute would otherwise beat this and keep
     600vh of scroll past a still picture. */
  .pb-storywin__track { height: 100vh; height: 100svh; }
}

/* THE SAME COLLAPSE, FOR THE THREE FALLBACKS CSS CANNOT SEE.
   reduce-motion is a media query, so the rule above catches it. No WebGL, a
   frame the shell judged too small, and a FAILED BOOT are not: they are decided
   inside the iframe, and each of them left SIX SCREENS of scroll past one still
   picture — the failed boot being the likeliest of the three, since it is one
   CDN hiccup on ~880 KB of scripts.
   So the frame posts `{pbWip:'static'}` when it falls back to its poster and
   link, and _skeleton/js/pb-story-window.js puts this class on the section. Same
   one-screen result, same reason, same `height` (not the dial) so an inline
   override cannot beat it. */
.pb-storywin--static .pb-storywin__track { height: 100vh; height: 100svh; }