/* ============================================================================
   AMILLATI & CO - the hero media on the three content pages (coaching, consulting, community)
   ============================================================================
   HAND-WRITTEN, 20 Sep 2026. Sits after pages.css. site.css is generated from index.html and is
   never hand-edited; nothing here belongs in it. This file owns the media band that now wraps the
   .pg-hero header on the three pages. Rob's words inside the header are untouched: the band goes
   AROUND the header, not into it. Concepts: Internal/HERO-ANIMATION-CONCEPTS-2026-09-20.md.

   The mechanism copies the About page: an animated-webp floor that nothing can turn into a still,
   a video layer promoted over it once it actually plays, the About grade, a global tint that
   seats the frame and fades it into the page, a local scrim behind the copy, and the 20 Sep halo
   on the h1 and the sub (the italic gold sat on the pink at 2.6:1 before that fix).

   Variants in use (20 Sep, final: real footage, one Palette B grade baked into the clips):
     mist       the fog loop plus a canvas mist the pointer wipes clear (coaching)
     loop       a looping video over an animated-webp floor (consulting, community)
     scrub/motes parked in heroes.js and below, not wired to any page
   ============================================================================ */

:root{
  --ground-rgb:241,234,220;
  /* No CSS grade: the Palette B grade (saturation .45, contrast .92, 14% gold, 10% ink) is BAKED
     into the clips, so the three read as a set in both themes and the webp floor matches the video. */
  --anim-filter:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground-rgb:30,27,23;
    --anim-filter:none;
  }
}
:root[data-theme="dark"]{
  --ground-rgb:30,27,23;
  --anim-filter:none;
}

/* ---- the band ---- */
.hero-band{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);
  background:var(--ground);min-height:clamp(520px,74vh,820px);display:flex;flex-direction:column;}
/* the copy sits low in the band, where the About headline sits, so the scene has the top */
.hero-band .hb-in{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;width:100%;}
.hero-band .pg-hero{border-bottom:0;padding-top:clamp(40px,7vw,96px);}
/* the page that follows carries the sections only; the band already spent the top gap */
.pg.pg--after-hero{padding-top:0;}

/* media layers. Every one is a plain box under the copy, filtered with the About grade. */
.hb-floor,.hb-vid,.hb-poster,.hb-fx{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:var(--anim-filter);}
.hb-floor{z-index:0;}                 /* the animated webp. NO code path hides it. */
.hb-poster{z-index:0;}                /* scrub only: frame 0, under the clip */
.hb-vid{z-index:1;opacity:0;transition:opacity .6s ease;}
.hb-vid.is-playing,.hb-vid.is-ready{opacity:1;}
.hero-band.no-video .hb-vid{display:none;}   /* the loop never reached playback: the webp shows */
.hb-fx{z-index:2;pointer-events:none;}        /* the canvas: mist or motes */

/* tint and scrim, the About shapes. The scrim is the live ground colour so it is a bone wash on
   light and an ink wash on dark, in both cases behind the copy only. */
.hb-tint{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--ground-rgb),0.30) 0%,rgba(var(--ground-rgb),0.06) 26%,
    rgba(var(--ground-rgb),0.10) 52%,rgba(var(--ground-rgb),0.72) 90%,var(--ground) 100%);}
.hb-tint::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--ground-rgb),0.88) 0%,rgba(var(--ground-rgb),0.70) 26%,
    rgba(var(--ground-rgb),0.22) 46%,transparent 62%);}
@media (max-width:900px){
  .hb-tint::after{background:linear-gradient(to bottom,rgba(var(--ground-rgb),0.44) 0%,
    rgba(var(--ground-rgb),0.40) 46%,rgba(var(--ground-rgb),0.86) 78%,rgba(var(--ground-rgb),0.94) 100%);}
}
/* the 20 Sep halo: the ground colour, soft, so the copy reads over the frame without dimming it */
.hero-band .pg-hero h1,.hero-band .pg-hero .sub,.hero-band .pg-hero .eyebrow{
  text-shadow:0 0 18px rgba(var(--ground-rgb),.92),0 0 44px rgba(var(--ground-rgb),.6);}

