/* ════════════════════════════════════════════════════════════
   SCROLL HOLD — the Wall of Work hand-off, generalised

   Same shape as css/gallery.css's .wow--sticky block, applied to any
   section js/hold.js marks with data-hold:

     • the section box is pulled up a full viewport over the section
       above it, so the stage already covers the screen before this
       section's own scroll range begins — the stage is never seen
       travelling into place, it only dissolves;
     • a position:sticky, 100vh stage inside it does not move at all
       while the page scrolls, which is what "the scroll stopped" is;
     • the stage's opacity is driven from the section's live rect by
       js/hold.js, and everything inside inherits it, so the dark/light
       backdrop can be established BEFORE the heading and the body are
       allowed to come up.

   This file is inert on its own: nothing here applies until js/hold.js
   adds .eh-hold. Revert = drop the <link> and the <script>; every
   section keeps the layout it has today.

   MUST be the LAST stylesheet in <head> — see the doubled-class note
   below.
   ════════════════════════════════════════════════════════════ */

/* ── THE SECTION ──────────────────────────────────────────────

   .eh-hold is written twice on purpose. The sections this lands on are
   selected by two or three classes in style.min.css
   (`.section--warm.slant-top`, `.section.slant-bone`), so a single
   `.eh-hold` (0,0,1,0) loses the padding and background declarations to
   them (0,0,2,0) no matter how late this file loads. Doubling the class
   costs nothing at runtime and puts this rule at (0,0,2,1), which wins
   outright rather than on source order.

   Height and margin-top are NOT set here. Both are viewport multiples,
   and CSS `vh` resolves against the LARGE viewport on mobile while
   js/hold.js measures window.innerHeight — on a phone with the URL bar
   showing, a `margin-top: -100vh` would be ~60px shallower than the
   height the script assumes, and that gap is exactly the blank strip
   this whole arrangement exists to avoid. One owner: the script. */
.eh-hold.eh-hold {
  /* THE SECTION ITSELF MUST NOT PAINT.
     This is the bug that cost the gallery several rounds. The box is
     pulled a full viewport up over the section above it, so any
     background on the SECTION covers that section from the moment the
     boxes overlap, regardless of what the stage's opacity is doing —
     you get a hard colour swap instead of a dissolve. js/hold.js moves
     the colour onto the backdrop inside the stage and blanks it here. */
  background: transparent;
  padding: 0;

  /* overflow:hidden would make this element a scroll container, and
     position:sticky inside a scroll container stops sticking. The stage
     clips instead. */
  overflow: visible;

  /* Above the outgoing section, below whatever comes next. The slant
     families already declare this; stated here so a section that
     doesn't still stacks correctly. */
  position: relative;
  z-index: 2;

  /* The invisible top of this box lies over the whole last screen of
     the section above. It must not swallow that section's links. The
     stage opts back in from the script once it is opaque enough to be
     the thing under the cursor. */
  pointer-events: none;
}

/* ── THE STAGE ────────────────────────────────────────────────
   Does not move. That is its entire job. */
.eh-hold__stage {
  position: sticky;
  top: 0;
  /* An explicit z-index makes the stage a stacking context in its own
     right whatever its opacity is. The origami backdrop this adopts
     carries z-index:-1, and -1 escapes upward out of any element that
     is NOT a stacking context — it would then paint behind the section
     above instead of behind the stage's own content. opacity < 1 would
     contain it for most of the scroll and then stop containing it at
     exactly opacity 1, which is the worst possible failure mode. */
  z-index: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* height is written in px by js/hold.js (window.innerHeight). */
  height: 100vh;
  /* Content is fit-tested against the viewport before this is built, so
     nothing should ever reach this — it is here so that an accordion or
     a late-loading image that grows past the stage clips cleanly
     instead of bleeding over the section below. */
  overflow: hidden;

  /* A floor under the centring, so a section whose content nearly fills
     the viewport doesn't end up touching the top and bottom edges. */
  padding: clamp(16px, 4vh, 64px) 0;

  /* js/hold.js drives this from the section's live rect. */
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

/* The adopted backdrop — either the js/origami.js panel that already
   carries this section's colour and slant, or one built by js/hold.js
   when there is no panel. Both are absolutely positioned against the
   stage, which is the positioned ancestor now. */
.eh-hold__bd {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The heading block is translated as well as faded, so it settles into
   place rather than simply appearing. Safe to transform ONLY because
   js/hold.js kills every ScrollTrigger inside a section it takes over
   first — a transformed ancestor distorts the rect ScrollTrigger caches
   for anything beneath it, which is what fires nested reveals hundreds
   of pixels late. */
.eh-hold__head {
  will-change: opacity, transform;
}

/* ── REDUCED MOTION ───────────────────────────────────────────
   js/hold.js builds nothing at all under prefers-reduced-motion, so
   none of the classes above are ever applied and each section keeps its
   normal layout and full visibility. This block is belt-and-braces for
   the case where the preference is switched on mid-visit, after the
   stage has already been built: unstick it, drop the overlap, and let
   the content sit in the page at full opacity. */
@media (prefers-reduced-motion: reduce) {
  .eh-hold.eh-hold {
    margin-top: 0 !important;
    height: auto !important;
    pointer-events: auto;
  }
  .eh-hold__stage {
    position: static;
    height: auto !important;
    overflow: visible;
    opacity: 1 !important;
    pointer-events: auto;
    padding: clamp(64px, 10vh, 140px) 0;
  }
  .eh-hold__head,
  .eh-hold__body {
    opacity: 1 !important;
    transform: none !important;
  }
}
