/* ENKINS Vertical Scroll — no dependencies */

#enkins-vscroll,
[data-enkins-vscroll] {
    --evs-duration: 900ms;
    --evs-ease: cubic-bezier(.22, 1, .36, 1);
    --evs-bg: #080808;
    --evs-nav: #ffffff;
    --evs-accent: #e31313;

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--evs-bg);
    overscroll-behavior: contain;
    -webkit-tap-highlight-color: transparent;
}

#enkins-vscroll.enkins-vscroll-ready > .enkins-vslide,
[data-enkins-vscroll].enkins-vscroll-ready > .enkins-vslide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition:
        transform var(--evs-duration) var(--evs-ease),
        opacity calc(var(--evs-duration) * .78) var(--evs-ease);
    will-change: transform, opacity;
}

#enkins-vscroll.enkins-vscroll-ready > .enkins-vslide::-webkit-scrollbar,
[data-enkins-vscroll].enkins-vscroll-ready > .enkins-vslide::-webkit-scrollbar {
    display: none;
}

/* Default animation: premium card-stack */
#enkins-vscroll.enkins-vscroll-ready > .enkins-vslide.is-before,
[data-enkins-vscroll].enkins-vscroll-ready > .enkins-vslide.is-before {
    z-index: 1;
    transform: translate3d(0, -11%, 0) scale(.945);
    opacity: .42;
    pointer-events: none;
}

#enkins-vscroll.enkins-vscroll-ready > .enkins-vslide.is-active,
[data-enkins-vscroll].enkins-vscroll-ready > .enkins-vslide.is-active {
    z-index: 3;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

#enkins-vscroll.enkins-vscroll-ready > .enkins-vslide.is-after,
[data-enkins-vscroll].enkins-vscroll-ready > .enkins-vslide.is-after {
    z-index: 2;
    transform: translate3d(0, 101%, 0) scale(.985);
    opacity: 1;
    pointer-events: none;
}

/* Subtle depth during a transition. */
#enkins-vscroll.enkins-vscroll-ready::after,
[data-enkins-vscroll].enkins-vscroll-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 12%),
        linear-gradient(0deg, rgba(0,0,0,.20), transparent 22%);
    transition: opacity 260ms ease;
}

#enkins-vscroll.enkins-vscroll-ready.is-transitioning::after,
[data-enkins-vscroll].enkins-vscroll-ready.is-transitioning::after {
    opacity: 1;
}

/* Optional animation mode: classic full-screen curtain. Add CSS class enkins-vscroll-curtain to root. */
#enkins-vscroll.enkins-vscroll-curtain > .enkins-vslide.is-before,
[data-enkins-vscroll].enkins-vscroll-curtain > .enkins-vslide.is-before {
    transform: translate3d(0, -100%, 0) scale(1);
    opacity: 1;
    filter: none;
}

#enkins-vscroll.enkins-vscroll-curtain > .enkins-vslide.is-after,
[data-enkins-vscroll].enkins-vscroll-curtain > .enkins-vslide.is-after {
    transform: translate3d(0, 100%, 0) scale(1);
    opacity: 1;
    filter: none;
}

/* Optional fade mode uses filter intentionally; default stack mode stays transform/opacity-only for speed. */
#enkins-vscroll.enkins-vscroll-fade > .enkins-vslide,
[data-enkins-vscroll].enkins-vscroll-fade > .enkins-vslide {
    transition:
        transform var(--evs-duration) var(--evs-ease),
        opacity calc(var(--evs-duration) * .78) var(--evs-ease),
        filter var(--evs-duration) var(--evs-ease);
    will-change: transform, opacity, filter;
}

/* Optional animation mode: cinematic fade. Add CSS class enkins-vscroll-fade to root. */
#enkins-vscroll.enkins-vscroll-fade > .enkins-vslide.is-before,
#enkins-vscroll.enkins-vscroll-fade > .enkins-vslide.is-after,
[data-enkins-vscroll].enkins-vscroll-fade > .enkins-vslide.is-before,
[data-enkins-vscroll].enkins-vscroll-fade > .enkins-vslide.is-after {
    transform: translate3d(0,0,0) scale(1.035);
    opacity: 0;
    filter: blur(4px) brightness(.72);
}

/* Optional right-side navigation. Add CSS class enkins-vscroll-dots to root. */
.enkins-vscroll-nav {
    position: absolute;
    top: 50%;
    right: clamp(16px, 2.4vw, 42px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateY(-50%);
    color: var(--evs-nav);
    mix-blend-mode: difference;
}

.enkins-vscroll-nav[hidden] {
    display: none !important;
}

.enkins-vscroll-nav__dot {
    appearance: none;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .38;
    cursor: pointer;
    transition: height 320ms ease, opacity 320ms ease, background 320ms ease;
}

.enkins-vscroll-nav__dot.is-active {
    height: 30px;
    opacity: 1;
    background: var(--evs-accent);
}

.enkins-vscroll-nav__counter {
    margin-top: 4px;
    font: 600 10px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* Native scroll-snap mode for coarse/touch input. */
#enkins-vscroll.is-native-touch,
[data-enkins-vscroll].is-native-touch {
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#enkins-vscroll.is-native-touch::-webkit-scrollbar,
[data-enkins-vscroll].is-native-touch::-webkit-scrollbar {
    display: none;
}

#enkins-vscroll.is-native-touch > .enkins-vslide,
[data-enkins-vscroll].is-native-touch > .enkins-vslide {
    position: relative;
    inset: auto;
    z-index: auto !important;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* Elementor editor: never hijack the editor canvas. */
body.elementor-editor-active #enkins-vscroll,
body.elementor-editor-active [data-enkins-vscroll] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.elementor-editor-active #enkins-vscroll > *,
body.elementor-editor-active [data-enkins-vscroll] > * {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #enkins-vscroll,
    [data-enkins-vscroll] {
        --evs-duration: 1ms;
        scroll-behavior: auto;
    }

    #enkins-vscroll > .enkins-vslide,
    [data-enkins-vscroll] > .enkins-vslide,
    .enkins-vscroll-nav__dot {
        transition-duration: 1ms !important;
    }
}

@media (max-width: 767px) {
    .enkins-vscroll-nav {
        right: 12px;
        gap: 9px;
    }

    .enkins-vscroll-nav__counter {
        display: none;
    }
}