/* ---- consulting: the scrub runway ---- */
/* The clip is pinned for one extra viewport of scroll while the arch assembles, then the page
   goes on. Only with JS: without it the band is an ordinary band showing the poster. */
/* overflow:clip, not hidden: hidden makes the band a scroll container and the sticky scene
   never pins (measured 20 Sep: the scene scrolled away and the rest of the runway was bare ground). */
.js .hero-band--scrub{min-height:0;height:200vh;height:200dvh;display:block;border-bottom:0;overflow:clip;}
.js .hero-band--scrub .hb-scene{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;border-bottom:1px solid var(--hair);}
.hero-band--scrub .hb-scene{position:relative;flex:1;display:flex;flex-direction:column;}
.js .hero-band--scrub .hb-in{padding-top:var(--nav-h);}
@media (max-width:900px){ .js .hero-band--scrub{height:180vh;height:180dvh;} }
/* the pan wrapper: on portrait the crop slides so the arch stays clear of the copy. transform only. */
.hb-pan{position:absolute;inset:0;z-index:1;will-change:transform;}
.hb-pan .hb-vid,.hb-pan .hb-poster{position:absolute;inset:0;}
.hb-pan .hb-poster{z-index:0;} .hb-pan .hb-vid{z-index:1;}
@media (orientation:portrait){
  .hb-pan{left:-16%;width:132%;transform:translate3d(var(--pan,0),0,0);}
}
/* Keel: the page's rail hairlines, detaching to frame the arch at the end of the timeline */
.hb-keel{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hb-keel i{position:absolute;display:block;background:var(--hair);opacity:0;will-change:transform,opacity;}
.hb-keel .kv{top:14%;bottom:26%;width:1px;left:var(--keel-x,50%);transform:translate3d(-60px,0,0);}
.hb-keel .kh{left:var(--keel-x,50%);right:8%;height:1px;bottom:26%;transform:translate3d(60px,0,0);}
.hb-keel .kd{width:26px;height:1px;background:var(--gold);left:var(--keel-x,50%);top:14%;
  transform:translate3d(-60px,0,0);}
/* scrub copy scrim: the pinned copy sits over the clip for a whole viewport, so a touch more */
.hero-band--scrub .hb-tint::after{background:linear-gradient(100deg,rgba(var(--ground-rgb),0.92) 0%,
  rgba(var(--ground-rgb),0.76) 28%,rgba(var(--ground-rgb),0.26) 48%,transparent 64%);}
@media (max-width:900px){
  .hero-band--scrub .hb-tint::after{background:linear-gradient(to bottom,rgba(var(--ground-rgb),0.40) 0%,
    rgba(var(--ground-rgb),0.36) 44%,rgba(var(--ground-rgb),0.88) 74%,rgba(var(--ground-rgb),0.95) 100%);}
}

/* ---- reduced motion ---- */
/* The loops keep moving (the About rule: the animation just works for everyone). What stops is
   the canvas work and the runway: the mist sits at half strength and never regrows, the motes
   hold still, the arch shows its finished frame with no pin. Nothing is ever display:none. */
@media (prefers-reduced-motion: reduce){
  .js .hero-band--scrub{height:auto;min-height:clamp(520px,74vh,820px);display:flex;border-bottom:1px solid var(--hair);}
  .js .hero-band--scrub .hb-scene{position:relative;height:auto;flex:1;border-bottom:0;}
  .js .hero-band--scrub .hb-in{padding-top:0;}
  .hb-keel i{opacity:1;transform:none;transition:none;}
  .hb-vid{transition:none;}
}
/* ---- print ---- */
@media print{
  .hero-band{min-height:0;height:auto;display:block;}
  .js .hero-band--scrub{height:auto;}
  .js .hero-band--scrub .hb-scene{position:static;height:auto;}
  .hb-floor,.hb-vid,.hb-poster,.hb-fx,.hb-tint,.hb-keel{display:none;}  /* media only, never copy */
  .hero-band .pg-hero h1,.hero-band .pg-hero .sub,.hero-band .pg-hero .eyebrow{text-shadow:none;}
}