/* Motion layer: only active when JS adds .fx to <html>. Respects reduced motion. */
html.fx body{animation:fxPage .6s ease both}
@keyframes fxPage{from{opacity:0}to{opacity:1}}
html.fx.fx-leave body{opacity:0;transition:opacity .22s ease;animation:none}
@keyframes fxUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxZoomBg{from{transform:scale(1.14)}to{transform:scale(1.06)}}
@keyframes fxDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Scroll reveal */
html.fx .fx-r{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--fx-i,0)*90ms)}
html.fx .fx-r.fx-left{transform:translateX(-48px)}
html.fx .fx-r.fx-right{transform:translateX(48px)}
html.fx .fx-r.fx-zoom{transform:scale(.94) translateY(20px)}
html.fx .fx-r.fx-in{opacity:1;transform:none}
/* once revealed, hover transitions must be quick, not delayed */
html.fx .fx-r.fx-in{transition-delay:0s}

/* Hero intro */
html.fx .hero>img{animation:fxZoomBg 1.8s cubic-bezier(.2,.7,.2,1) both}
html.fx .hero-copy>*{animation:fxUp .9s cubic-bezier(.2,.7,.2,1) both}
html.fx .hero-copy>*:nth-child(1){animation-delay:.15s}
html.fx .hero-copy>*:nth-child(2){animation-delay:.3s}
html.fx .hero-copy>*:nth-child(3){animation-delay:.45s}
html.fx .hero-copy>*:nth-child(4){animation-delay:.6s}
html.fx .hero-copy>*:nth-child(n+5){animation-delay:.75s}
html.fx .hero-bottom{animation:fxFade 1.2s .9s ease both}
html.fx .page-title>*{animation:fxUp .8s cubic-bezier(.2,.7,.2,1) both}

/* Header and nav */
header{transition:box-shadow .3s}
header.fx-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.25)}
.nav-group[open]>div{animation:fxDrop .25s ease both}
nav>a:not(.button){position:relative}
nav>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav>a:not(.button):hover::after,nav>a.active::after{transform:scaleX(1)}
@media(max-width:700px){nav.open{animation:fxDrop .25s ease both}}

/* Buttons and links */
.button{position:relative;overflow:hidden;transition:background .25s,transform .25s,box-shadow .25s}
.button:hover{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.button:active{transform:translateY(0) scale(.98)}
.button span{transition:transform .25s}
.button:hover span{transform:translateX(6px)}
.button::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.button:hover::before{left:130%}
.text-link{transition:gap .3s,opacity .2s}
.text-link:hover{gap:60px;opacity:.85}

/* Cards and images */
.service{overflow:hidden}
.service img{transition:filter .3s,transform .6s cubic-bezier(.2,.7,.2,1)}
.service:hover img{transform:scale(1.05)}
.album-card,.media-tile{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s}
html.fx .album-card.fx-in,html.fx .media-tile.fx-in{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s,opacity .8s}
.album-card:hover,.media-tile:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.album-cover img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.album-card:hover .album-cover img{transform:scale(1.05)}
.steps article{transition:border-color .3s}
.steps article:hover{border-color:#c5d5ae}
.scope-list a{transition:padding-left .25s,color .2s,border-color .2s}
.scope-list a:hover{padding-left:8px}

/* Accordions, forms, dialogs */
.accordions details[open] p{animation:fxDrop .35s ease both}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(197,213,174,.18)}
dialog[open]{animation:fxUp .35s cubic-bezier(.2,.7,.2,1) both}
dialog::backdrop{animation:fxFade .3s both}

@media(prefers-reduced-motion:reduce){
 html.fx body,html.fx .hero>img,html.fx .hero-copy>*,html.fx .hero-bottom,html.fx .page-title>*,dialog[open],.nav-group[open]>div{animation:none!important}
 html.fx .fx-r{opacity:1!important;transform:none!important;transition:none!important}
 .button::before{display:none}
}