/* =====================================================================================================
   hero-styles.css: the four named photo-behind-the-words hero styles (docs/HERO_STYLES.md 01-04).
   Copy into the demo (site/css/), restyle with tokens, never edit the layer logic per demo.

   Use on a STILL-PHOTO hero only. A bespoke hero (video, interactive scene, drawn graphic) stays bespoke.
   Pick the style with  <section class="hero" data-hero data-hero-style="depth-blur">  :
     horizon-fade · side-bleed · spotlight · depth-blur

   The two hard rules (HERO_STYLES.md) are built in, but only the demo's framing can satisfy rule 1:
     1. No gap between the subject and the words: subject's lowest point to the eyebrow <= 24px at 390x844.
        Phones stack photo and words in one column and the words overlap the photo by --hero-overlap,
        so the photo always ends just under the words, whatever the headline's length.
        Tune --hero-pos-m / --hero-zoom-m per photo until the subject sits on the words.
     2. The blend is a long eased dissolve, never a line: every photo edge uses a 5-stop eased mask over
        --hero-fade (default 45% of the box); the blurred copy under the sharp photo shares its exact box
        and object-position, so the subject dissolves into itself.

   Markup (see demo.html; the hero-swap component swaps every [data-hero-layer] together):
     <section class="hero" data-hero data-hero-style="depth-blur" data-hero-tone="light">
       <div class="hero-bg" aria-hidden="true"><img data-hero-layer="blur" src="img/x-480.webp" alt=""></div>
       <div class="hero-photo">
         <div class="hero-under" aria-hidden="true"><img data-hero-layer="blur" src="img/x-480.webp" alt=""></div>
         <div class="hero-sharp"><picture>
           <source data-hero-layer="wide" media="(min-width: 900px)" srcset="..." sizes="56vw">
           <img data-hero-layer="sharp" src="..." srcset="..." sizes="100vw" width height alt fetchpriority="high">
         </picture></div>
       </div>
       <div class="hero-veil" aria-hidden="true"></div>
       <div class="hero-copy"> eyebrow, h1, tagline, buttons, review line </div>
       <p class="hero-caption" data-hero-caption>...</p>
       <div class="hs" data-hero-swap>...</div>          (optional: hero-swap component)
     </section>

   Tokens (set on :root in the demo): colours and the header height.
   Framing (set on .hero, or per photo with the switcher's data-frame; NOT on :root):
     --hero-pos-m / --hero-pos-d        object-position of the sharp photo AND its aligned blurred copy
     --hero-zoom-m / --hero-zoom-d      >1 enlarges the photo from its top edge, cropping the floor (default 1)
     --hero-bg-pos-m / --hero-bg-pos-d  depth blur only: framing of the full-bleed blurred backdrop
     --hero-box-d                       laptop: where the photo box starts from the left (38-46%)
     --hero-overlap                     phone: how far the words overlap the bottom of the photo box
     --hero-fade                        length of the vertical dissolve, % of the photo box
     --hero-fade-x                      length of the sideways dissolve on laptops, % of the photo box
     --hero-spot-m / -d, --hero-spot-size-m / -d, --hero-spot-edge   spotlight: centre, size, edge opacity
     --hero-spot-box-m                  spotlight (phone): the photo box as inset (top sides bottom), wider than the screen
     --hero-bleed-angle, --hero-bleed-start                          side bleed (phone): slant and clear run
   Breakpoint: 900px, the same as the wide <source media> the switcher reads. Change both together.
   ===================================================================================================== */

:where(:root) {
  --hero-dark: #0E0F11;          /* ground of the dark styles (horizon fade, spotlight) */
  --hero-light: #F2F2EF;         /* ground and frost of the light styles (side bleed, depth blur) */
  --hero-on-dark: #FFFFFF;       /* text on the dark styles */
  --hero-on-light: #121417;      /* text on the light styles */
  --hero-top: 76px;              /* header height + a little: where the words and the switcher start */
  --hero-gut: clamp(16px, 4.5vw, 56px);
  --hero-max: 1280px;
  --hero-copy-max: 560px;
}

