/* Site-wide motion: screens slide in with staggered content, sections reveal on scroll, header settles on scroll,
   logo and nav respond to touch. Only transform/opacity animate. Disabled under reduced motion. */
@keyframes kvF{from{opacity:0;transform:translateX(46px) scale(.985)}}
@keyframes kvB{from{opacity:0;transform:translateX(-46px) scale(.985)}}
@keyframes kvU{from{opacity:0;transform:translateY(24px)}}
.view.kv-f{animation:kvF .55s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
.view.kv-b{animation:kvB .55s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
.view.kv-go>*{animation:kvU .6s var(--ease,cubic-bezier(.2,.8,.2,1)) backwards;animation-delay:calc(var(--k,0) * 70ms + 80ms)}
/* scroll reveal */
.k-rv{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease,ease),transform .7s var(--ease,ease)}
.k-rv.k-on{opacity:1;transform:none}
/* header */
header.top{transition:box-shadow .3s,background-color .3s,backdrop-filter .3s}
header.top.k-scrolled{box-shadow:0 6px 24px rgba(22,32,44,.10)}
/* logo: bloom turns, the three o's bounce */
.brand .mark svg>g,.brand .wo{transform-box:fill-box}
.brand .mark svg>g{transform-origin:50% 50%;transition:transform .7s cubic-bezier(.2,1.2,.3,1)}
.brand .wo{transform-origin:50% 50%}
@media (hover:hover){
  .brand:hover .mark svg>g{transform:rotate(90deg) scale(1.08)}
  .brand:hover .wo{animation:kBounce .6s cubic-bezier(.3,1.6,.5,1)}
  .brand:hover .wo2{animation-delay:.08s}.brand:hover .wo3{animation-delay:.16s}
}
@keyframes kBounce{40%{transform:translateY(-12px) scale(1.12)}}
/* nav + buttons: tactile press */
nav.main button,.kform button,.kr-more,.chip{transition:transform .18s var(--ease,ease),opacity .2s}
nav.main button:active,.kform button:active,.chip:active{transform:scale(.94)}
nav.main button[aria-current]::after{transform-origin:0 50%;animation:kUl .45s var(--ease,ease) backwards}
@keyframes kUl{from{transform:scaleX(0)}}
/* living background: three pastel light pools drift behind the page (no blend mode: cheap to composite) */
@property --ac1{syntax:'<color>';inherits:true;initial-value:#F28C28}
@property --ac2{syntax:'<color>';inherits:true;initial-value:#E5487B}
@property --ac3{syntax:'<color>';inherits:true;initial-value:#0E7C86}
html.k-aura{background:#F6F6F2;transition:--ac1 1.6s ease,--ac2 1.6s ease,--ac3 1.6s ease}
html.k-aura body{background:transparent!important}
#kAura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
#kAura i{position:absolute;width:62vmax;height:62vmax;left:50%;top:50%;margin:-31vmax 0 0 -31vmax;border-radius:50%;will-change:transform}
#kAura i:nth-child(1){background:radial-gradient(closest-side,color-mix(in srgb,var(--ac1) 30%,transparent),transparent);animation:kA1 23s ease-in-out infinite alternate}
#kAura i:nth-child(2){background:radial-gradient(closest-side,color-mix(in srgb,var(--ac2) 22%,transparent),transparent);animation:kA2 29s ease-in-out infinite alternate}
#kAura i:nth-child(3){background:radial-gradient(closest-side,color-mix(in srgb,var(--ac3) 26%,transparent),transparent);animation:kA3 31s ease-in-out infinite alternate}
@keyframes kA1{from{transform:translate(-38vw,-30vh)}to{transform:translate(8vw,6vh)}}
@keyframes kA2{from{transform:translate(40vw,-22vh)}to{transform:translate(-4vw,30vh)}}
@keyframes kA3{from{transform:translate(-10vw,40vh)}to{transform:translate(34vw,-6vh)}}
html.k-scrolling #kAura i{animation-play-state:paused}
#kAura .p{margin:0;width:0;height:0;border-radius:0;background:none;animation:none;transform:translate(var(--ax,0),var(--ay,0));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
/* hero depth: headline, stage and stats drift at different speeds as the page scrolls (individual `translate`, so no clash with 3D poses) */
.khero{--sp:0}
.khero .kstage{translate:0 calc(var(--sp) * -46px)}
.khero h1,.khero .klede{translate:0 calc(var(--sp) * 26px);opacity:calc(1 - var(--sp) * .55)}
.khero .kform,.khero .kstats{translate:0 calc(var(--sp) * 14px)}
/* headline: lines rise out of a mask when the hero arrives */
.khero h1{animation:kH1 1s var(--ease,cubic-bezier(.2,.8,.2,1)) .15s backwards}
@keyframes kH1{from{clip-path:inset(0 0 100% 0);transform:translateY(40px)}to{clip-path:inset(-10% -5% -10% -5%)}}
.khero .klede,.khero .kform,.khero .kstats,.khero .kbadge{animation:kUp .8s var(--ease,cubic-bezier(.2,.8,.2,1)) backwards}
.khero .klede{animation-delay:.35s}.khero .kform{animation-delay:.5s}.khero .kstats{animation-delay:.65s}
@keyframes kUp{from{opacity:0;transform:translateY(26px)}}
html.k-splash .khero h1,html.k-splash .khero .klede,html.k-splash .khero .kform,html.k-splash .khero .kstats{animation-play-state:paused}
/* 3D tilt + glare on series cards */
.ks-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease,ease),box-shadow .3s}
.ks-card.k-t{transition:transform .08s linear}
/* screen changes: browser-native view transitions (cover grows into the builder); older browsers keep the slide above */
html.k-vt::view-transition-old(root){animation:kvOut .32s cubic-bezier(.4,0,.6,1) both}
html.k-vt::view-transition-new(root){animation:kvIn .55s cubic-bezier(.2,.8,.2,1) both}
html.k-vt.k-back::view-transition-old(root){animation-name:kvOutB}
html.k-vt.k-back::view-transition-new(root){animation-name:kvInB}
@keyframes kvOut{to{opacity:0;transform:scale(.97) translateX(-24px)}}
@keyframes kvIn{from{opacity:0;transform:scale(1.02) translateX(40px)}}
@keyframes kvOutB{to{opacity:0;transform:scale(.97) translateX(24px)}}
@keyframes kvInB{from{opacity:0;transform:scale(1.02) translateX(-40px)}}
::view-transition-group(kcover){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(kcover),::view-transition-new(kcover){height:100%;object-fit:cover;border-radius:14px}
/* nav: one liquid indicator slides (and overshoots) between tabs */
nav.main.k-liq{position:relative}
nav.main.k-liq button[aria-current]::after{display:none}
nav.main .k-ind{position:absolute;left:0;bottom:-1px;width:100px;height:3px;border-radius:3px;background:var(--accent);transform-origin:0 50%;pointer-events:none;
  transition:transform .55s cubic-bezier(.3,1.45,.4,1)}
nav.main:not(.k-liq) .k-ind{display:none}
@media (prefers-reduced-motion:reduce){
  #kAura{display:none}.khero .kstage,.khero h1,.khero .klede,.khero .kform,.khero .kstats{translate:none!important;opacity:1!important;animation:none!important;clip-path:none!important}

  .view.kv-f,.view.kv-b,.view.kv-go>*,.k-rv,.brand .wo,nav.main button[aria-current]::after{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}