/*
 * motion.css — the home page's fixed backdrop, its transparent hero band and the sticky header.
 *
 * Nothing here animates. The backdrop does not move, the band that covers it is a wash over the
 * photograph, and the covering is simply the page scrolling: no scroll listener, no animation
 * timeline, no `prefers-reduced-motion` to honour, and nothing that can fail on a browser without
 * one of them.
 * See ADR 0011 and `CONTEXT.md` §6.
 *
 * Loaded on the front page only — `functions.php` enqueues it under `is_front_page()`.
 *
 * ⚠ Nothing in this file may put a `transform`, `filter` or `backdrop-filter` on the header. Core
 * renders the mobile menu overlay as a `position: fixed` child of the navigation block, and any of
 * those three makes the header its containing block — the overlay would then be trapped inside the
 * 125px bar instead of covering the screen.
 */

/* The wash: how much white sits over the photograph once a band is under way. Each band carries its
   **own** strength — they are separate surfaces, and since 2.1.2 they are separate numbers too:
   Latest Arrivals resolves to 60%, the Instagram band sits at 90%. `--dwd-wash-in` is the leading
   ramp, and it belongs to Latest Arrivals, the band that ramps. A band that resolved to opaque white
   would hide the photograph for everything below it. */
.dwd-sweep,
.dwd-wash {
  --dwd-wash: 60%;      /* white over the photograph */
  --dwd-wash-in: 18%;   /* how far down the Latest Arrivals band that strength is reached */
}

/* The Instagram band is the stronger of the two grounds. 90% is the strength its content area
   already composited to before 2.1.2 — Smash Balloon's own 75% ground over the band's 60% wash — so
   the feed renders exactly as it did and the two gutters come up to it instead of the box coming
   down. Flat: it has no leading ramp of its own, so it meets Latest Arrivals' 60% at the seam as a
   step, which is visible where the photograph behind the seam is dark (see 3 below). */
.dwd-wash {
  --dwd-wash: 90%;
}

/* 1. The backdrop — behind everything, never scrolling.

   It starts at the **header's bottom edge**, not at the viewport's top. The header is opaque white
   and sticky, so whatever is drawn under it is never seen: anchored at y 0 the photograph's own top
   — white space, and then the handlebar — sat behind the bar (measured on a 1623 × 835 window
   against the uncropped original: the first photograph pixel below the hairline was 16.4% down the
   frame, source y 235 of 1436, while the bar's topmost pixels are at y 77). The offset is the
   header's own height: the lockup's 60px and its two paddings. The paddings are **asymmetric** —
   `spacing|24` above the lockup, `spacing|8` below it — so the bar's air sits over the lockup
   instead of under the nav: 92px at a 1600px viewport, 88px at 1024px (it was 125px and 108px while
   the header carried the fluid `spacing|32`, and 93px/89px while the bar still drew the 1px hairline
   2.1.1 removed) . */
.dwd-backdrop {
  position: fixed;
  inset: calc(3.75rem + var(--wp--preset--spacing--24) + var(--wp--preset--spacing--8)) 0 0 0;
  z-index: 0;
  pointer-events: none;
}

.dwd-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hung from the top of that layer, so the photograph's frame begins at the header's bottom edge.
     The asset itself is cropped 62 source rows off the top (`1920 × 1162`, was `1920 × 1214`), which
     took the white above the handlebar from 5.4% of the frame to 1.03% — about 10px of air under the
     bar at a 1600px viewport, 6px at 1024px and 16px at 2560px, instead of 55px. The hero cover's old
     focal point (`50% 23%`) is gone
     with it: against the now-shorter frame it would crop the handlebar away again. At 1.63:1 against
     a wider layer some of the photo still has to go, and the bottom (wheels and shadow) is the
     cheaper end. */
  object-position: 50% 0;
}

/* The site's own content above it. The stacking context is what keeps every band over the backdrop;
   `position: relative` does not disturb the sticky header, which only cares about its scroll
   container. */
