/* =========================================================
   Motion layer (owner, 7 Nov: "fluid, buttery smooth animations everywhere").
   Rules kept from the UI skill: only transform, opacity and clip-path move;
   scrolling stays native (no scroll-jacking); everything stops for
   prefers-reduced-motion. One soft curve everywhere so it all feels related.
   ========================================================= */
:root{ --silk:cubic-bezier(.16,1,.3,1); }

/* base reveal: a little further and slower than before */
.up{transform:translate3d(0,28px,0);transition:opacity 1.1s var(--silk), transform 1.2s var(--silk);transition-delay:calc(var(--i,0) * 80ms)}
.up.in{transform:none}

/* headings rise out of a mask, line by line */
.mline{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mline > span{display:block;transform:translate3d(0,105%,0);transition:transform 1.25s var(--silk);transition-delay:calc(var(--d,0) * 90ms + var(--i,0) * 80ms)}
.mh.in .mline > span{transform:none}
.mh.up{opacity:1;transform:none}

/* the small label above a heading draws a line in front of it */
.lab.mlab{display:flex;align-items:center;gap:12px}
.lab.mlab::before{content:"";width:28px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--silk) .15s}
.lab.mlab.in::before{transform:none}

/* photos open from a soft inset while settling from a slight zoom */
.mimg{clip-path:inset(8% 8% 8% 8% round 6px);transition:clip-path 1.4s var(--silk)}
.mimg img{transform:scale(1.14);transition:transform 1.8s var(--silk)}
.mimg.in{clip-path:inset(0 0 0 0 round 4px)}
.mimg.in img{transform:none}

/* carousel cards slide in one after another when the row arrives */
.mrail > *{opacity:0;transform:translate3d(48px,0,0);transition:opacity .9s var(--silk), transform 1.1s var(--silk);transition-delay:calc(var(--k,0) * 70ms)}
.mrail.in > *{opacity:1;transform:none}

/* table rows follow each other */
.tbl tbody tr{transition:background .3s}
.mrows tbody tr{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s var(--silk), transform .9s var(--silk), background .3s;transition-delay:calc(var(--k,0) * 55ms + 150ms)}
.mrows.in tbody tr{opacity:1;transform:none}

/* hero: photo and words drift at different speeds as you scroll away */
.hero .pic img{will-change:transform}
.hero .words{will-change:transform, opacity}

/* photo sections: the photo sits on its own layer that drifts slower than the page */
.pbg{background-image:none!important;overflow:hidden}
.pbg > .bgl{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:-2;background:var(--bg) center/cover no-repeat;will-change:transform}

/* a hairline at the top that fills as you read */
.mprog{position:fixed;left:0;top:0;right:0;height:2px;z-index:70;background:var(--gold-soft,#bcd8cc);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* buttons and cards answer softly */
.btn{transition:transform .5s var(--silk), background .35s ease, color .35s ease, box-shadow .5s var(--silk)}
@media (hover:hover){.btn:hover{transform:translate3d(0,-2px,0)}}
.btn:active{transform:scale(.97)}
.cards figure .im{transition:transform .8s var(--silk)}
@media (hover:hover){.cards figure:hover .im{transform:translate3d(0,-4px,0)}}

/* the plan beside the price list cross-fades and settles */
.planbox .im img{transition:opacity .45s var(--silk), transform .8s var(--silk), filter .5s}
.planbox .im img.sw{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .up,.mline > span,.mimg,.mimg img,.mrail > *,.mrows tbody tr,.lab.mlab::before{transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .mprog{display:none}
}