/* ===== Motion polish. One easing curve, one set of durations, all of it switched off for reduced motion. ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--rise:22px}

/* ---- 1. entrance: the first screen assembles itself ---- */
@keyframes mRise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
body{animation:mFade .5s ease both}
header{animation:mFade .7s .05s ease both}
.hero-top{animation:mRise .8s .25s var(--ease) backwards}
.hero-caption{animation:mRise .8s .4s var(--ease) backwards}
.hero h1{animation:mRise 1s .5s var(--ease) backwards}
.hero-reel{animation:mRise .8s .7s var(--ease) backwards}
.hero-foot{animation:mFade 1s .95s ease backwards}
.case-back{animation:mRise .7s .1s var(--ease) backwards}
.case-hero h1,.archive-heading h1{animation:mRise .9s .2s var(--ease) backwards}
.case-summary,.archive-heading p{animation:mRise .8s .38s var(--ease) backwards}
.case-meta,.archive-heading>div>span{animation:mRise .8s .5s var(--ease) backwards}
.case-media{animation:mRise .9s .6s var(--ease) backwards}

/* ---- 2. scroll reveal: elements settle into place as they arrive ---- */
.rv{opacity:0;transform:translateY(var(--rise))}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}

/* images ease out of a slight zoom as their frame reveals */
.rv.in .picture img,.rv.in .gallery-image img,.rv.in.case-grid img{animation:mSettle 1.2s var(--ease) both}
@keyframes mSettle{from{transform:scale(1.05)}to{transform:scale(1)}}

/* ---- 3. page exit ---- */
html.m-leaving body{opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}

/* ---- 4. touch feedback and small details ---- */
.lb-btn,.sort-btn,.about-tabs button,.hero-reel,.archive-action,.theme-toggle{transition-property:background,color,border-color,opacity,transform;transition-duration:.25s;transition-timing-function:var(--ease)}
.lb-btn:active,.sort-btn:active,.about-tabs button:active,.archive-action:active{transform:scale(.96)}
.theme-toggle svg{transition:transform .6s var(--ease)}
.theme-toggle:hover svg{transform:rotate(25deg)}
.theme-toggle:active{transform:scale(.9)}
.about-tabs button{transition-duration:.3s}
.project .caption h3{transition:transform .5s var(--ease)}
.project:hover .caption h3{transform:translateX(6px)}
.case-next-go{transition:letter-spacing .4s var(--ease),border-color .3s}

@media(prefers-reduced-motion:reduce){
  body,header,.hero-top,.hero-caption,.hero h1,.hero-reel,.hero-foot,.case-back,.case-hero h1,.archive-heading h1,.case-summary,.archive-heading p,.case-meta,.archive-heading>div>span,.case-media{animation:none!important}
  .rv{opacity:1;transform:none}.rv.in{transition:none}.rv.in img{animation:none!important}
  html.m-leaving body{opacity:1;transform:none;transition:none}
  .theme-toggle:hover svg,.project:hover .caption h3{transform:none}
}