/* Motion, in one place. Everything here is decoration: content is fully visible without it (no .js-motion class) and when the person asks for less motion. */
html{scroll-behavior:smooth}

/* reveal on scroll: motion.js marks targets with data-reveal and adds .is-in when they enter the screen */
.js-motion [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms);will-change:opacity,transform}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
.js-motion [data-reveal="left"]{transform:translateX(-32px)}.js-motion [data-reveal="right"]{transform:translateX(32px)}.js-motion [data-reveal="zoom"]{transform:scale(.94)}
.js-motion [data-reveal].is-in{will-change:auto}

/* page change inside the app: a short fade and lift, only when the route changes */
@keyframes km-page{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.km-page-in{animation:km-page .32s cubic-bezier(.2,.7,.2,1) backwards}

/* press and hover feedback */
.dc-solid,.dc-outline,.dc-pill,.dy-big,.lp-btn,.lp-cta,.kl-fab,.ct-card,.bd-card,.dc-chip-bird,.ct-items button,.dy-quick button,.dy-outs button,.dy-ranks button,.dy-keys button{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.dc-solid:active,.dc-outline:active,.dc-pill:active,.dy-big:active,.lp-btn:active,.kl-fab:active,.dy-quick button:active,.dy-outs button:active,.dy-ranks button:active,.dy-keys button:active,.ct-items button:active{transform:scale(.97)}
@media (hover:hover){.ct-card:hover,.bd-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(20,34,27,.1)}.dc-solid:hover,.dc-outline:hover{transform:translateY(-1px)}}
.kl-nav-link{transition:background-color .2s ease,color .2s ease,transform .2s ease}.kl-nav-link:hover{transform:translateX(3px)}

/* charts and bars grow in when revealed */
@keyframes km-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes km-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hs-bars i,.hs-cal>div{transform-origin:bottom}.js-motion .is-in .hs-bars i,.js-motion .hs-bars.is-in i{animation:km-grow-y .7s cubic-bezier(.2,.7,.2,1) both}
.dc-bar i,.hs-meter i,.ex-bar span{transform-origin:left}.js-motion .is-in .dc-bar i,.js-motion .is-in .hs-meter i,.js-motion .is-in .ex-bar span{animation:km-grow-x .8s .1s cubic-bezier(.2,.7,.2,1) both}

/* checks and counters pop */
@keyframes km-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.ct-check svg,.dy-box svg,.dc-dot svg{animation:km-pop .3s ease both}

/* sheets and toasts */
@keyframes km-sheet{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}@keyframes km-fade{from{opacity:0}to{opacity:1}}
dialog.kl-sheet[open],dialog.flow-dialog[open]{animation:km-sheet .3s cubic-bezier(.2,.7,.2,1) both}dialog[open]::backdrop{animation:km-fade .25s ease both}
#toast{transition:opacity .25s ease,transform .25s ease}
.pwa-update{animation:km-sheet .4s .2s cubic-bezier(.2,.7,.2,1) both}

/* contest day: the running bird breathes so you can see the session is alive */
@keyframes km-breathe{0%,100%{box-shadow:0 0 0 0 rgba(224,165,38,.45)}50%{box-shadow:0 0 0 18px rgba(224,165,38,0)}}
.dy-run .bd-photo.is-xl{animation:km-breathe 2.4s ease-out infinite}
.dy-tl li.is-next i{animation:km-breathe 2.4s ease-out infinite}

/* "Reduce motion" is on: keep small, purposeful motion (short slides, charts growing, the phone demos, number counters),
   drop what travels far or drifts on its own (parallax, tilt, background zoom, bobbing, button shine). */
@keyframes km-fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp-hero-img img,.lp-btn-amber:before,.lp-cta-amber:before{animation:none!important}
  .js-motion [data-reveal]{transform:translateY(12px)}.js-motion [data-reveal].is-in{transform:none}
  .js-motion [data-reveal="left"],.js-motion [data-reveal="right"],.js-motion [data-reveal="zoom"]{transform:translateY(12px)}
}