/* ===========================================================================
   Hipcamp LIFE OVERLAY — hero-life.css
   ---------------------------------------------------------------------------
   The motion half of the AI-image hero (hero_prompt.py owns the still image).
   The hero is TWO layers:
     (1) a still background IMAGE (an AI-generated photo of the property) — set
         as the hero <section>'s background; carries the emotional impression.
     (2) THIS overlay — a TRANSPARENT <canvas> absolutely positioned over the
         section, owning ALL motion: fireflies, drifting leaves, gentle wind,
         soft light motes. Adds the living magic without touching the image.

   This file styles the canvas + the title overlay; hero-life.js paints the
   canvas. Scoped under [data-hero-life] so it co-loads with any design
   envelope without collision. The design envelope owns palette/type tokens;
   this reads them via CSS vars with safe fallbacks so it inherits character.

   The canvas is purely additive — it never paints the image. If the JS or the
   canvas is missing, the hero degrades to the still image alone (fail-quiet).

   Markup the design envelope provides (the build drops the title into
   .hl-title as ordinary child HTML):

     <section data-hero-life class="hero-life" style="--hl-image:url(...)">
       <div class="hl-bg"></div>            <!-- the still IMAGE layer -->
       <canvas class="hl-canvas"></canvas>  <!-- THIS overlay: all motion -->
       <div class="hl-overlay">
         <div class="hl-title"> ...title... </div>
       </div>
     </section>
   =========================================================================== */

[data-hero-life]{
  /* Design-envelope-overridable tokens (warm dusk defaults). */
  --hl-title-color:  var(--hero-title-color, #fdf3e2);
  --hl-title-shadow: var(--hero-title-shadow, 0 2px 28px rgba(8,12,20,.62));
  --hl-scrim:        var(--hero-scrim, 8,12,20);   /* rgb triple for the legibility scrim */
  --hl-radius:       var(--hero-radius, 0);    /* full-bleed: NO frame by default (pixel-Window letterbox retired 2026-06-03) */

  position:relative;
  display:block;
  width:100%;                  /* full-bleed — no max-width cap. A real photo bleeds; only pixel art needed a frame. */
  height:var(--hero-height, clamp(560px, 84vh, 940px));  /* tall immersive hero (JS sizes the canvas to this box) */
  overflow:hidden;
  border-radius:var(--hl-radius);
  background:#0a0e16;          /* shows through if the image fails to load */
  isolation:isolate;          /* contain the canvas 'lighter' blend to this stack */
}

/* The still IMAGE layer (layer 1). A very slow, tasteful breathing parallax
   (<=1.5% scale) is applied here in JS via transform for life — NOT in CSS, so
   it stays in lockstep with the wind envelope and respects reduced-motion. */
[data-hero-life] .hl-bg{
  position:absolute; inset:0; z-index:0;
  background-image:var(--hl-image, none);
  background-size:cover;
  background-position:center 62%;     /* bias toward the horizon glow / treeline */
  transform-origin:center 60%;
  will-change:transform;
  /* a hair of saturation/contrast lift makes a dusk image read richer under the glow */
  filter:saturate(1.04) contrast(1.02);
}

/* The MOTION overlay (layer 1.5) — transparent canvas, all life lives here.
   'lighter' blend lets firefly/mote glow add luminously over the dusk image;
   the JS draws leaves with normal compositing so they stay opaque + readable. */
[data-hero-life] canvas.hl-canvas{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  display:block;
  pointer-events:none;        /* never intercept clicks meant for the page */
}

/* The title overlay (layer 2) — sits over the left negative space the image
   reserved (hero_prompt.py composes a text-safe left third). A soft directional
   scrim only where the text lives, so the rest of the image stays clean. */
[data-hero-life] .hl-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  padding:clamp(22px,4vw,64px);
  /* scrim weighted to the LEFT (where the title sits), fading out by mid-frame */
  background:linear-gradient(90deg,
    rgba(var(--hl-scrim),.50) 0%,
    rgba(var(--hl-scrim),.30) 26%,
    rgba(var(--hl-scrim),.06) 52%,
    rgba(var(--hl-scrim),0)   72%);
  pointer-events:none;
}
[data-hero-life] .hl-overlay a,
[data-hero-life] .hl-overlay button{ pointer-events:auto; }

[data-hero-life] .hl-title{
  max-width:min(46%, 520px);
  color:var(--hl-title-color);
  text-shadow:var(--hl-title-shadow);
}
[data-hero-life] .hl-title h1{
  margin:0;
  font-family:var(--hero-title-font, "Cormorant Garamond", Georgia, "Times New Roman", serif);
  font-weight:var(--hero-title-weight, 500);
  font-size:clamp(2.2rem, 4.6vw, 4.1rem);
  line-height:1.04;
  letter-spacing:.005em;
}
[data-hero-life] .hl-title .hl-kicker{
  display:block;
  margin:0 0 .7em;
  font-family:var(--hero-meta-font, "Inter", system-ui, sans-serif);
  font-weight:600;
  font-size:clamp(.66rem,1vw,.78rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--hero-kicker-color, rgba(247,221,170,.92));
  text-shadow:0 1px 14px rgba(8,12,20,.55);
}
[data-hero-life] .hl-title .hl-sub{
  margin:.85em 0 0;
  font-family:var(--hero-meta-font, "Inter", system-ui, sans-serif);
  font-weight:400;
  font-size:clamp(.92rem,1.45vw,1.12rem);
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--hero-sub-color, rgba(253,243,226,.86));
  text-shadow:0 1px 18px rgba(8,12,20,.55);
}

/* Mobile: title still reads over a narrower frame; let it use more width. */
@media (max-width:640px){
  [data-hero-life]{ height:100svh; min-height:560px; border-radius:0; }   /* FULL-SCREEN on mobile — the place fills the phone */
  [data-hero-life] .hl-overlay{
    align-items:flex-end;                     /* title drops toward the lower third */
    padding-bottom:clamp(26px,7vw,44px);
    /* on a tall frame, scrim from the BOTTOM where the title now sits */
    background:linear-gradient(0deg,
      rgba(var(--hl-scrim),.58) 0%,
      rgba(var(--hl-scrim),.34) 22%,
      rgba(var(--hl-scrim),.04) 46%,
      rgba(var(--hl-scrim),0)   64%);
  }
  [data-hero-life] .hl-title{ max-width:100%; }
}

/* Reduced motion: hero-life.js paints ONE calm still frame (a few static
   fireflies mid-glow) and does not animate; the breathing parallax is also
   frozen. Nothing here needs a motion suppressor — the stillness is in JS. */