:root {
    --ksp-bg: #000;
    --ksp-fg: #fff;
    --ksp-soft: rgba(255,255,255,.16);
    --ksp-softer: rgba(255,255,255,.07);
}

html.kynetik-preloader-lock,
body.kynetik-preloader-lock {
    overflow: hidden !important;
}

.kynetik-preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    color: #fff;
    opacity: 1;
    visibility: visible;
    transform: translateZ(0);
    transition: opacity .5s cubic-bezier(.2,.78,.25,1), visibility .5s linear;
}

.kynetik-preloader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.kynetik-preloader.is-leaving .kynetik-logo-shell {
    transform: scale(1.12);
    filter: blur(7px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2,.7,.1,1), filter .5s ease, opacity .35s ease;
}

.kynetik-preloader__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 47%, rgba(255,255,255,.06), rgba(255,255,255,.018) 20%, transparent 45%),
        radial-gradient(circle at center, transparent 25%, rgba(0,0,0,.2) 60%, #000 100%);
}

.kynetik-preloader__grain {
    position: absolute;
    inset: -35%;
    opacity: .11;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(circle at 25% 30%, rgba(255,255,255,.5) 0 1px, transparent 1px 4px),
        repeating-radial-gradient(circle at 72% 62%, rgba(255,255,255,.22) 0 1px, transparent 1px 5px);
    background-size: 9px 11px, 13px 17px;
    animation: ksp-grain .18s steps(2) infinite;
    mix-blend-mode: overlay;
}

.kynetik-preloader__scan {
    position: absolute;
    left: -10%;
    right: -10%;
    top: -18%;
    height: 15%;
    opacity: .45;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 38%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.02) 62%, transparent);
    filter: blur(.5px);
    animation: ksp-screen-scan 2.55s linear infinite;
}

.kynetik-grid {
    position: absolute;
    inset: -25%;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(650px) rotateX(68deg) translateY(27%);
    transform-origin: 50% 70%;
    -webkit-mask-image: radial-gradient(circle at center, #000 0 25%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 0 25%, transparent 68%);
    animation: ksp-grid-drift 7s linear infinite;
}

.kynetik-preloader__stage {
    position: relative;
    z-index: 10;
    width: min(90vw, 900px);
    min-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kynetik-logo-arena {
    position: relative;
    width: min(78vw, 610px);
    aspect-ratio: 589 / 569;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.kynetik-logo-shell,
.kynetik-logo-echo,
.kynetik-logo-slice {
    position: absolute;
    inset: 0;
}

.kynetik-logo-shell {
    z-index: 6;
    display: grid;
    place-items: center;
    animation: ksp-logo-breathe 2.5s ease-in-out 1.25s infinite;
}

.kynetik-logo-main,
.kynetik-logo-slice img,
.kynetik-logo-echo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.kynetik-logo-main {
    position: relative;
    z-index: 2;
    opacity: 0;
    filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(255,255,255,.08));
    animation: ksp-logo-core-in .55s cubic-bezier(.16,.84,.2,1) .9s forwards, ksp-logo-microglitch 4.4s steps(1,end) 1.65s infinite;
}

.kynetik-logo-slice {
    z-index: 3;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity, filter;
}

.kynetik-logo-slice img {
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255,255,255,.2));
}

.kynetik-logo-slice--a {
    clip-path: polygon(0 0, 100% 0, 100% 27%, 0 40%);
    transform: translate3d(-18%, -7%, 0) skewX(-9deg);
    animation: ksp-slice-a .74s cubic-bezier(.11,.91,.22,1) .06s forwards;
}

.kynetik-logo-slice--b {
    clip-path: polygon(0 25%, 100% 14%, 100% 52%, 0 62%);
    transform: translate3d(19%, 2%, 0) skewX(8deg);
    animation: ksp-slice-b .78s cubic-bezier(.11,.91,.22,1) .14s forwards;
}

.kynetik-logo-slice--c {
    clip-path: polygon(0 54%, 100% 45%, 100% 77%, 0 85%);
    transform: translate3d(-17%, 7%, 0) skewX(-7deg);
    animation: ksp-slice-c .82s cubic-bezier(.11,.91,.22,1) .22s forwards;
}

.kynetik-logo-slice--d {
    clip-path: polygon(0 77%, 100% 70%, 100% 100%, 0 100%);
    transform: translate3d(16%, 12%, 0) skewX(6deg);
    animation: ksp-slice-d .88s cubic-bezier(.11,.91,.22,1) .29s forwards;
}

.kynetik-logo-echo {
    z-index: 1;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

.kynetik-logo-echo img {
    filter: brightness(0) invert(1);
}

.kynetik-logo-echo--left {
    animation: ksp-echo-left 2.2s steps(1,end) 1.05s infinite;
}

.kynetik-logo-echo--right {
    animation: ksp-echo-right 2.45s steps(1,end) 1.15s infinite;
}

.kynetik-logo-flash {
    position: absolute;
    z-index: 7;
    left: -10%;
    right: -10%;
    top: 46%;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), #fff 50%, rgba(255,255,255,.15), transparent);
    box-shadow: 0 0 30px rgba(255,255,255,.75), 0 0 70px rgba(255,255,255,.3);
    animation: ksp-impact-flash 2.8s ease-in-out .72s infinite;
}

