/* KerrDecks — motion layer (v11). Loaded after site.css. Each page load picks one entrance style at random. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- Page-to-page transitions (Chrome/Edge/Safari; other browsers load normally) ---------- */
@view-transition{navigation:auto}
header.site{view-transition-name:kd-header}
::view-transition-group(kd-header){animation:none}
::view-transition-old(root){animation:kd-out .35s ease both}
::view-transition-new(root){animation:kd-fade .9s ease .1s both}
html[data-motion="rise"]::view-transition-new(root){animation:kd-rise 1.05s var(--ease-out) .1s both}
html[data-motion="slide"]::view-transition-new(root){animation:kd-slide 1.05s var(--ease-out) .05s both}
html[data-motion="wipe"]::view-transition-new(root){animation:kd-wipe 1.1s var(--ease-out) .05s both}
html[data-motion="iris"]::view-transition-new(root){animation:kd-iris 1.25s var(--ease-out) .05s both}
html[data-motion="doors"]::view-transition-new(root){animation:kd-doors 1.15s var(--ease-out) .05s both}
html[data-motion="zoom"]::view-transition-new(root){animation:kd-zoom 1.15s var(--ease-out) .1s both}
html[data-motion="focus"]::view-transition-new(root){animation:kd-focus 1.05s var(--ease-out) .1s both}
html[data-motion="boards"]::view-transition-new(root){animation:none}
html[data-motion="sweep"]::view-transition-new(root){animation:kd-fade .5s ease .35s both}

@keyframes kd-out{to{opacity:0}}
@keyframes kd-fade{from{opacity:0}}
@keyframes kd-rise{from{opacity:0;transform:translateY(40px)}}
@keyframes kd-slide{from{transform:translateX(100%)}}
@keyframes kd-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes kd-iris{from{clip-path:circle(0% at 50% 40%)}to{clip-path:circle(150% at 50% 40%)}}
@keyframes kd-doors{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes kd-zoom{from{opacity:0;transform:scale(1.07)}}
@keyframes kd-focus{from{opacity:0;filter:blur(10px)}}

/* Diagonal sweep: an amber band crosses the screen as the page appears */
html.mo[data-motion="sweep"] body::after{content:"";position:fixed;top:-50%;bottom:-50%;left:0;width:55%;z-index:2147483000;pointer-events:none;background:linear-gradient(90deg,transparent,#e8a317 18%,#e8a317 82%,transparent);transform:translateX(-200%) skewX(-20deg);animation:kd-sweep 1.25s cubic-bezier(.7,0,.3,1) forwards}
@keyframes kd-sweep{to{transform:translateX(280%) skewX(-20deg);visibility:hidden}}

/* ---------- Home hero ---------- */
.mo .hero>img{animation:kd-hero 2.8s var(--ease-out) both}
@keyframes kd-hero{from{transform:scale(1.08)}}

/* ---------- Scroll reveals (only when the motion script is running) ---------- */
.mo .rv{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),clip-path 1.2s var(--ease-out);transition-delay:var(--d,0ms)}
.mo .rv.zoom{transform:scale(.94)}
.mo .rv.wipe{transform:none;clip-path:inset(0 0 100% 0)}
.mo .rv.in{opacity:1;transform:none}
.mo .rv.wipe.in{clip-path:inset(0 0 0 0)}
.mo.mo-done .rv{opacity:1;transform:none;clip-path:none}
.mo .card.rv img,.mo .split .rv img,.mo img.rv{transition:transform 1.6s var(--ease-out)}
.mo .card.rv:not(.in) img,.mo .rv.wipe:not(.in) img{transform:scale(1.08)}
.mo .step.rv{transition-property:opacity,transform,border-color}
.mo .step.rv:not(.in){border-top-color:transparent}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn-amber:hover{box-shadow:0 10px 26px -12px rgba(232,163,23,.7)}
.btn-amber:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-amber:hover:after{animation:kd-shine .8s ease}
@keyframes kd-shine{to{left:130%}}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);pointer-events:none;animation:kd-ripple .65s ease-out forwards}
.btn-line .ripple{background:rgba(232,163,23,.35)}
@keyframes kd-ripple{to{transform:scale(2.6);opacity:0}}

/* Cards lift on hover */
a.card{transition:transform .4s var(--ease),border-color .25s ease,box-shadow .4s ease}
a.card:hover{transform:translateY(-5px);box-shadow:0 24px 40px -26px rgba(32,33,35,.55)}
a.card img{transition:transform .9s var(--ease-out)}
a.card:hover img{transform:scale(1.05)}
.gallery img{transition:transform .9s var(--ease-out),filter .4s ease}
.gallery img:hover{transform:scale(1.03)}