/* framing defaults, zero specificity: a demo's .hero rule or the switcher's inline data-frame wins */
:where(.hero[data-hero-style]) {
  --hero-pos-m: 50% 70%; --hero-pos-d: 50% 65%;
  --hero-zoom-m: 1; --hero-zoom-d: 1;
  --hero-bg-pos-m: 50% 100%; --hero-bg-pos-d: 50% 15%;
  --hero-box-d: 46%;
  --hero-overlap: 96px;
  --hero-photo-min: 260px;
  --hero-fade: 45%;
  --hero-fade-x: 24%;
}
:where(.hero[data-hero-style="horizon-fade"]) { --hero-box-d: 38%; --hero-fade-x: 34%; }
/* side-bleed: on phones the photo starts under the review line, never behind it (batch 7: 56px overlap put the
   review line over the photo on 4 of 5 demos; Ronaldo's 0 / 2% / 30% matched the reference sheet) */
:where(.hero[data-hero-style="side-bleed"]) { --hero-overlap: 0px; --hero-fade: 30%; --hero-fade-x: 20%; --hero-bleed-angle: 172deg; --hero-bleed-start: 2%; }
:where(.hero[data-hero-style="spotlight"]) { --hero-box-d: 36%; --hero-fade-x: 30%; --hero-pos-m: 50% 62%; --hero-spot-box-m: 16% -6% 20%;
  --hero-spot-m: 50% 60%; --hero-spot-d: 52% 62%; --hero-spot-size-m: 70% 40%; --hero-spot-size-d: 52% 56%; --hero-spot-edge: .6; }
:where(.hero[data-hero-style="depth-blur"]) { --hero-overlap: 110px; }

/* ---------- shared layer stack ---------- */
.hero[data-hero-style] {
  position: relative; isolation: isolate;
  overflow-x: clip;                /* clip sideways only, so an open switcher panel is never cut off */
  display: flex; flex-direction: column;
  min-height: var(--hero-h, 100svh);
  background: var(--hero-ground); color: var(--hero-ink);
}
.hero[data-hero-style] .hero-bg,
.hero[data-hero-style] .hero-under { display: none; }
.hero[data-hero-style] .hero-photo { position: relative; z-index: 1; flex: 1 1 auto; min-height: var(--hero-photo-min); }
.hero[data-hero-style] .hero-sharp,
.hero[data-hero-style] .hero-under { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: var(--_mask, none); mask-image: var(--_mask, none); }
/* Scoped to the photo layers on purpose. Never write `.hero img { position:absolute }`: it hits the
   switcher's thumbnails, which live inside the hero. */
.hero[data-hero-style] .hero-sharp img,
.hero[data-hero-style] .hero-sharp video,
.hero[data-hero-style] .hero-under img {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * var(--hero-zoom-m));
  max-width: none; margin: 0; object-fit: cover; object-position: var(--hero-pos-m);
}
.hero[data-hero-style] .hero-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero[data-hero-style] .hero-copy { position: relative; z-index: 3; margin: calc(-1 * var(--hero-overlap)) var(--hero-gut) 0; padding-bottom: 20px; }
.hero[data-hero-style] .hero-caption { position: absolute; z-index: 4; left: var(--hero-gut); right: calc(var(--hero-gut) + 56px);
  top: calc(var(--hero-top) + 12px); margin: 0; font-size: 12px; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.hero[data-hero-style="side-bleed"] .hero-caption,
.hero[data-hero-style="spotlight"] .hero-caption { display: none; }   /* words sit at the top on phones */
.hero[data-hero-tone="light"] .hero-caption { color: var(--hero-on-light); text-shadow: 0 0 6px color-mix(in srgb, var(--hero-light) 90%, transparent), 0 0 2px var(--hero-light); }

/* ---------- 01 · Horizon fade (dark): the photo sinks into the ground; the words stand on it ---------- */
.hero[data-hero-style="horizon-fade"] { --hero-ground: var(--hero-dark); --hero-ink: var(--hero-on-dark); }
.hero[data-hero-style="horizon-fade"] .hero-sharp {
  --_mask: linear-gradient(180deg, #000 calc(100% - var(--hero-fade)), rgba(0,0,0,.85) calc(100% - var(--hero-fade) * .7),
           rgba(0,0,0,.5) calc(100% - var(--hero-fade) * .4), rgba(0,0,0,.15) calc(100% - var(--hero-fade) * .13), transparent 100%); }
.hero[data-hero-style="horizon-fade"] .hero-veil {   /* keeps the header legible over the photo */
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-dark) 72%, transparent) 0, color-mix(in srgb, var(--hero-dark) 42%, transparent) 70px,
              color-mix(in srgb, var(--hero-dark) 12%, transparent) 125px, transparent 165px); }

