/* AFTER CUT V4 — MOTION LAB
   Parallel exploration: richer motion, same layout/content, no wheel hijacking. */
:root{
  --ml-ease:cubic-bezier(.16,1,.3,1);
  --ml-orange:#F29600;
  --ml-orange-hot:#ff7a00;
}
.motion-lab{--ml-hero-p:0;--ml-about-p:0;--ml-contact-p:0;}

/* A discreet global progress line adds orientation without another UI panel. */
.motion-lab::after{
  content:"";position:fixed;z-index:95;left:0;top:0;height:2px;width:100%;
  background:var(--ml-orange);transform:scaleX(var(--ml-page-p,0));transform-origin:left;
  pointer-events:none;box-shadow:0 0 18px rgba(242,150,0,.32);
}

/* HERO — cinematic drift and controlled exit */
.motion-lab .hero-sticky{perspective:1200px;}
.motion-lab .hero-poster,.motion-lab .hero-video,.motion-lab #heroCanvas{
  transform:scale(calc(1.035 + var(--ml-hero-p)*.055)) translate3d(calc(var(--ml-hero-x,0)*1px),calc(var(--ml-hero-y,0)*1px),0);
  transform-origin:50% 48%;transition:filter .6s ease;
}
.motion-lab .hero-shade{opacity:calc(1 - var(--ml-hero-p)*.18);}
.motion-lab .hero-copy{
  transform:translate3d(calc(var(--ml-hero-p)*-34px),calc(-48% + var(--ml-hero-p)*-22px),0);
  filter:blur(calc(var(--ml-hero-p)*2.2px));
}
.motion-lab .hero-copy h1{overflow:hidden;}
.motion-lab .hero-copy h1 .ml-line{display:block;overflow:hidden;}
.motion-lab .hero-copy h1 .ml-line>span{display:block;will-change:transform;}
.motion-lab.ml-ready .hero-copy h1 .ml-line>span{animation:ml-title-in 1.25s var(--ml-ease) both;}
.motion-lab.ml-ready .hero-copy h1 .ml-line:nth-child(2)>span{animation-delay:.12s;}
@keyframes ml-title-in{from{transform:translateY(112%);filter:blur(8px)}to{transform:translateY(0);filter:blur(0)}}

