/* NK Hero Wallpaper Transition */
html.nk-hwt-lock,
html.nk-hwt-lock body {
    overflow: hidden !important;
}

body.nk-hwt-body-blur > *:not(#nk-hwt-overlay) {
    filter: blur(5px);
    transform: scale(1.01);
    transition: filter 700ms ease, transform 700ms ease;
}

body.nk-hwt-body-clear > *:not(#nk-hwt-overlay) {
    filter: none;
    transform: none;
}

.nk-hwt-overlay,
.nk-hwt-overlay * {
    box-sizing: border-box;
}

.nk-hwt-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--nk-hwt-z, 999999);
    overflow: hidden;
    background: var(--nk-hwt-overlay, #000);
    isolation: isolate;
    pointer-events: auto;
    opacity: 1;
}

.nk-hwt-overlay.nk-hwt-hidden {
    display: none !important;
}

.nk-hwt-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--nk-hwt-bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08);
    animation: nkHwtKenburns 3600ms cubic-bezier(.16, 1, .3, 1) both;
}

.nk-hwt-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 30%, transparent 70%, rgba(0, 0, 0, .22));
}

.nk-hwt-splash {
    position: absolute;
    left: -10%;
    width: 120%;
    height: min(34vh, calc(var(--nk-hwt-splash-height, 24vh) + 4vh));
    z-index: 3;
    pointer-events: none;
    opacity: var(--nk-hwt-splash-opacity, .45);
    filter: blur(var(--nk-hwt-splash-blur, 48px));
    mix-blend-mode: screen;
    transform: translateZ(0);
    will-change: transform, opacity;
    background-color: transparent;
}

.nk-hwt-splash-top {
    top: -8vh;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 18%, rgba(255,255,255,.38) 38%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 76%),
        linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    animation: nkHwtSplashTop 2600ms ease-in-out infinite alternate;
}

.nk-hwt-splash-bottom {
    bottom: -8vh;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.74) 18%, rgba(255,255,255,.34) 38%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 76%),
        linear-gradient(0deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    animation: nkHwtSplashBottom 2600ms ease-in-out infinite alternate;
}

.nk-hwt-splash::before,
.nk-hwt-splash::after {
    content: "";
    position: absolute;
    left: 10%;
    width: 80%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow:
        0 0 26px rgba(255,255,255,.88),
        0 0 70px rgba(255,255,255,.58);
}

.nk-hwt-splash-top::before,
.nk-hwt-splash-top::after {
    top: 32%;
}

.nk-hwt-splash-bottom::before,
.nk-hwt-splash-bottom::after {
    bottom: 32%;
}

.nk-hwt-splash::after {
    left: 18%;
    width: 64%;
    opacity: .55;
    transform: translateY(18px);
}

.nk-hwt-splash-off .nk-hwt-splash {
    display: none;
}


.nk-hwt-skip {
    position: absolute;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 10;
    appearance: none;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    color: #fff;
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: .18em;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.nk-hwt-skip:hover,
.nk-hwt-skip:focus-visible {
    transform: translateY(-2px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.62);
    outline: none;
}

.nk-hwt-overlay.nk-hwt-is-revealing .nk-hwt-bg {
    transform: scale(1.12);
    transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), opacity 900ms ease;
}

.nk-hwt-overlay.nk-hwt-is-revealing .nk-hwt-splash {
    opacity: 0;
    transition: opacity 650ms ease;
}

.nk-hwt-overlay.nk-hwt-effect-fade.nk-hwt-is-revealing,
.nk-hwt-overlay.nk-hwt-effect-cinematic.nk-hwt-is-revealing {
    opacity: 0;
    transition: opacity 900ms ease;
}

.nk-hwt-overlay.nk-hwt-effect-cinematic.nk-hwt-is-revealing .nk-hwt-bg {
    transform: scale(1.18);
    filter: saturate(1.04) contrast(1.06) brightness(1.02);
}

.nk-hwt-overlay.nk-hwt-effect-slide.nk-hwt-is-revealing {
    transform: translateY(-102%);
    transition: transform 1000ms cubic-bezier(.77, 0, .175, 1);
}

.nk-hwt-overlay.nk-hwt-effect-iris {
    clip-path: circle(150% at 50% 50%);
}

.nk-hwt-overlay.nk-hwt-effect-iris.nk-hwt-is-revealing {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1050ms cubic-bezier(.77, 0, .175, 1), opacity 1050ms ease;
}

.nk-hwt-overlay.nk-hwt-effect-curtain {
    clip-path: inset(0 0 0 0);
}

.nk-hwt-overlay.nk-hwt-effect-curtain.nk-hwt-is-revealing {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
    transition: clip-path 1000ms cubic-bezier(.77, 0, .175, 1), opacity 1000ms ease;
}

.nk-hwt-overlay.nk-hwt-is-done {
    pointer-events: none;
    opacity: 0;
}

@keyframes nkHwtKenburns {
    from {
        transform: scale(1.08);
        filter: saturate(.86) contrast(1.06) brightness(.92);
    }
    to {
        transform: scale(1.0);
        filter: saturate(1.05) contrast(1.08) brightness(1);
    }
}

@keyframes nkHwtSplashTop {
    from {
        transform: translateY(-3%) scaleX(.98);
    }
    to {
        transform: translateY(3%) scaleX(1.06);
    }
}

@keyframes nkHwtSplashBottom {
    from {
        transform: translateY(3%) scaleX(.98);
    }
    to {
        transform: translateY(-3%) scaleX(1.06);
    }
}

@media (max-width: 767px) {
    .nk-hwt-bg {
        background-image: var(--nk-hwt-bg-mobile);
    }

    .nk-hwt-splash {
        width: 136%;
        left: -18%;
        height: min(28vh, calc(var(--nk-hwt-splash-height, 24vh) + 2vh));
    }

    .nk-hwt-skip {
        right: 14px;
        bottom: 14px;
        padding: 9px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nk-hwt-bg,
    .nk-hwt-splash {
        animation: none !important;
    }

    .nk-hwt-overlay.nk-hwt-is-revealing,
    .nk-hwt-overlay.nk-hwt-is-revealing .nk-hwt-bg,
    .nk-hwt-overlay.nk-hwt-effect-slide.nk-hwt-is-revealing,
    .nk-hwt-overlay.nk-hwt-effect-iris.nk-hwt-is-revealing,
    .nk-hwt-overlay.nk-hwt-effect-fade.nk-hwt-is-revealing,
    .nk-hwt-overlay.nk-hwt-effect-curtain.nk-hwt-is-revealing {
        transition-duration: 220ms !important;
    }
}