.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* 2. The hero band is the window onto the backdrop. Its `core/cover` carries no image of its own —
   the same photograph twice would crop differently (a 19/9 band against a full-viewport layer) and
   the picture would jump at the seam. Nothing to do here: an image-less cover paints nothing. */

/* 3. The bands' grounds are a **wash over the photograph, not lids on it**.
   * Latest Arrivals (`.dwd-sweep`): nothing at the band's own top edge — so the photograph is
     untouched right up to where the band begins, with no haze above it and no step at it — reaching
     `--dwd-wash` (60% white) `--dwd-wash-in` down the band and holding there. Unchanged by 2.1.2.
   * Instagram (`.dwd-wash`): a flat 90% — its own ground, stronger than the band above it, because
     it is the one that had a second ground painted inside it (see the plugin rule at the end of this
     block). Nothing resolves to opaque white, because that is what stopped the photograph at this
     point in the page — at 90% the photograph is still there under the band, faintly.
   ⚠ The two bands no longer meet at one strength, and the step at the seam between them is the price
   of that. It is invisible where the photograph is white behind the seam and visible where it is
   dark: 60% over the photograph's dark ground is `rgb(165, 161, 164)` and 90% is `rgb(232, 231, 232)`.
   To dissolve it instead, give the Instagram band a leading ramp the way Latest Arrivals has one —
   `background-image: linear-gradient(to bottom, color-mix(… base 60% …), color-mix(… base 90% …)
   var(--dwd-wash-in))` — which trades a flat 90% behind the feed's profile header for no edge.
   Both rates are shares of each band's own height, so they hold at every viewport.

   ⚠ A band's `background-color` has to become transparent for this. An element paints its own
   background *colour* under its own background *image*, so leaving `section-1`'s opaque white in
   place composites the wash over white and the photograph never appears — the first attempt at this
   looked exactly like the hard edge it was meant to replace. `@supports` keeps the fallback safe:
   without `color-mix()` there is no wash, and a transparent band would put the photograph behind a
   product grid with ink text over it — so solid white stays the default and the wash is the
   upgrade. */
@supports (background: color-mix(in srgb, red 30%, transparent)) {
  .wp-block-group.dwd-sweep {
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent),
      color-mix(in srgb, var(--wp--preset--color--base) var(--dwd-wash), transparent) var(--dwd-wash-in)
    );
    background-repeat: no-repeat;
  }

  .wp-block-group.dwd-wash {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) var(--dwd-wash), transparent);
    background-image: none;
  }

  /* ⚠ The plugin paints a ground *inside* that band, and it must not. `sbi-styles.min.css` gives
     `#sb_instagram.sbi_palette_light` `background-color: rgba(255, 255, 255, .75)`, on a box that is
     the band's own 1340px content width, so anything under the feed is composited twice: at the 60%
     wash the band carried until 2.1.2 that was **90%** white inside against **60%** in the two 130px
     gutters — a hard vertical edge at x 130 and x 1470, measured at a 1600px viewport over the same
     dark part of the photograph as `rgb(232, 231, 232)` against `rgb(165, 161, 164)` — and it is the
     second of those two numbers that 2.1.2 kept, by making the band itself 90% rather than by leaving
     the plugin to supply it (with the ground still on, the same box would now reach 97.5%). The wash
     is the band's ground, once. Scoped to the band, and a class past the plugin's single id, so the
     lightbox and any other feed keep the ground their own text needs. */
  .wp-block-group.dwd-wash #sb_instagram.sbi_palette_light {
    background-color: transparent;
  }
}

/* The kicker only gets its orange box inside a `section-4` band, and this band is white now. */
.dwd-sweep .is-style-text-kicker-2 {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}

/* 4. The header stays put, so Shop and About are always reachable. Opaque white, like the rest of
   the page below the hero; the photograph is never visible behind it. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}