/**
 * PX Frontend Styles
 * Cursor + Scrollbar (Optimized)
 */

/* Custom Cursor */
.px-custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--px-cursor-size, 8px);
    height: var(--px-cursor-size, 8px);
    background-color: var(--px-cursor-color, #32f08c);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
}

.px-custom-cursor-dot.visible {
    opacity: 1;
}

.px-custom-cursor-dot.hover-state {
    box-shadow: 0 0 40px 15px var(--px-cursor-color-alpha70, rgba(50, 240, 140, 0.7));
}

.px-custom-cursor-dot.click-effect {
    animation: px-dot-pulse 0.3s ease-out;
}

.px-custom-cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--px-cursor-outline-size, 30px);
    height: var(--px-cursor-outline-size, 30px);
    border: var(--px-cursor-border-width, 2px) solid var(--px-cursor-color, #32f08c);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.15s ease, border-width 0.15s ease, background-color 0.15s ease;
    will-change: transform;
}

.px-custom-cursor-outline.visible {
    opacity: 0.5;
}

.px-custom-cursor-outline.hover-state {
    opacity: 0.4;
    border-width: calc(var(--px-cursor-border-width, 2px) * 1.5);
    background-color: var(--px-cursor-color-alpha20, rgba(50, 240, 140, 0.15));
}

.px-custom-cursor-outline.click-effect {
    animation: px-outline-pulse 0.3s ease-out;
}

@keyframes px-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--px-cursor-color-alpha30);
    }

    50% {
        box-shadow: 0 0 20px 8px var(--px-cursor-color-alpha30);
    }
}

@keyframes px-outline-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

/* Custom Scrollbar - Hide native */
body.px-custom-scrollbar-active,
html.px-custom-scrollbar-active {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.px-custom-scrollbar-active::-webkit-scrollbar,
html.px-custom-scrollbar-active::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html.px-custom-scrollbar-active {
    overflow-y: scroll;
}

/* Track */
.px-scrollbar-track-y {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--px-scrollbar-width, 8px);
    height: 100vh;
    background-color: var(--px-scrollbar-track-color, rgba(0, 0, 0, 0.05));
    z-index: 99990;
    pointer-events: auto;
    transform: translateZ(0);
}

/* Expanded state - width animated by JS */
.px-scrollbar-track-y.expanded {
    background-color: var(--px-scrollbar-track-hover-color, rgba(0, 0, 0, 0.1));
}

/* Thumb */
.px-scrollbar-thumb-y {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 30px;
    background: var(--px-scrollbar-thumb-color, rgba(168, 124, 79, 0.6));
    border-radius: var(--px-scrollbar-radius, 4px);
    cursor: pointer;
    will-change: transform;
    transition: background 0.2s ease;
}

.px-scrollbar-thumb-y:hover,
.px-scrollbar-track-y.expanded .px-scrollbar-thumb-y {
    background: var(--px-scrollbar-thumb-hover-color, rgba(168, 124, 79, 0.9));
}

.px-scrollbar-thumb-y.active {
    background: var(--px-scrollbar-thumb-hover-color, rgba(168, 124, 79, 1));
}

/* Mobile - Disable */
@media (max-width: 768px) {

    .px-custom-cursor-dot,
    .px-custom-cursor-outline,
    .px-scrollbar-track-y,
    .px-scrollbar-hover-zone {
        display: none !important;
    }

    body.px-custom-scrollbar-active,
    html.px-custom-scrollbar-active {
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    body.px-custom-scrollbar-active::-webkit-scrollbar,
    html.px-custom-scrollbar-active::-webkit-scrollbar {
        width: auto;
        height: auto;
        display: block;
    }
}