/* ==========================================================================
   Blush POC — the video's WORLD: field + edge strips (S7, restructured S9 R39)
   The video block carries its own world. The FIELD is the theme ground the
   video lives in — a layer OF THE HERO spanning the full viewport width, the
   video's height, and a melt apron that fades the world out below the video's
   bottom edge. Because it is part of the block, the pin and the exit lag move
   the world WITH the video — structurally; no script measures or follows
   anything, and the page beneath (css/base.css) is plain light. The three
   edge strips melt the video's own edges into that field. Every colour
   derives from --background-theme; decorative + pointer-events:none
   throughout.
   ========================================================================== */

/* Shared plumbing for every layer of the video's world (field + strips). */
.hero__blend {
  --blend-strip: clamp(32px, 7vw, 96px);   /* local layout value, NOT a token */
  position: absolute;
  z-index: 2;                              /* strips: over the canvas (z:1);
                                              the field alone drops below it */
  pointer-events: none;
}

/* (0) The FIELD: theme ground + melt apron, riding the video block. */
.hero__blend--field {
  z-index: 0;                    /* the ground BEHIND the canvas (canvas z:1) */
  inset-block-start: 0;
  /* Full-bleed from the centered container: the (100% − 100vw)/2 escape — the
     scrollbar's few px of overhang are clipped by html { overflow-x: clip }
     (css/base.css, written for exactly these layers). Mobile overrides with
     the engine-proof container+token escape (WebKit caveat, R28 — below). */
  inset-inline: calc((100% - 100vw) / 2);
  /* World = the video's own height (100% of .hero); apron = one melt span
     below its bottom edge, fading to the light page beneath. */
  block-size: calc(100% + var(--melt-span));
  background: linear-gradient(to bottom,
      var(--background-theme) calc(100% - var(--melt-span)),
      transparent);
}

/* (1–3) Edge strips: melt the video's left/right/bottom edges into the theme
   colour so the rectangular video frame dissolves into its surroundings.
   Visible from load — blending is not scroll-dependent. */
.hero__blend--left {
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--blend-strip);
  background: linear-gradient(to right, var(--background-theme), transparent);
}
.hero__blend--right {
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--blend-strip);
  background: linear-gradient(to left, var(--background-theme), transparent);
}
.hero__blend--bottom {
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--blend-strip);
  background: linear-gradient(to top, var(--background-theme), transparent);
}

/* Mobile: the portrait cover-crop already runs edge-to-edge — the left/right
   strips would just band the video (operator, S9). Backdrop + bottom remain;
   the bottom strip goes full-bleed to track the full-bleed mobile splash. */
@media (max-width: 767px) {
  .hero__blend--left,
  .hero__blend--right { display: none; }
  /* Full-bleed via container+token, not %-of-viewport — WebKit's viewport
     resolution shifted this +20px on the iPhone (see hero.css). The hero's
     box is inset exactly one gutter per side on mobile, so container + two
     gutters == the viewport, on every engine. */
  .hero__blend--bottom {
    inset-inline-start: calc(-1 * var(--space-20));
    inline-size: calc(100% + 2 * var(--space-20));
  }
  .hero__blend--field { inset-inline: calc(-1 * var(--space-20)); }
}

/* Desktop: the video is right-aligned inside .hero at --hero-video-w (set in
   css/hero.css) — anchor the STRIPS to the VIDEO box, not the section, so they
   keep tracking the video when a short viewport narrows it. (The backdrop stays
   full-bleed — it is the environment, not a video-edge melt.) */
@media (min-width: 768px) {
  .hero__blend--bottom {
    inset-inline: auto 0;
    inline-size: var(--hero-video-w, 100%);
  }
  .hero__blend--left {
    inset-inline-start: auto;
    /* strip's right side sits --blend-strip in from the video's LEFT edge */
    inset-inline-end: calc(var(--hero-video-w, 100%) - var(--blend-strip));
  }
}