/* Motion layer (loads after styles.css). Two moods, both from the editing suite:
   cinematic = long soft eases, wipes and cuts; playful = springy overshoot on anything you touch.
   Everything sits in no-preference, so reduced-motion visitors keep the original calm behaviour. */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--soft:cubic-bezier(.16,1,.3,1);interpolate-size:allow-keywords}

@media (prefers-reduced-motion:no-preference){

/* Page-to-page: a quick dip, then a slow settle (cinematic cut) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .75s var(--soft) .05s both}
@keyframes vt-out{to{opacity:0;transform:scale(1.02)}}
@keyframes vt-in{from{opacity:0;transform:scale(.985)}}

/* Signature moment: hero words rise out of a mask, one by one */
h1 .mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em;animation:none}
h1 .mi{display:inline-block;animation:mrise 1.15s var(--soft) calc(var(--b,.1s) + var(--i,0)*.085s) backwards}
html.m-intro h1{--b:1.55s}
@keyframes mrise{from{transform:translateY(112%) rotate(5deg);filter:blur(6px)}}

/* Section headings: wipe-cut in as they enter */
html.mjs .mh{clip-path:inset(-.1em 100% -.25em -.1em);transform:translateX(-18px);transition:clip-path 1s var(--soft),transform 1s var(--soft)}
html.mjs .mh.mh-in{clip-path:inset(-.1em -.1em -.25em -.1em);transform:none}

/* Cards drop in with a spring */
@keyframes cardin{from{opacity:0;transform:translate(var(--dx,0),56px) scale(.94) rotate(var(--r,-1.5deg))}}
.rv.in{animation-duration:.9s;animation-timing-function:var(--spring)}
.svc,.offer,.work,.cta{transition:transform .55s var(--spring),box-shadow .35s,border-color .35s}

/* Buttons: magnetic pull, springy press */
.btn,.menu-btn{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--sc,1));transition:transform .45s var(--spring),background .2s,color .2s,border-color .2s}
.x,.pick button{transform:scale(var(--sc,1));transition:transform .45s var(--spring),background .2s,color .2s,border-color .2s}
.btn:hover,.menu-btn:hover{--sc:1.05}
.btn:active,.menu-btn:active,.x:active,.pick button:active{--sc:.93}
.logo{display:inline-block}
.logo:hover{animation:wob .7s var(--soft)}
@keyframes wob{25%{transform:rotate(-4deg) scale(1.06)}60%{transform:rotate(3deg) scale(1.04)}}

/* Menu panel: slides in with a soft overshoot, links follow in turn */
#panel{transition:transform .6s cubic-bezier(.3,1.2,.5,1),visibility .6s;box-shadow:80px 0 0 var(--bg2)}
@keyframes navin{from{opacity:0;transform:translateX(36px)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
body.open #panel nav a{animation:navin .7s var(--spring) backwards;animation-delay:calc(.15s + var(--n,0)*.055s)}
#panel nav a:nth-child(2){--n:1}#panel nav a:nth-child(3){--n:2}#panel nav a:nth-child(4){--n:3}#panel nav a:nth-child(5){--n:4}#panel nav a:nth-child(6){--n:5}
#panel nav a{transition:padding .4s var(--spring),color .2s}
body.open #panel .p-foot{animation:rise .7s var(--soft) .5s backwards}

/* Video player: the frame opens like letterbox bars parting, with a springy settle */
.lb-box{transform:scale(.88);clip-path:inset(47% 0 47% 0 round 12px);transition:transform .7s var(--spring),clip-path .75s var(--soft)}
#lb.on .lb-box{clip-path:inset(0 round 12px)}
#cur{transition:transform .4s var(--spring)}

/* Thumbnails: slow push-in, and the play button pulses */
.thumb img,.thumb video{transition:transform 1.4s var(--soft)}
.work:hover .thumb img,.work.pop .thumb img,.work:hover .thumb video,.work.pop .thumb video{transform:scale(1.08)}
.work:hover .play,.work.pop .play{animation:beat 1.3s var(--spring) infinite}
@keyframes beat{0%,100%{transform:scale(1.06)}50%{transform:scale(1.2)}}

/* FAQ: answers glide open, chevron springs */
details::details-content{block-size:0;overflow:clip;transition:block-size .55s var(--soft),content-visibility .55s allow-discrete}
details[open]::details-content{block-size:auto}
summary::after{transition:transform .5s var(--spring)}
details[open] p{animation:rise .6s var(--soft) .1s backwards}

/* Booking: picks pop, messages rise */
@keyframes pop{0%{transform:scale(.88)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.pick button.on{animation:pop .45s var(--soft)}
.msg.ok,.msg.err{animation:rise .5s var(--soft)}

/* Playhead: scroll progress, drawn like the timeline cursor */
#mprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:85;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--coral),var(--amber),var(--teal));transition:transform .15s linear}

}