/* ══════════════════════════════════════════════
   QI MOVER — hero v3 · "sands of time" + layered depth
   Loaded AFTER style.css by index-v3.html only.
   Pinned hero (as v2) with three depth plates:
     .hero__bg   stucco wall           (slowest, pushes in)
     .hero__mid  oak stool + linen     (mid)
     .hero__fg   eucalyptus, blurred   (fastest, nearest the lens)
   The crest + sand canvas sit between mid and fg.
   Version: v3
   ══════════════════════════════════════════════ */

.hero--v3{min-height:100svh;height:165svh;display:block;place-items:unset;overflow:visible;
  --px:0;--py:0;                       /* pointer tilt, set by JS (−1..1) */
  --dust:0}
.hero__pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:#8E8271}

/* depth plates -------------------------------------------------- */
.hero__layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.hero__bg{inset:-6% -4%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform:scale(calc(1.06 + var(--dust) * .10))
            translate(calc(var(--px) * -8px), calc(var(--py) * -6px + var(--dust) * -28px));
  transform-origin:50% 40%;transition:transform .08s linear}

.hero__mid{z-index:1}
.hero__mid img{position:absolute;left:50%;bottom:-3%;
  width:min(38vw,440px);height:auto;
  transform:translate(calc(-50% + var(--px) * -18px), calc(var(--py) * -12px + var(--dust) * 90px))
            scale(calc(1 + var(--dust) * .16));
  transform-origin:50% 100%;
  filter:drop-shadow(0 30px 40px rgba(26,35,31,.45));
  transition:transform .08s linear}

.hero__fg{z-index:4}
.hero__fg img{position:absolute;left:-6%;top:-4%;
  width:min(34vw,420px);height:auto;
  transform:translate(calc(var(--px) * -34px + var(--dust) * -120px), calc(var(--py) * -24px + var(--dust) * -220px))
            rotate(calc(var(--dust) * -5deg)) scale(calc(1 + var(--dust) * .3));
  transform-origin:0 0;
  filter:blur(calc(2.5px + var(--dust) * 4px)) brightness(.5) saturate(.75);
  opacity:calc(.95 - var(--dust) * .7);
  transition:transform .08s linear}

/* dusk scrim: darkens the wall so the sand-coloured crest and grains read,
   and deepens toward the brand green as the section hands off */
.hero--v3 .hero__scrim{z-index:2;
  background:radial-gradient(70% 60% at 50% 46%,rgba(26,35,31,.22) 0%,rgba(26,35,31,.50) 100%),
             linear-gradient(180deg,rgba(26,35,31,.40) 0%,rgba(26,35,31,.04) 30%,
             rgba(26,35,31,.05) 62%,rgba(26,35,31,.70) 100%)}
.hero--v3 .hero__scrim::after{content:'';position:absolute;inset:0;background:var(--deep);
  opacity:calc(var(--dust) * .55)}

.hero--v3 .hero__crest{z-index:3;will-change:opacity,transform}
/* hand-off: the DOM crest cross-fades into the grain canvas over the first 4% of travel */
.hero--v3 .hero__crest.is-dust .crest__mark,
.hero--v3 .hero__crest.is-dust .crest__word{opacity:calc(1 - var(--dust) * 25)}
.hero--v3 .hero__base,.hero--v3 .hero__cue{z-index:5}

/* the next module slides up over the pinned hero for the last ~40% of the
   travel, so the page moves on while the final grains are still in the air */
.hero--v3 + .band{position:relative;z-index:6;margin-top:-32svh}

/* the sand */
.hero__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  z-index:3;opacity:0}
.hero__dust.is-on{opacity:calc(var(--dust) * 25)}

.hero--v3 .crest__line{opacity:calc(1 - (var(--dust) - .3) * 2.6)}
.hero--v3 .hero__base,.hero--v3 .hero__cue{opacity:calc(1 - var(--dust) * 2.4)}

@media(max-width:900px){
  .hero__mid img{width:min(62vw,330px);bottom:-1%}
  .hero__fg img{width:52vw;left:-16%;top:-2%}
  /* strap sits above the stool, centred, so it never crosses the linen */
  .hero--v3 .hero__base{bottom:calc(min(62vw,330px) * .62 + 1.4rem);justify-content:center;text-align:center}
  .hero--v3 .hero__cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero--v3{height:auto;min-height:100svh}
  .hero__pin{position:relative;height:auto;min-height:100svh}
  .hero--v3 + .band{margin-top:0}
  .hero__dust{display:none}
  .hero__bg img,.hero__mid img,.hero__fg img{transition:none}
  .hero--v3 .crest__line,.hero--v3 .hero__base,.hero--v3 .hero__cue{opacity:1}
}