/* ---------- 02 · Side bleed (light): a page-colour panel dissolves into the photo; words on the panel ---------- */
.hero[data-hero-style="side-bleed"] { --hero-ground: var(--hero-light); --hero-ink: var(--hero-on-light); }
.hero[data-hero-style="side-bleed"] .hero-copy { order: -1; margin: 0 var(--hero-gut); padding: calc(var(--hero-top) + 52px) 0 0; }
.hero[data-hero-style="side-bleed"] .hero-photo { margin-top: calc(-1 * var(--hero-overlap)); }
.hero[data-hero-style="side-bleed"] .hero-sharp {
  --_mask: linear-gradient(var(--hero-bleed-angle), transparent 0, transparent var(--hero-bleed-start),
           rgba(0,0,0,.15) calc(var(--hero-bleed-start) + var(--hero-fade) * .13), rgba(0,0,0,.5) calc(var(--hero-bleed-start) + var(--hero-fade) * .4),
           rgba(0,0,0,.85) calc(var(--hero-bleed-start) + var(--hero-fade) * .7), #000 calc(var(--hero-bleed-start) + var(--hero-fade))); }

/* ---------- 03 · Spotlight (dark): the subject in a pool of light; the surroundings stay as dim context ---------- */
.hero[data-hero-style="spotlight"] { --hero-ground: var(--hero-dark); --hero-ink: var(--hero-on-dark); }
.hero[data-hero-style="spotlight"] .hero-photo { position: absolute; inset: var(--hero-spot-box-m); min-height: 0; }
.hero[data-hero-style="spotlight"] .hero-sharp {
  /* the pool of light: edges stay at --hero-spot-edge (60%) so the surroundings read as dim context, never a
     black tunnel; the box's top and bottom dissolve into the dark where the words live (sides are off-screen) */
  --_mask: radial-gradient(ellipse var(--hero-spot-size-m) at var(--hero-spot-m), #000 0, #000 42%,
           rgba(0,0,0,calc(1 - (1 - var(--hero-spot-edge)) * .3)) 60%, rgba(0,0,0,calc(1 - (1 - var(--hero-spot-edge)) * .7)) 80%,
           rgba(0,0,0,var(--hero-spot-edge)) 100%),
           linear-gradient(180deg, transparent 0, rgba(0,0,0,.15) 3%, rgba(0,0,0,.5) 9%, rgba(0,0,0,.85) 15%, #000 21%,
           #000 74%, rgba(0,0,0,.85) 81%, rgba(0,0,0,.5) 89%, rgba(0,0,0,.15) 96%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero[data-hero-style="spotlight"] .hero-veil {
  background: radial-gradient(ellipse 34% 70% at 50% 0, rgba(255,255,255,.07), transparent 70%),
              linear-gradient(180deg, color-mix(in srgb, var(--hero-dark) 80%, transparent) 0, color-mix(in srgb, var(--hero-dark) 55%, transparent) 16%,
                color-mix(in srgb, var(--hero-dark) 20%, transparent) 30%, transparent 40%),
              linear-gradient(0deg, color-mix(in srgb, var(--hero-dark) 88%, transparent) 0, color-mix(in srgb, var(--hero-dark) 60%, transparent) 16%,
                color-mix(in srgb, var(--hero-dark) 22%, transparent) 30%, transparent 42%); }
.hero[data-hero-style="spotlight"] .hero-copy { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0 var(--hero-gut); padding: calc(var(--hero-top) + 52px) 0 20px; }
/* headline at the top, the rest pushed to the bottom so the subject stays in the light between them
   (the element straight after the <h1>, or whichever carries data-hero-push) */
@media (max-width: 899.98px) {
  .hero[data-hero-style="spotlight"] .hero-copy > h1 + *,
  .hero[data-hero-style="spotlight"] .hero-copy > [data-hero-push] { margin-top: auto; }
}

/* ---------- 04 · Depth blur (light): the photo goes out of focus where the words sit ---------- */
.hero[data-hero-style="depth-blur"] { --hero-ground: var(--hero-light); --hero-ink: var(--hero-on-light); }
.hero[data-hero-style="depth-blur"] .hero-bg { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero[data-hero-style="depth-blur"] .hero-bg img { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
  max-width: none; margin: 0; object-fit: cover; object-position: var(--hero-bg-pos-m); filter: blur(26px) saturate(1.05) brightness(.9); transform: scale(1.1); }
.hero[data-hero-style="depth-blur"] .hero-under { display: block;
  --_mask: linear-gradient(180deg, #000 60%, rgba(0,0,0,.8) 72%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.12) 94%, transparent 100%); }
.hero[data-hero-style="depth-blur"] .hero-under img { filter: blur(20px) saturate(1.05) brightness(.92); }
.hero[data-hero-style="depth-blur"] .hero-sharp {
  --_mask: linear-gradient(180deg, #000 calc(100% - var(--hero-fade)), rgba(0,0,0,.85) calc(100% - var(--hero-fade) * .7),
           rgba(0,0,0,.5) calc(100% - var(--hero-fade) * .4), rgba(0,0,0,.15) calc(100% - var(--hero-fade) * .13), transparent 100%); }
.hero[data-hero-style="depth-blur"] .hero-veil {   /* a light band behind the header */
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-light) 88%, transparent) 0, color-mix(in srgb, var(--hero-light) 55%, transparent) 70px,
              color-mix(in srgb, var(--hero-light) 18%, transparent) 105px, transparent 130px); }
.hero[data-hero-style="depth-blur"] .hero-copy::before {   /* the frost: ramps over ~220px, dense only behind the text */
  content: ""; position: absolute; z-index: -1; inset: -70px calc(-1 * var(--hero-gut)) -20px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--hero-light) 18%, transparent) 35px, color-mix(in srgb, var(--hero-light) 40%, transparent) 70px,
              color-mix(in srgb, var(--hero-light) 62%, transparent) 110px, color-mix(in srgb, var(--hero-light) 78%, transparent) 160px,
              color-mix(in srgb, var(--hero-light) 86%, transparent) 220px); }