.kynetik-logo-scan {
    position: absolute;
    z-index: 8;
    top: -12%;
    bottom: -12%;
    left: -22%;
    width: 14%;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), rgba(255,255,255,.52), rgba(255,255,255,.03), transparent);
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: ksp-logo-scan 2.4s cubic-bezier(.3,.02,.2,1) 1.15s infinite;
}

.kynetik-orbit {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 47%;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.kynetik-orbit span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: -3px;
    left: 50%;
    background: #fff;
    box-shadow: 0 0 18px rgba(255,255,255,.8);
}

.kynetik-orbit--one {
    width: 78%;
    aspect-ratio: 1;
    animation: ksp-orbit 7.4s linear infinite;
}

.kynetik-orbit--two {
    width: 96%;
    aspect-ratio: 1;
    opacity: .48;
    border-style: dashed;
    animation: ksp-orbit-reverse 11s linear infinite;
}

.kynetik-impact-lines {
    position: absolute;
    z-index: 0;
    inset: 10%;
    pointer-events: none;
}

.kynetik-impact-lines i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 46%;
    transform-origin: 50% 0;
    background: linear-gradient(#fff, rgba(255,255,255,.06), transparent);
    opacity: 0;
    animation: ksp-impact-ray 2.15s ease-out 1s infinite;
}

.kynetik-impact-lines i:nth-child(1) { transform: rotate(0deg) translateY(-10%); }
.kynetik-impact-lines i:nth-child(2) { transform: rotate(45deg) translateY(-10%); animation-delay: 1.07s; }
.kynetik-impact-lines i:nth-child(3) { transform: rotate(90deg) translateY(-10%); animation-delay: 1.14s; }
.kynetik-impact-lines i:nth-child(4) { transform: rotate(135deg) translateY(-10%); animation-delay: 1.21s; }
.kynetik-impact-lines i:nth-child(5) { transform: rotate(180deg) translateY(-10%); animation-delay: 1.28s; }
.kynetik-impact-lines i:nth-child(6) { transform: rotate(225deg) translateY(-10%); animation-delay: 1.35s; }
.kynetik-impact-lines i:nth-child(7) { transform: rotate(270deg) translateY(-10%); animation-delay: 1.42s; }
.kynetik-impact-lines i:nth-child(8) { transform: rotate(315deg) translateY(-10%); animation-delay: 1.49s; }

.kynetik-loader-ui {
    position: relative;
    z-index: 12;
    width: min(66vw, 430px);
    margin-top: clamp(15px, 2.5vw, 28px);
}

.kynetik-loader-ui__track {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,.13);
    overflow: visible;
}

.kynetik-loader-ui__track::before {
    content: "";
    position: absolute;
    inset: -5px 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
}

.kynetik-loader-ui__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #fff;
    box-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 32px rgba(255,255,255,.16);
    transition: width .18s linear;
}

.kynetik-loader-ui__runner {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #000;
    box-shadow: 0 0 18px rgba(255,255,255,.72);
    transition: left .18s linear;
    animation: ksp-runner-spin .7s linear infinite;
}

.kynetik-loader-ui__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .34em;
    color: rgba(255,255,255,.52);
}

.kynetik-loader-ui__percentage {
    min-width: 42px;
    text-align: right;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
}

.kynetik-streaks {
    position: absolute;
    left: -15vw;
    right: -15vw;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    z-index: 2;
}

.kynetik-streaks--one {
    top: 15%;
    transform: rotate(-6deg);
}

.kynetik-streaks--two {
    bottom: 13%;
    transform: rotate(5deg) scaleX(-1);
}

.kynetik-streaks i {
    display: block;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 18%, rgba(255,255,255,.15) 55%, transparent 100%);
    transform: translateX(-125%);
    animation: ksp-streak 1.65s cubic-bezier(.2,.72,.2,1) infinite;
}

.kynetik-streaks i:nth-child(1) { width: 38%; animation-delay: -.12s; }
.kynetik-streaks i:nth-child(2) { width: 72%; animation-delay: -.34s; }
.kynetik-streaks i:nth-child(3) { width: 54%; animation-delay: -.58s; }
.kynetik-streaks i:nth-child(4) { width: 86%; animation-delay: -.81s; }
.kynetik-streaks i:nth-child(5) { width: 46%; animation-delay: -1.05s; }
.kynetik-streaks i:nth-child(6) { width: 66%; animation-delay: -1.29s; }
.kynetik-streaks i:nth-child(7) { width: 34%; animation-delay: -1.47s; }

.kynetik-corner {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: .25;
    z-index: 3;
}