/* Section heading reveal: one clean mask, not per-letter gimmicks. */
.motion-lab .section-heading h2{clip-path:inset(0 0 0 0);}
.motion-lab .section-heading h2.ml-heading-ready{animation:ml-heading-in 1s var(--ml-ease) both;}
@keyframes ml-heading-in{from{clip-path:inset(0 0 100% 0);transform:translateY(22px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* SHOWCASES — depth choreography after the existing cascade.
   Cards remain clickable and the orange overlay stays the only colour effect. */
.motion-lab .showcase-rail{perspective:1400px;overflow-y:visible;}
.motion-lab .showcase-cell{will-change:transform;transform:translate3d(0,var(--ml-card-y,0px),0) scale(var(--ml-card-scale,1));transition:filter .55s var(--ml-ease);}
.motion-lab .card-surface{transform:rotateX(var(--ml-rx,0deg)) rotateY(var(--ml-ry,0deg));transform-style:preserve-3d;transition:transform .55s var(--ml-ease),border-color .35s,box-shadow .35s;}
.motion-lab .project-card.is-pointed .card-surface{transform:translateY(-8px) scale(1.018) rotateX(var(--ml-rx,0deg)) rotateY(var(--ml-ry,0deg));box-shadow:0 24px 55px rgba(0,0,0,.32),inset 0 0 0 1px var(--accent);}
.motion-lab .project-card.is-pointed .card-image{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.07)!important;}
.motion-lab .project-card.is-pointed .card-meta strong{transform:translateY(0);}
.motion-lab .card-meta strong,.motion-lab .card-meta em,.motion-lab .card-view{will-change:transform,opacity;}
.motion-lab .card-meta strong{transition:transform .65s var(--ml-ease),opacity .5s;}
.motion-lab .card-view{transition:transform .7s var(--ml-ease),opacity .5s;}
.motion-lab .project-card.is-pointed .card-view{transform:translateY(-3px);}
.motion-lab .showcase-pagination{transition:transform .6s var(--ml-ease);}
.motion-lab .projects.ml-in-view .showcase-pagination{transform:translateY(0);}

/* Cursor: keep the +, add a quiet orbit that reacts to speed. */
.motion-lab .project-cursor{width:44px;height:44px;margin:-22px 0 0 -22px;}
.motion-lab .project-cursor:after{content:'VIEW';position:absolute;left:50%;top:52px;transform:translateX(-50%);font-size:7px;letter-spacing:.16em;color:#fff;opacity:.78;}
.motion-lab .cursor-orbit{border-color:rgba(242,150,0,.55);}
.motion-lab .cursor-cross:before,.motion-lab .cursor-cross:after{background:var(--ml-orange-hot);}

/* PROJECT OPENING — a curtain reveal, never a FLIP/scale transition. */
.motion-lab .project-stage.is-open .case-study{animation:ml-stage-in .9s var(--ml-ease) both;}
.motion-lab .project-stage.is-open .case-hero{clip-path:inset(7% 0 0 0);animation:ml-case-hero 1.25s var(--ml-ease) forwards;}
.motion-lab .project-stage.is-open .case-poster{animation:ml-poster-settle 1.8s var(--ml-ease) both;}
@keyframes ml-stage-in{from{opacity:.35;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ml-case-hero{to{clip-path:inset(0 0 0 0)}}
@keyframes ml-poster-settle{from{transform:scale(1.055)}to{transform:scale(1)}}

/* ABOUT — the portrait becomes the anchor, text passes beside it. */
@media(min-width:1000px){
  .motion-lab #about{position:relative;min-height:118vh;}
  .motion-lab #about .about-grid{align-items:start;}
  .motion-lab #about .portrait{position:sticky;top:16vh;transform:translate3d(0,calc((var(--ml-about-p) - .5)*-34px),0) scale(calc(.985 + var(--ml-about-p)*.025));}
  .motion-lab #about .portrait img{filter:grayscale(1) brightness(calc(.40 + var(--ml-about-p)*.09)) contrast(1.2);}
}
.motion-lab #about .about-statement{transform:translateX(calc((1 - var(--ml-about-p))*-16px));}
.motion-lab #about .about-prose{transform:translateX(calc((1 - var(--ml-about-p))*10px));}

/* CONTACT — restrained magnetic movement for the action only. */
.motion-lab .send{transform:translate3d(var(--ml-send-x,0px),var(--ml-send-y,0px),0);transition:transform .5s var(--ml-ease),padding .4s var(--ease),color .4s;}
.motion-lab .contact-copy h3{transform:translateY(calc((1 - var(--ml-contact-p))*18px));opacity:calc(.55 + var(--ml-contact-p)*.45);}

/* Motion modes stay meaningful. */
body[data-motion="soft"].motion-lab .project-card.is-pointed .card-surface{transform:translateY(-4px) scale(1.008);}
body[data-motion="soft"].motion-lab .hero-poster,body[data-motion="soft"].motion-lab .hero-video,body[data-motion="soft"].motion-lab #heroCanvas{transform:scale(calc(1.03 + var(--ml-hero-p)*.025));}
body[data-motion="off"].motion-lab *{scroll-behavior:auto!important;}
body[data-motion="off"].motion-lab .hero-poster,body[data-motion="off"].motion-lab .hero-video,body[data-motion="off"].motion-lab #heroCanvas,
body[data-motion="off"].motion-lab .hero-copy,body[data-motion="off"].motion-lab .showcase-cell,body[data-motion="off"].motion-lab .card-surface,
body[data-motion="off"].motion-lab #about .portrait,body[data-motion="off"].motion-lab .send{transform:none!important;filter:none;}

@media(max-width:760px){
  /* Mobile keeps the current touch-first cards. No hover-only spectacle. */
  .motion-lab .project-cursor{display:none!important;}
  .motion-lab .showcase-cell{transform:none!important;}
  .motion-lab .card-surface{transform:none!important;}
  .motion-lab .hero-copy{filter:none;}
  .motion-lab .project-card:active .card-surface{transform:scale(.985)!important;transition-duration:.16s;}
  .motion-lab::after{height:2px;}
}
@media(prefers-reduced-motion:reduce){
  .motion-lab *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}