/* =====================================================================
   KINDRED LIFE LAYER v1 — "give the sites life"
   A shared, drop-in ambient layer: painterly scene backgrounds, a soft
   gold light-drift, fine grain, reveal-on-scroll and card lift.
   No libraries, no external requests. The only network fetches are the
   scene WebPs, which live on the site's own domain.

   MARKUP CONTRACT
     <section class="life-scene life-hero">
       <div class="life-bg" data-scene="kenya" aria-hidden="true"></div>
       <div class="wrap"> …existing content… </div>
     </section>
   - .life-scene          any section that carries a scene
   - .life-hero           taller, stronger top mask (headline zone)
   - .life-band           shorter mid-page scene band
   - .life-country        compact scene card (country banners)
   - .life-bg             the scene layer; data-scene picks the artwork
   - data-lazy on .life-bg  scene image activates when near the viewport
                            (life.js); without JS the section still shows
                            the deep brand base + mask — readable, on-brand
   - .life-reveal         reveal-on-scroll (life.js adds .life-in);
                          content is visible by default if JS never runs
   - body.life-auto       life.js auto-tags .card and section h2 elements
                          with .life-reveal — the zero-markup adoption path
   - body.life-static     kill switch: no drift, no parallax, no reveal
                          animation (scenes still show)

   ASSET CONVENTION (every site, same paths)
     /assets/life/scene-<key>-800.webp   (mobile, target <= 180 KB)
     /assets/life/scene-<key>-1600.webp  (desktop / retina)
   Scene keys: hub · care · biz · print · africa-master · kenya ·
               uganda · tanzania · rwanda

   PALETTE
   The layer reads the host site's own variables first and falls back to
   the US brand (deep green #14231b, gold #D9B86A, cream #F7F3E8):
     --life-base  <- --slate-deep (Africa)  else #14231b
     --life-gold  <- --marigold   (Africa)  else #D9B86A
   So one file serves every Kindred site; a site re-skins the layer by
   defining those variables, never by editing this file.

   ADAPTIVITY (honest v1)
   Scene choice is DETERMINISTIC: the page's own data-scene (set by the
   site/arm/country) decides. No visitor data is read. A future variant
   (geo, returning visitor, time of day) slots in exactly one place:
   life.js's pickScene() hook, which may rewrite data-scene before the
   lazy loader arms — the CSS never changes.
   ===================================================================== */

:root{
  --life-base: var(--slate-deep, #14231b);
  --life-gold: var(--marigold, #d9b86a);
  --life-cream: #f7f3e8;
  --life-mask-strong: .88;   /* gradient opacity over the headline zone */
  --life-mask-mid: .62;
  --life-mask-fade: .18;     /* where the scene breathes through        */
}

/* ---------- scene host ---------- */
.life-scene{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--life-base);
  color: var(--life-cream);
}
.life-scene > *:not(.life-bg){ position: relative; z-index: 1; }
.life-scene h1, .life-scene h2, .life-scene h3{ color: var(--life-cream); }
.life-scene .lede, .life-scene p{ color: #efe9da; }
.life-scene .eyebrow{ color: var(--life-gold); }

/* gradient mask — text always sits on deep brand colour, never raw art.
   Top is strongest (headline zone), middle breathes, bottom melts into
   the page so sections join without a hard edge. */
.life-scene::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(16, 22, 18, var(--life-mask-strong)) 0%,
      rgba(16, 22, 18, var(--life-mask-mid)) 42%,
      rgba(16, 22, 18, .38) 72%,
      rgba(16, 22, 18, var(--life-mask-fade)) 100%);
}
/* soft gold light-drift + vignette (breathes very slowly) */
.life-scene::after{
  content: "";
  position: absolute; inset: -12% -6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 46% at 82% -4%, rgba(242, 196, 92, .34), rgba(242, 196, 92, 0) 62%),
    radial-gradient(ellipse 120% 90% at 50% 118%, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 55%);
  animation: lifeDrift 12s ease-in-out infinite alternate;
}
@keyframes lifeDrift{
  from{ opacity: .55; transform: translate3d(-1.6%, 0, 0) scale(1.02); }
  to  { opacity: .9;  transform: translate3d(1.6%, .6%, 0) scale(1.06); }
}