.kynetik-corner--tl { left: 28px; top: 28px; border-left: 1px solid #fff; border-top: 1px solid #fff; }
.kynetik-corner--tr { right: 28px; top: 28px; border-right: 1px solid #fff; border-top: 1px solid #fff; }
.kynetik-corner--bl { left: 28px; bottom: 28px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; }
.kynetik-corner--br { right: 28px; bottom: 28px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }

@keyframes ksp-logo-core-in {
    0% { opacity: 0; transform: scale(.94); filter: brightness(0) invert(1) blur(10px); }
    65% { opacity: 1; transform: scale(1.015); filter: brightness(0) invert(1) blur(0); }
    100% { opacity: .96; transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(255,255,255,.08)); }
}

@keyframes ksp-slice-a {
    0% { opacity: 0; transform: translate3d(-18%,-7%,0) skewX(-9deg); filter: blur(12px); }
    65% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) skewX(0); filter: blur(0); }
}

@keyframes ksp-slice-b {
    0% { opacity: 0; transform: translate3d(19%,2%,0) skewX(8deg); filter: blur(12px); }
    65% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) skewX(0); filter: blur(0); }
}

@keyframes ksp-slice-c {
    0% { opacity: 0; transform: translate3d(-17%,7%,0) skewX(-7deg); filter: blur(12px); }
    65% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) skewX(0); filter: blur(0); }
}

@keyframes ksp-slice-d {
    0% { opacity: 0; transform: translate3d(16%,12%,0) skewX(6deg); filter: blur(12px); }
    65% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) skewX(0); filter: blur(0); }
}

@keyframes ksp-logo-breathe {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}

@keyframes ksp-logo-microglitch {
    0%, 79%, 83%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
    80% { transform: translate(-3px,1px); clip-path: inset(12% 0 58% 0); }
    81% { transform: translate(4px,-1px); clip-path: inset(48% 0 26% 0); }
    82% { transform: translate(-1px,0); clip-path: inset(72% 0 8% 0); }
}

@keyframes ksp-echo-left {
    0%, 76%, 100% { opacity: 0; transform: translateX(0); }
    77% { opacity: .13; transform: translateX(-9px); }
    79% { opacity: .04; transform: translateX(-3px); }
    81% { opacity: 0; transform: translateX(0); }
}

@keyframes ksp-echo-right {
    0%, 68%, 100% { opacity: 0; transform: translateX(0); }
    69% { opacity: .1; transform: translateX(11px); }
    72% { opacity: .03; transform: translateX(4px); }
    74% { opacity: 0; transform: translateX(0); }
}

@keyframes ksp-logo-scan {
    0%, 20% { left: -22%; opacity: 0; }
    28% { opacity: .55; }
    52% { opacity: .12; }
    67%,100% { left: 110%; opacity: 0; }
}

@keyframes ksp-impact-flash {
    0%, 18%, 100% { opacity: 0; transform: scaleX(.1); }
    21% { opacity: 1; transform: scaleX(1); }
    25% { opacity: .18; transform: scaleX(.72); }
    30% { opacity: 0; transform: scaleX(1.2); }
}

@keyframes ksp-impact-ray {
    0%, 20%, 100% { opacity: 0; height: 25%; }
    23% { opacity: .38; height: 52%; }
    38% { opacity: 0; height: 72%; }
}

@keyframes ksp-orbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ksp-orbit-reverse {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes ksp-streak {
    0% { transform: translateX(-125%); opacity: 0; }
    18% { opacity: .2; }
    62% { opacity: .06; }
    100% { transform: translateX(190%); opacity: 0; }
}

@keyframes ksp-grid-drift {
    to { background-position: 0 64px, 64px 0; }
}

@keyframes ksp-screen-scan {
    from { transform: translateY(-20vh); }
    to { transform: translateY(145vh); }
}

@keyframes ksp-grain {
    0% { transform: translate3d(-2%,1%,0); }
    25% { transform: translate3d(1%,-1%,0); }
    50% { transform: translate3d(2%,2%,0); }
    75% { transform: translate3d(-1%,-2%,0); }
    100% { transform: translate3d(-2%,1%,0); }
}

@keyframes ksp-runner-spin {
    to { transform: translate(-50%, -50%) rotate(405deg); }
}

@media (max-width: 767px) {
    .kynetik-preloader__stage {
        width: 92vw;
        min-height: 72vh;
    }

    .kynetik-logo-arena {
        width: min(86vw, 500px);
    }

    .kynetik-loader-ui {
        width: min(72vw, 360px);
        margin-top: 8px;
    }

    .kynetik-loader-ui__label {
        letter-spacing: .22em;
    }

    .kynetik-corner {
        width: 28px;
        height: 28px;
    }

    .kynetik-corner--tl { left: 16px; top: 16px; }
    .kynetik-corner--tr { right: 16px; top: 16px; }
    .kynetik-corner--bl { left: 16px; bottom: 16px; }
    .kynetik-corner--br { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kynetik-preloader *,
    .kynetik-preloader::before,
    .kynetik-preloader::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}