/* ==========================================================================
   KodeYak — the hero backdrop
   Chunk 1 of the rebuild: the background, and nothing else. Self-contained on
   purpose, so it can be judged, tuned or thrown away without touching
   the rest of the system. Colour and motion come from tokens.css — never a raw hex here.

   2026-08-04, in two passes. First the six-plate planet composite and its
   pointer/scroll parallax came out and a single rendered image went in: the
   plate slack, the aspect-scaled oversize, the drift budget and the whole
   "which way is safe to move" argument went with them, because with one image
   there is nothing to move relative to anything else and the depth cue is in
   the pixels. Then the 16:9 band itself went, along with its aspect-ratio, its
   min-height and its soft bottom edge — the artwork is now pinned to the
   viewport and the aperture in hero.css is what ends it.

   So this file is down to two decisions: how the artwork is anchored, and which
   slice of it survives the crop. Everything the artwork sits UNDER is hero.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The backdrop paints in the NEGATIVE z-index layer. Painting order puts
   block backgrounds *after* negative-z children, so a background on <body>
   would cover it — the ground colour has to live on <html> instead. That is
   what the .scene-lab class is for. */
html.scene-lab { background: var(--ky-glass-950); }
html.scene-lab body { background: transparent; margin: 0; }

.ky-backdrop {
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Pinning mode -------------------------------------------------------
   Three anchorings, switched by data-pin on <html> in page.njk, so they can be
   compared without editing CSS. They all now draw the SAME image — the mode
   used to pick an artwork set too, back when there were two cuts of the planet.
   Everything else about the backdrop is identical between them.               */

/* HERO: the artwork is PINNED to a BAND across the top of the viewport, and the
   page scrolls over it. This is the stage half of the aperture in hero.css —
   the artwork holds still while the rail rises across it, which is the entire
   effect. `fixed` rather than in flow is what makes that possible: a band in
   flow scrolls away at the same rate as the rail, and two things moving
   together cannot close on each other.

   A BAND, not the whole viewport. Pinning to `inset: 0` was the first version
   and it cost two things: on any window narrower than the artwork's ratio the
   image cover-cropped hard, throwing away the composition; and the paper could
   not start until a full screen had gone by. The band is --ky-hero-band (see
   hero.css), derived from the chosen cut's own aspect, so the whole picture
   shows AND there is paper below it on first paint.

   No mask. The old version needed a soft bottom edge to keep its cut into Ink
   from reading as a seam; there is no cut any more, because the rail is what
   ends the artwork now — a drawn edge with a lit hairline, which is a better
   answer than a fade in every way. --ky-hero-fade went with it. */
[data-pin="hero"] .ky-backdrop {
  position: fixed;
  inset: 0 0 auto;
  height: var(--ky-hero-band);
}

/* VIEWPORT: fixed behind everything, never moves; content scrolls over it. */
[data-pin="viewport"] .ky-backdrop { position: fixed; inset: 0; }

/* PAGE: anchored to the bottom of the DOCUMENT and scrolling with it, so the
   page opens on plain ground and you scroll down into the artwork.

   Height comes from aspect-ratio rather than a vw calculation: `100vw`
   includes the scrollbar gutter and would push a few pixels of horizontal
   overflow.

   The absolute position needs a positioned ancestor that spans the document —
   without it, `bottom: 0` resolves against the initial containing block, which
   is only viewport-tall, and the artwork would land one screen down instead of
   at the end of the page. */
html[data-pin="page"] body { position: relative; }
[data-pin="page"] .ky-backdrop {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;   /* same reason as hero — keep aspect-ratio computing height only */
  aspect-ratio: var(--ky-hero-aspect, 1920 / 1080);
  height: var(--ky-backdrop-height, auto);
  /* Soft top edge, for the same reason the hero band has a soft bottom one:
     this artwork has no dark edge to hide a seam in. Longer than the hero's
     fade because there is no plate sitting over this boundary. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(80px, 14vh, 260px));
          mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(80px, 14vh, 260px));
}

/* The image fills whatever box the mode gave it. No slack, no transform, no
   will-change: the parallax that needed all three is gone, so the element is
   an ordinary cover-fit image again.

   Nothing here may grow a `transform`. Same rule as the grounds in weave.css,
   for a different reason: a transformed backdrop becomes a containing block
   for fixed descendants and the masthead would start scrolling with the page. */
.ky-backdrop__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* WHICH SLICE SURVIVES THE CROP. The stage is the viewport and the artwork is
     16:9, so anything narrower than 16:9 — which is most windows and every
     phone — throws away width. This decides what the composition even is there.

     60%, biased right of centre: the subject (the glass sphere, the wooden arm
     and the lit dome) runs from the middle to the right, and the far left is
     empty blue void. Pinned harder right the crop becomes nothing but wood and
     highlight — the dark-to-light diagonal that gives the image its structure
     disappears, and that diagonal is also what carries the masthead across the
     top and the display panel across the lower left. 60% keeps void in the
     upper left, the sphere and arm through the middle, the dome at the right. */
  object-position: var(--ky-hero-focus, 60%) 50%;
}

/* ---- Scroll height ------------------------------------------------------
   Blank spacers, purely so there is something to scroll against a fixed
   backdrop. No copy, no boxes — the divider is just a hairline marking each
   screen boundary so scroll position is legible. All of this is scaffolding
   and comes out when real sections roll in.                                 */

.spacer {
  height: 100vh;
  border-bottom: 1px solid rgba(var(--ky-rgb-bone), .14);
}
.spacer:last-child { border-bottom: 0; }