/* ---------- laptops: the photo box takes the right of the screen, the words sit on the left ---------- */
@media (min-width: 900px) {
  .hero[data-hero-style] { display: block; min-height: 0; height: var(--hero-h-d, clamp(620px, 100svh, 940px)); }
  .hero[data-hero-style] .hero-photo { position: absolute; top: 0; bottom: 0; right: 0; left: var(--hero-box-d); min-height: 0; margin: 0; }
  .hero[data-hero-style] .hero-sharp img,
  .hero[data-hero-style] .hero-sharp video,
  .hero[data-hero-style] .hero-under img { height: calc(100% * var(--hero-zoom-d)); object-position: var(--hero-pos-d); }
  .hero[data-hero-style] .hero-copy { position: absolute; z-index: 3; top: 50%; transform: translateY(-46%); right: auto;
    left: max(var(--hero-gut), calc((100% - var(--hero-max)) / 2)); width: calc(var(--hero-box-d) - max(var(--hero-gut), calc((100% - var(--hero-max)) / 2)) + 4%);
    max-width: var(--hero-copy-max); margin: 0; padding: 0; display: block; }
  .hero[data-hero-style] .hero-caption,
  .hero[data-hero-style="side-bleed"] .hero-caption,
  .hero[data-hero-style="spotlight"] .hero-caption { display: block; top: auto; bottom: 14px; left: auto; right: var(--hero-gut); max-width: 40ch; text-align: right; }

  /* sideways eased dissolve, shared by every style's sharp photo */
  .hero[data-hero-style] .hero-sharp {
    --_x: linear-gradient(90deg, transparent 0, rgba(0,0,0,.15) calc(var(--hero-fade-x) * .13), rgba(0,0,0,.5) calc(var(--hero-fade-x) * .4),
          rgba(0,0,0,.85) calc(var(--hero-fade-x) * .7), #000 var(--hero-fade-x)); }

  .hero[data-hero-style="horizon-fade"] .hero-sharp {
    --_mask: var(--_x), linear-gradient(180deg, #000 0, #000 62%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 83%, rgba(0,0,0,.15) 93%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero[data-hero-style="horizon-fade"] .hero-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--hero-dark) 72%, transparent) 0,
      color-mix(in srgb, var(--hero-dark) 30%, transparent) 80px, transparent 130px); }
  .hero[data-hero-style="horizon-fade"] .hero-copy { top: auto; bottom: 56px; transform: none; }

  .hero[data-hero-style="side-bleed"] .hero-sharp { --_mask: var(--_x); }
  .hero[data-hero-style="side-bleed"] .hero-veil {   /* the page colour settles over the photo's top (header) and bottom edges */
    background: linear-gradient(180deg, color-mix(in srgb, var(--hero-light) 92%, transparent) 0, color-mix(in srgb, var(--hero-light) 50%, transparent) 70px,
                  color-mix(in srgb, var(--hero-light) 14%, transparent) 115px, transparent 140px),
                linear-gradient(0deg, var(--hero-light) 0, color-mix(in srgb, var(--hero-light) 60%, transparent) 6%, color-mix(in srgb, var(--hero-light) 20%, transparent) 12%, transparent 17%); }

  .hero[data-hero-style="spotlight"] .hero-photo { inset: 0 0 0 var(--hero-box-d); }
  .hero[data-hero-style="spotlight"] .hero-sharp {
    --_mask: var(--_x), radial-gradient(ellipse var(--hero-spot-size-d) at var(--hero-spot-d), #000 0, #000 42%,
             rgba(0,0,0,calc(1 - (1 - var(--hero-spot-edge)) * .3)) 60%, rgba(0,0,0,calc(1 - (1 - var(--hero-spot-edge)) * .7)) 80%,
             rgba(0,0,0,var(--hero-spot-edge)) 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero[data-hero-style="spotlight"] .hero-veil {
    background: radial-gradient(ellipse 22% 70% at 68% 0, rgba(255,255,255,.07), transparent 70%),
                linear-gradient(90deg, color-mix(in srgb, var(--hero-dark) 70%, transparent) 0, color-mix(in srgb, var(--hero-dark) 40%, transparent) 30%, transparent 48%); }

  .hero[data-hero-style="depth-blur"] .hero-bg img { object-position: var(--hero-bg-pos-d); }
  .hero[data-hero-style="depth-blur"] .hero-sharp { --_mask: var(--_x); }
  .hero[data-hero-style="depth-blur"] .hero-under {
    --_mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) 8%, rgba(0,0,0,.55) 20%, rgba(0,0,0,.85) 32%, #000 42%); }
  .hero[data-hero-style="depth-blur"] .hero-veil {
    background: linear-gradient(180deg, color-mix(in srgb, var(--hero-light) 85%, transparent) 0, color-mix(in srgb, var(--hero-light) 40%, transparent) 75px, transparent 130px),
                linear-gradient(90deg, color-mix(in srgb, var(--hero-light) 74%, transparent) 0, color-mix(in srgb, var(--hero-light) 62%, transparent) 30%,
                  color-mix(in srgb, var(--hero-light) 40%, transparent) 42%, color-mix(in srgb, var(--hero-light) 14%, transparent) 50%, transparent 56%); }
  .hero[data-hero-style="depth-blur"] .hero-copy::before { content: none; }
}