/* Разработано @KRJaizer */

.kx-thread{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.kx-thread path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kx-thread.draw path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.kx-thread.draw.in path{animation:kxDraw 1.9s cubic-bezier(.25,.7,.25,1) forwards}
@keyframes kxDraw{to{stroke-dashoffset:0}}

.kx-divider{position:relative;display:flex;justify-content:center;align-items:center;height:auto;padding:6px 22px 0;margin:0;pointer-events:none}
.kx-divider .kx-thread{position:static;width:min(300px,52%);height:auto;opacity:.3;color:var(--ink-soft)}
.kx-divider .kx-thread path{stroke-width:4}

.hero h1 .hl svg path,.hero h1 .hl svg line{stroke-dasharray:var(--len,420);stroke-dashoffset:var(--len,420);animation:kxDraw 1.4s .5s cubic-bezier(.25,.7,.25,1) forwards}

.sec-head h2,.hero h1{position:relative}
.kx-underline{display:block;width:112px;height:10px;margin-top:10px;color:var(--coral)}
.kx-underline path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.reveal .kx-underline path{stroke-dasharray:150;stroke-dashoffset:150}
.reveal.in .kx-underline path{animation:kxDraw 1.1s .25s cubic-bezier(.25,.7,.25,1) forwards}

.kx-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.kx-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.16;animation:kxDrift 15s ease-in-out infinite}
.kx-dot.sm{width:4px;height:4px;opacity:.2}
.kx-dot.lg{width:10px;height:10px;opacity:.1}
@keyframes kxDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(14px,-20px) scale(1.15)}
  66%{transform:translate(-10px,-9px) scale(.92)}
}

.kx-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.28;pointer-events:none;z-index:0;animation:kxOrb 22s ease-in-out infinite}
.kx-orb.teal{background:var(--teal)}
.kx-orb.rose{background:var(--rose)}
.kx-orb.sun{background:var(--sun);opacity:.2}
@keyframes kxOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(18px,-26px) scale(1.08)}
}

.hero-art{animation:kxBob 9s ease-in-out infinite}
@keyframes kxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.concept-art .moon-collage{animation:kxBob 11s ease-in-out infinite}

.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:.66s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.13s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.21s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.29s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.37s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.45s}

.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-34px;top:-34px;width:92px;height:92px;border-radius:50%;background:var(--rose);opacity:0;transform:scale(.6);transition:.42s cubic-bezier(.2,.7,.2,1);z-index:0}
.card:hover::after{opacity:.5;transform:scale(1)}
.card>*{position:relative;z-index:1}
.card:hover{transform:translateY(-6px)}

.space{position:relative}
.space::before{content:"";position:absolute;inset:6px;border:2px dashed rgba(255,255,255,.75);border-radius:14px;opacity:0;transition:.35s;pointer-events:none;z-index:2}
.space:hover::before{opacity:1;inset:10px}
.space:hover img{transform:scale(1.05)}
.space img{transition:.6s cubic-bezier(.2,.7,.2,1)}

.post:hover{transform:translateY(-6px)}
.post .ph{overflow:hidden}
.post:hover .ph img{transform:scale(1.06)}

.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 55%);opacity:0;transition:.35s}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(1px) scale(.99)}

.hero-stats .s b{transition:.3s}
.hero-stats .s{transition:.3s}
.hero-stats .s:hover{transform:translateY(-3px)}
.hero-stats .s:hover b{color:var(--coral)}

.brand .logo,.brand-cat{transition:.4s cubic-bezier(.2,.7,.2,1)}
.brand:hover .logo,.brand:hover .brand-cat{transform:rotate(-7deg) scale(1.06)}

.kx-heart{position:absolute;pointer-events:none;z-index:1;animation:kxFloatSlow 8s ease-in-out infinite}
@keyframes kxFloatSlow{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}

.kx-count{font-variant-numeric:tabular-nums}

.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--coral);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:.28s cubic-bezier(.2,.7,.2,1)}
.nav-links a{position:relative}
.nav-links a:hover::after{transform:scaleX(1)}

.sec{position:relative}
.sec>.wrap{position:relative;z-index:1}

@media(max-width:1000px){
  .kx-orb{display:none}
}
@media(max-width:760px){
  .kx-divider{padding-top:2px}
  .kx-divider .kx-thread{width:min(210px,64%)}
  .hero-art,.concept-art .moon-collage{animation-duration:12s}
}

@media (prefers-reduced-motion:reduce){
  .kx-dot,.kx-orb,.hero-art,.concept-art .moon-collage,.kx-heart{animation:none!important}
  .kx-thread.draw path,.reveal .kx-underline path,.hero h1 .hl svg path{stroke-dashoffset:0!important;animation:none!important}
  .reveal-stagger>*{opacity:1;transform:none;transition:none}
}