/* AFTER CUT V4.1 — HYBRID
   V4 Motion Lab + reversible framed hero shrink + guaranteed scroll-frame scrub.
   The internal V4 video/canvas scroll sequence is intentionally untouched. */
.motion-lab{
  --v41-hero-radius:38px;
  --v41-hero-scale:.045;
}

/* HERO — full-bleed becomes a framed object, directly driven by the same
   --ml-hero-p progress already used by the V4 video/canvas engine. */
.motion-lab .hero{overflow:visible;}
.motion-lab .hero-sticky{
  border-radius:calc(var(--ml-hero-p,0) * var(--v41-hero-radius));
  transform:scale(calc(1 - var(--ml-hero-p,0) * var(--v41-hero-scale)));
  transform-origin:center center;
  overflow:hidden;
  box-shadow:0 calc(var(--ml-hero-p,0) * 28px) calc(var(--ml-hero-p,0) * 70px) rgba(0,0,0,.42);
  transition:none;
  will-change:transform,border-radius;
}

/* Preserve the V4 scroll-scrubbed frame sequence inside the shrinking frame.
   V4's own .hero-video / #heroCanvas transforms remain in charge. */
.motion-lab #heroCanvas,
.motion-lab .hero-video,
.motion-lab .hero-poster{backface-visibility:hidden;}

/* ABOUT → CONTACT — remove the artificial 118vh hold from V4 while keeping
   the sticky portrait choreography inside the real content height. */
@media(min-width:1000px){
  .motion-lab #about{
    min-height:auto;
    padding-bottom:clamp(62px,6vw,94px);
  }
  .motion-lab #contact{padding-top:clamp(66px,6.5vw,102px);}
}

@media(max-width:760px){
  .motion-lab{--v41-hero-radius:24px;--v41-hero-scale:.025;}
}

body[data-motion="off"].motion-lab .hero-sticky{
  transform:none!important;
  border-radius:0!important;
  box-shadow:none!important;
}

@media(prefers-reduced-motion:reduce){
  .motion-lab .hero-sticky{
    transform:none!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
}


/* V4.2 — explicit media stacking and crossfade for the scroll-scrub sequence.
   The canvas lives inside the same rounded/shrinking sticky frame. */
.motion-lab .hero-poster,.motion-lab .hero-video{z-index:0;transition:opacity .24s ease,filter .6s ease;}
.motion-lab #heroCanvas{z-index:1;transition:opacity .18s ease;pointer-events:none;}
.motion-lab .hero-shade{z-index:2;pointer-events:none;}
.motion-lab .hero-copy,.motion-lab .hero-pause,.motion-lab .hero-start,.motion-lab .scroll-cue,.motion-lab .hero-progress{z-index:3;}
.motion-lab .hero.is-scrubbing .hero-video{opacity:0;}
.motion-lab .hero.is-scrubbing .hero-poster{opacity:0;}
.motion-lab .hero.is-scrubbing #heroCanvas{opacity:1!important;}
body[data-motion="soft"].motion-lab .hero.is-scrubbing #heroCanvas,
body[data-motion="off"].motion-lab .hero.is-scrubbing #heroCanvas{opacity:0!important;}