/* ===== Loader — „Zadrapanie” ===== */
html.wh-loading{overflow:hidden}
.wh-loader{position:fixed;inset:0;z-index:1000;pointer-events:auto;overflow:hidden;animation:whLdShake .26s .30s linear both,whLdGone 0s 1.62s forwards}
.wh-ld__half{position:absolute;inset:0;background:#020617;will-change:transform}
.wh-ld__half::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.wh-ld__half::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 45% at 50% 50%,rgba(22,163,74,.16),rgba(22,163,74,0) 70%);opacity:0;animation:whLdHeat .9s .32s ease-out both}
.wh-ld__half--a{clip-path:polygon(0 0,64% 0,36% 100%,0 100%);animation:whLdA .55s 1.04s cubic-bezier(.7,0,.2,1) both}
.wh-ld__half--b{clip-path:polygon(64% 0,100% 0,100% 100%,36% 100%);animation:whLdB .55s 1.04s cubic-bezier(.7,0,.2,1) both}
@keyframes whLdA{to{transform:translate(-62vw,-26vh)}}
@keyframes whLdB{to{transform:translate(62vw,26vh)}}
@keyframes whLdHeat{0%{opacity:0}12%{opacity:1}100%{opacity:.55}}
@keyframes whLdGone{to{visibility:hidden;pointer-events:none}}
@keyframes whLdShake{0%{transform:translate(0,0)}15%{transform:translate(-9px,6px)}30%{transform:translate(8px,-7px)}45%{transform:translate(-6px,4px)}60%{transform:translate(5px,-3px)}75%{transform:translate(-2px,2px)}100%{transform:translate(0,0)}}

/* boot line before the strike */
.wh-ld__boot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.32em;color:#64748B;white-space:nowrap;animation:whLdBoot .34s ease-out both,whLdBootOut .12s .30s steps(2) forwards}
.wh-ld__boot b{display:block;width:8px;height:8px;background:#4ADE80;box-shadow:0 0 12px #4ADE80;animation:whBlink .5s steps(1) infinite}
.wh-ld__boot i{display:block;width:7px;height:13px;background:#94A3B8;animation:whBlink .4s steps(1) infinite}
@keyframes whLdBoot{from{opacity:0;letter-spacing:.6em}to{opacity:1}}
@keyframes whLdBootOut{0%{opacity:1;transform:translate(-50%,-50%)}50%{opacity:.6;transform:translate(-46%,-50%) skewX(-20deg)}100%{opacity:0;transform:translate(-54%,-50%)}}

/* the strike */
.wh-ld__strike{position:absolute;left:50%;top:50%;width:min(560px,78vw);transform:translate(-50%,-50%);animation:whLdStrikeOut .36s 1.02s cubic-bezier(.6,0,.4,1) forwards}
.wh-ld__claw{display:block;width:100%;height:auto;clip-path:polygon(110% -10%,110% -10%,110% -10%);animation:whLdRip .17s .30s cubic-bezier(.9,0,.1,1) forwards,whLdPop .5s .30s cubic-bezier(.2,1.6,.3,1) both;filter:drop-shadow(0 0 28px rgba(74,222,128,.55))}
@keyframes whLdRip{0%{clip-path:polygon(110% -10%,110% -10%,110% -10%)}100%{clip-path:polygon(-150% -10%,110% -10%,110% 250%)}}
@keyframes whLdPop{0%{transform:scale(1.22) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes whLdStrikeOut{0%{opacity:1;filter:blur(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18);filter:blur(6px)}}

/* glowing tear line along the cut */
.wh-ld__cut{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:whLdCut .5s .92s ease-out both}
.wh-ld__cut line{stroke:#4ADE80;stroke-width:.35;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #4ADE80)}
@keyframes whLdCut{0%{opacity:0}18%{opacity:1}60%{opacity:.8}100%{opacity:0}}

/* impact flash + sparks */
.wh-ld__flash{position:absolute;inset:0;background:radial-gradient(28% 34% at 50% 50%,rgba(240,253,244,.7),rgba(74,222,128,.28) 45%,rgba(22,163,74,0) 100%);opacity:0;animation:whLdFlash .38s .31s ease-out both}
@keyframes whLdFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.wh-ld__sparks{position:absolute;left:50%;top:50%;width:0;height:0}
.wh-ld__sparks i{position:absolute;left:0;top:0;width:var(--s,6px);height:var(--s,6px);background:#4ADE80;box-shadow:0 0 10px #4ADE80;opacity:0;animation:whLdSpark .62s calc(.32s + var(--d,0s)) cubic-bezier(.15,.7,.3,1) both}
@keyframes whLdSpark{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(160deg) scale(.3)}}

.wh-ld__sheen{animation:whLdSheen .5s .55s cubic-bezier(.6,0,.2,1) both}
@keyframes whLdSheen{from{transform:translateX(0)}to{transform:translateX(760px)}}
@media (prefers-reduced-motion: reduce){.wh-loader{display:none!important}html.wh-loading{overflow:auto}}