/* Soft-cosmic doodles: pastel strokes on the light theme, behind hero content. transform/opacity only. */
.kdoodle{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.kdoodle.hero{z-index:0}
.khero .kgrid{position:relative;z-index:1}
.kdoodle.bb{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 64%);mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 64%)}
.kd-l{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible}
.kd-l.l1{animation:kdDrift 38s ease-in-out infinite alternate,kdTw 6s ease-in-out infinite}
.kd-l.l2{animation:kdDrift 26s ease-in-out -8s infinite alternate-reverse,kdTw 4.4s ease-in-out -1s infinite}
.kd-l.l3{animation:kdDrift 18s ease-in-out -3s infinite alternate,kdTw 3.2s ease-in-out -2s infinite;translate:calc(var(--hx,0) * -10px) calc(var(--hy,0) * -6px)}
@keyframes kdDrift{from{transform:translate3d(-8px,-5px,0)}to{transform:translate3d(10px,7px,0)}}
@keyframes kdTw{0%,100%{opacity:.95}50%{opacity:.45}}
.kd-au{position:absolute;left:-10%;width:120%;height:34%;opacity:.5;background:radial-gradient(60% 100% at 50% 50%,rgba(14,124,134,.16),transparent 70%);animation:kdAu 5s ease-in-out infinite alternate}
.kd-au.a1{top:2%}.kd-au.a2{bottom:6%;background:radial-gradient(60% 100% at 50% 50%,rgba(229,72,123,.14),transparent 70%);animation-duration:7s;animation-delay:-2s}
@keyframes kdAu{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
.kd-pl{position:absolute;right:14%;top:8%;width:clamp(180px,22vw,360px);color:#16202C;opacity:.07;animation:kdSpin 90s linear infinite}
.kd-pl svg{display:block;width:100%;height:auto;stroke:currentColor}
@keyframes kdSpin{to{rotate:360deg}}
.kd-d{position:absolute;opacity:.62;animation:kdFloat 7s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px currentColor)}
.kd-d svg{display:block;width:100%;height:auto;stroke:currentColor}
@keyframes kdFloat{from{transform:translateY(-7px) rotate(calc(var(--r) * -.5))}to{transform:translateY(7px) rotate(var(--r))}}
.kd-cm{position:absolute;width:120px;height:3px;border-radius:3px;opacity:0;background:linear-gradient(90deg,transparent,rgba(246,177,10,.95));transform:rotate(24deg) translateX(0)}
.kd-cm.go{animation:kdComet .32s ease-in forwards}
@keyframes kdComet{0%{opacity:0;transform:rotate(24deg) translateX(-40px)}20%{opacity:1}100%{opacity:0;transform:rotate(24deg) translateX(300px)}}
.kdoodle.kd-off *{animation-play-state:paused!important}
.kdoodle.hero .kd-d:nth-of-type(n+4){display:none}
@media (prefers-reduced-motion:reduce){.kdoodle *{animation:none!important}.kd-cm{display:none}}
.kdoodle.hero .kd-l{scale:.55}
/* hero: no coloured glows, smaller and quieter sketch stars */
.kdoodle.bb .kd-l{scale:.5;opacity:.7}
.kdoodle.bb .kd-d{opacity:.45}