/* ---------- scene layer ---------- */
.life-bg{
  position: absolute;
  inset: -26px 0;              /* headroom for parallax-lite travel */
  z-index: -1;                 /* (host is isolated; mask ::before is 0) */
  background-size: cover;
  background-position: center 36%;
  background-repeat: no-repeat;
  will-change: transform;
}
/* fine gold grain over the artwork, under the mask's darkest zone */
.life-bg::after{
  content: "";
  position: absolute; inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.82 0 0 0 0 0.45 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scene artwork — mobile file first, retina/desktop via image-set,
   wide screens take the 1600 file outright */
.life-bg[data-scene="hub"]          { background-image: url("/assets/life/scene-hub-800.webp"); }
.life-bg[data-scene="care"]         { background-image: url("/assets/life/scene-care-800.webp"); }
.life-bg[data-scene="biz"]          { background-image: url("/assets/life/scene-biz-800.webp"); }
.life-bg[data-scene="print"]        { background-image: url("/assets/life/scene-print-800.webp"); }
.life-bg[data-scene="africa-master"]{ background-image: url("/assets/life/scene-africa-master-800.webp"); }
.life-bg[data-scene="kenya"]        { background-image: url("/assets/life/scene-kenya-800.webp"); }
.life-bg[data-scene="uganda"]       { background-image: url("/assets/life/scene-uganda-800.webp"); }
.life-bg[data-scene="tanzania"]     { background-image: url("/assets/life/scene-tanzania-800.webp"); }
.life-bg[data-scene="rwanda"]       { background-image: url("/assets/life/scene-rwanda-800.webp"); }
@supports (background-image: image-set(url("x.webp") 1x)){
  .life-bg[data-scene="hub"]          { background-image: image-set(url("/assets/life/scene-hub-800.webp") 1x, url("/assets/life/scene-hub-1600.webp") 2x); }
  .life-bg[data-scene="care"]         { background-image: image-set(url("/assets/life/scene-care-800.webp") 1x, url("/assets/life/scene-care-1600.webp") 2x); }
  .life-bg[data-scene="biz"]          { background-image: image-set(url("/assets/life/scene-biz-800.webp") 1x, url("/assets/life/scene-biz-1600.webp") 2x); }
  .life-bg[data-scene="print"]        { background-image: image-set(url("/assets/life/scene-print-800.webp") 1x, url("/assets/life/scene-print-1600.webp") 2x); }
  .life-bg[data-scene="africa-master"]{ background-image: image-set(url("/assets/life/scene-africa-master-800.webp") 1x, url("/assets/life/scene-africa-master-1600.webp") 2x); }
  .life-bg[data-scene="kenya"]        { background-image: image-set(url("/assets/life/scene-kenya-800.webp") 1x, url("/assets/life/scene-kenya-1600.webp") 2x); }
  .life-bg[data-scene="uganda"]       { background-image: image-set(url("/assets/life/scene-uganda-800.webp") 1x, url("/assets/life/scene-uganda-1600.webp") 2x); }
  .life-bg[data-scene="tanzania"]     { background-image: image-set(url("/assets/life/scene-tanzania-800.webp") 1x, url("/assets/life/scene-tanzania-1600.webp") 2x); }
  .life-bg[data-scene="rwanda"]       { background-image: image-set(url("/assets/life/scene-rwanda-800.webp") 1x, url("/assets/life/scene-rwanda-1600.webp") 2x); }
}
@media (min-width: 1100px){
  .life-bg[data-scene="hub"]          { background-image: url("/assets/life/scene-hub-1600.webp"); }
  .life-bg[data-scene="care"]         { background-image: url("/assets/life/scene-care-1600.webp"); }
  .life-bg[data-scene="biz"]          { background-image: url("/assets/life/scene-biz-1600.webp"); }
  .life-bg[data-scene="print"]        { background-image: url("/assets/life/scene-print-1600.webp"); }
  .life-bg[data-scene="africa-master"]{ background-image: url("/assets/life/scene-africa-master-1600.webp"); }
  .life-bg[data-scene="kenya"]        { background-image: url("/assets/life/scene-kenya-1600.webp"); }
  .life-bg[data-scene="uganda"]       { background-image: url("/assets/life/scene-uganda-1600.webp"); }
  .life-bg[data-scene="tanzania"]     { background-image: url("/assets/life/scene-tanzania-1600.webp"); }
  .life-bg[data-scene="rwanda"]       { background-image: url("/assets/life/scene-rwanda-1600.webp"); }
}

/* lazy scenes: no artwork until life.js arms them near the viewport —
   arming REMOVES the data-lazy attribute, so the scene rules above take
   over with no extra CSS. The deep base + mask still render meanwhile,
   so layout and text never wait on an image. */
.life-bg[data-lazy]{ background-image: none; }

/* ---------- variants ---------- */
.life-hero{ --life-mask-strong: .92; --life-mask-mid: .76; }
.life-hero .life-bg{ background-position: center 30%; }
.life-band{ --life-mask-strong: .8; --life-mask-mid: .6; --life-mask-fade: .3; }
.life-band .life-bg{ inset: -18px 0; }

/* compact country banner cards */
.life-country{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  background: var(--life-base);
  color: var(--life-cream);
  min-height: 118px;
}
.life-country .life-bg{ inset: -14px 0; background-position: center 42%; }
.life-country::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(16, 22, 18, .58) 0%, rgba(16, 22, 18, .42) 55%, rgba(16, 22, 18, .66) 100%);
}
.life-country > *:not(.life-bg){ position: relative; z-index: 1; }

/* ---------- reveal on scroll ---------- */
/* Hidden state exists ONLY when life.js is alive (.life-anim on <html>)
   and motion is welcome — no-JS and reduced-motion readers see content. */
.life-anim .life-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .25, 1);
}
.life-anim .life-reveal.life-in{ opacity: 1; transform: none; }
.life-anim .life-reveal[data-delay="1"]{ transition-delay: .08s; }
.life-anim .life-reveal[data-delay="2"]{ transition-delay: .16s; }
.life-anim .life-reveal[data-delay="3"]{ transition-delay: .24s; }

/* ---------- card lift (matches existing .card components) ---------- */
.life-on .card{
  transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine){
  .life-on .card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(10, 14, 11, .22);
  }
}
.life-on .card:active{ transform: translateY(-1px); }

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce){
  .life-scene::after{ animation: none; }
  .life-anim .life-reveal{ opacity: 1; transform: none; transition: none; }
  .life-on .card{ transition: none; }
  .life-on .card:hover{ transform: none; }
}
/* explicit kill switch (body.life-static) */
.life-static .life-scene::after{ animation: none; }
.life-static .life-bg{ transform: none !important; }