/* ---------- Navigation ---------- */
@media(min-width:981px){
.nav ul a{position:relative;padding:6px 0}
.nav ul a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav ul a:hover:after,.nav ul a[aria-current]:after{transform:scaleX(1);transform-origin:left}
}
@media(max-width:980px){
.nav ul{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0);transition:opacity .35s ease,transform .45s var(--ease),clip-path .5s var(--ease),visibility 0s linear .5s}
.nav ul.open{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 -10px 0);transition:opacity .35s ease,transform .45s var(--ease),clip-path .5s var(--ease),visibility 0s}
.nav ul li{opacity:0;transform:translateX(-18px);transition:opacity .3s ease,transform .4s var(--ease)}
.nav ul.open li{opacity:1;transform:none}
.nav ul.open li:nth-child(1){transition-delay:.1s}.nav ul.open li:nth-child(2){transition-delay:.16s}.nav ul.open li:nth-child(3){transition-delay:.22s}
.nav ul.open li:nth-child(4){transition-delay:.28s}.nav ul.open li:nth-child(5){transition-delay:.34s}.nav ul.open li:nth-child(6){transition-delay:.4s}
.menu-toggle{transition:border-color .2s ease,color .2s ease}
.menu-toggle[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
}

/* ---------- FAQ accordions ---------- */
summary:after{transition:transform .4s var(--ease)}
details[open] summary:after{content:"+";transform:rotate(45deg)}
details>p{overflow:hidden}

/* Deck boards: six amber boards cover the page, then slide away one by one */
html.mo[data-motion="boards"] body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;background-image:linear-gradient(90deg,#e8a317 50%,transparent 50%),linear-gradient(90deg,transparent 50%,#d4930f 50%),linear-gradient(90deg,#e8a317 50%,transparent 50%),linear-gradient(90deg,transparent 50%,#c98a10 50%),linear-gradient(90deg,#e8a317 50%,transparent 50%),linear-gradient(90deg,transparent 50%,#d4930f 50%);background-repeat:no-repeat;background-size:200% 17.27%;background-position:0% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%;animation:mo-boards 1.5s linear forwards}
@keyframes mo-boards{0.0%{background-position:0% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}4.17%{background-position:0% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}8.33%{background-position:0% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}12.5%{background-position:0% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}16.67%{background-position:15.16% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}20.83%{background-position:35.65% 0.0%,100% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}25.0%{background-position:52.54% 0.0%,77.87% 20.0%,0% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}29.17%{background-position:66.19% 0.0%,58.57% 20.0%,6.84% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}33.33%{background-position:76.93% 0.0%,42.75% 20.0%,28.71% 40.0%,100% 60.0%,0% 80.0%,100% 100.0%}37.5%{background-position:85.11% 0.0%,30.08% 20.0%,46.86% 40.0%,85.74% 60.0%,0% 80.0%,100% 100.0%}41.67%{background-position:91.09% 0.0%,20.19% 20.0%,61.63% 40.0%,65.1% 60.0%,0% 80.0%,100% 100.0%}45.83%{background-position:95.2% 0.0%,12.75% 20.0%,73.37% 40.0%,48.07% 60.0%,21.28% 80.0%,100% 100.0%}50.0%{background-position:97.8% 0.0%,7.41% 20.0%,82.44% 40.0%,34.3% 60.0%,40.73% 80.0%,94.12% 100.0%}54.17%{background-position:99.24% 0.0%,3.82% 20.0%,89.17% 40.0%,23.45% 60.0%,56.68% 80.0%,72.09% 100.0%}58.33%{background-position:99.85% 0.0%,1.63% 20.0%,93.91% 40.0%,15.17% 60.0%,69.47% 80.0%,53.8% 100.0%}62.5%{background-position:100.0% 0.0%,0.49% 20.0%,97.02% 40.0%,9.11% 60.0%,79.46% 80.0%,38.9% 100.0%}66.67%{background-position:100% 0.0%,0.07% 20.0%,98.84% 40.0%,4.93% 60.0%,86.99% 80.0%,27.04% 100.0%}70.83%{background-position:100% 0.0%,0.0% 20.0%,99.71% 40.0%,2.27% 60.0%,92.41% 80.0%,17.88% 100.0%}75.0%{background-position:100% 0.0%,0% 20.0%,99.98% 40.0%,0.8% 60.0%,96.07% 80.0%,11.06% 100.0%}79.17%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0.16% 60.0%,98.31% 80.0%,6.24% 100.0%}83.33%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0.0% 60.0%,99.48% 80.0%,3.08% 100.0%}87.5%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0% 60.0%,99.93% 80.0%,1.22% 100.0%}91.67%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0% 60.0%,100.0% 80.0%,0.32% 100.0%}95.83%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0% 60.0%,100% 80.0%,0.03% 100.0%}100.0%{background-position:100% 0.0%,0% 20.0%,100% 40.0%,0% 60.0%,100% 80.0%,0% 100.0%}99.9%{visibility:visible}100%{visibility:hidden}}

/* ---------- Respect "reduce motion" ---------- */
@media(prefers-reduced-motion:reduce){
@view-transition{navigation:none}
*,*:before,*:after{animation:none!important;transition:none!important}
html.mo body::after{display:none!important}
.mo .rv{opacity:1!important;transform:none!important;clip-path:none!important}
}