/* Intro: the logo draws itself on a dark stage while the site loads, then zooms through to the page. */
html.k-splash{overflow:hidden;background:#FBF8F1}
html.k-splash body{visibility:hidden}
html.k-splash .khero *,html.k-splash .krails *,html.k-splash #kseries *{animation-play-state:paused!important}
#kSplash{position:fixed;inset:0;z-index:99999;visibility:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 46%,#FFFFFF 0%,#FBF8F1 60%,#F3EEE2 100%);color:#16202C;transition:opacity .6s ease .15s}
#kSplash.out{opacity:0;pointer-events:none}
#kSplash .ks-glow{position:absolute;left:50%;top:46%;width:90vmin;height:90vmin;margin:-45vmin 0 0 -45vmin;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,rgba(242,140,40,.0),rgba(242,140,40,.34),rgba(229,72,123,.0),rgba(229,72,123,.30),rgba(14,124,134,.0),rgba(14,124,134,.32),rgba(242,140,40,0));
  filter:blur(40px);animation:ksGlow 2.6s ease-out .1s forwards,ksSpin 14s linear infinite}
@keyframes ksGlow{to{opacity:1}}@keyframes ksSpin{to{transform:rotate(360deg)}}
#kSplash .ks-logo{position:relative;z-index:1;overflow:hidden;padding:14px 20px;display:flex;align-items:center;gap:clamp(8px,2vw,18px);transform-origin:50% 50%;transition:transform .75s cubic-bezier(.6,0,.9,.4)}
#kSplash.out .ks-logo{transform:scale(2.3)}
#kSplash .mark svg{display:block;height:clamp(60px,15vw,112px);width:auto;overflow:visible}
#kSplash .wm svg{display:block;height:clamp(52px,12.5vw,92px);width:auto;overflow:visible}
/* bloom: spins in, petals open one by one */
#kSplash .mark svg>g{transform-origin:0 0;animation:ksBloom 1.1s cubic-bezier(.2,1.2,.3,1) 1.3s backwards,ksBreath 3.2s ease-in-out 2.4s infinite}
@keyframes ksBreath{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(24deg) scale(1.08)}}
@keyframes ksBloom{from{transform:rotate(-200deg) scale(.05)}}
#kSplash .mark path[transform]{animation:ksPetal .5s ease backwards}
#kSplash .mark path[transform="rotate(0)"]{animation-delay:1.45s}#kSplash .mark path[transform="rotate(90)"]{animation-delay:1.57s}
#kSplash .mark path[transform="rotate(180)"]{animation-delay:1.69s}#kSplash .mark path[transform="rotate(270)"]{animation-delay:1.81s}
@keyframes ksPetal{from{opacity:0}}
/* wordmark: strokes draw, then the three o's pop */
#kSplash .wm svg>path,#kSplash .wm svg>circle[stroke]{stroke-dasharray:1;stroke-dashoffset:0;animation:ksDraw .75s cubic-bezier(.5,0,.2,1) backwards;animation-delay:calc(1.65s + var(--n) * .1s)}
@keyframes ksDraw{from{stroke-dashoffset:1}}
#kSplash .wo{transform-box:fill-box;transform-origin:50% 100%;animation:ksPop .6s cubic-bezier(.2,1.5,.35,1) backwards,ksWave 1.3s ease-in-out infinite}
#kSplash .wo1{animation-delay:2.35s,2.85s}#kSplash .wo2{animation-delay:2.5s,2.97s}#kSplash .wo3{animation-delay:2.65s,3.09s}
@keyframes ksWave{0%,55%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(-16px) scale(.94,1.1)}38%{transform:translateY(0) scale(1.1,.88)}}
@keyframes ksPop{from{transform:scale(0);opacity:0}}
/* rings pulse out from behind the logo; confetti bursts when the o's land */
#kSplash .ks-ring{position:absolute;left:50%;top:46%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;border:2px solid rgba(242,140,40,.55);opacity:0;animation:ksRing 2.4s cubic-bezier(.2,.6,.3,1) .3s infinite}
#kSplash .ks-ring.r2{border-color:rgba(229,72,123,.5);animation-delay:.9s}#kSplash .ks-ring.r3{border-color:rgba(14,124,134,.5);animation-delay:1.5s}
@keyframes ksRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
#kSplash .ks-conf{position:absolute;left:50%;top:46%;width:0;height:0;pointer-events:none}
#kSplash .ks-c{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);border-radius:50%;background:var(--c);opacity:0;animation:ksConf 1.1s cubic-bezier(.15,.7,.3,1) var(--d) both}
@keyframes ksConf{0%{opacity:1;transform:translate(0,0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
/* light sweep across the logo */
#kSplash .ks-logo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-20%;width:16%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(0) skewX(-18deg);animation:ksSweep 1s ease-in-out 2.7s forwards;opacity:0}
@keyframes ksSweep{0%{opacity:1;transform:translateX(0) skewX(-18deg)}100%{opacity:1;transform:translateX(520%) skewX(-18deg)}}
#kSplash .ks-skip{position:absolute;right:16px;bottom:16px;border:0;background:none;color:rgba(22,32,44,.5);font:500 13px/1 system-ui,sans-serif;padding:10px;cursor:pointer}
/* after the intro: the header logo and the hero arrive */
html.k-reveal .brand .mark svg>g{transform-origin:0 0;animation:ksBloom .9s cubic-bezier(.2,1.2,.3,1) backwards}
html.k-reveal .brand .wo{transform-box:fill-box;transform-origin:50% 50%;animation:ksPop .5s cubic-bezier(.2,1.5,.35,1) backwards}
html.k-reveal .brand .wo2{animation-delay:.1s}html.k-reveal .brand .wo3{animation-delay:.2s}
/* the crayon star */
#kSplash .ks-draw{position:fixed;z-index:1;pointer-events:none;animation:ksTurn 2s linear .1s both,ksMorph .5s cubic-bezier(.6,0,.9,.4) 1.45s forwards}
@keyframes ksTurn{to{rotate:8deg}}
@keyframes ksMorph{to{transform:scale(1.4) rotate(80deg);opacity:0}}
#kSplash .ks-draw>svg:first-child{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#kSplash .ks-draw path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#kSplash .ks-draw .s{stroke:url(#ksg);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;animation:ksStar 1s cubic-bezier(.45,0,.3,1) .1s forwards}
@keyframes ksStar{to{stroke-dashoffset:0}}
#kSplash .ks-draw .f{fill:#FFE9A8;stroke:none;opacity:0;animation:ksFill .45s ease 1.1s forwards}
@keyframes ksFill{to{opacity:.8}}
#kSplash .ks-draw .g{stroke:#FFC857;stroke-width:9;opacity:0;filter:blur(5px);animation:ksGlowIn .4s ease 1.1s forwards,ksPulse 1.5s ease-in-out 1.5s infinite}
@keyframes ksGlowIn{to{opacity:.75}}@keyframes ksPulse{0%,100%{opacity:.75}50%{opacity:.35}}
#kSplash .ks-pencil{position:absolute;left:0;top:0;offset-rotate:0deg;offset-anchor:5% 95%;offset-distance:0%;animation:ksPen 1s cubic-bezier(.45,0,.3,1) .1s forwards,ksPenOut .3s ease 1.15s forwards;filter:drop-shadow(0 0 6px rgba(242,140,40,.8))}
@keyframes ksPen{to{offset-distance:100%}}
@keyframes ksPenOut{to{opacity:0;translate:26px -26px}}
#kSplash .ks-spk{position:absolute;width:14px;height:14px;margin:-7px;background:#F6C445;opacity:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:ksTw 1.3s ease-in-out calc(1.15s + var(--k) * .07s) 1 both}
@keyframes ksTw{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1) rotate(60deg)}100%{opacity:0;transform:scale(.4) rotate(120deg)}}
@media (prefers-reduced-motion:reduce){#kSplash{display:none}}