/* ============================================================
BRAND LIQUID SCROLLBAR - CSS ONLY (v6)
Fixed:
- full pill outline is always visible from the initial state
- liquid starts at 10%
- wave moves from the initial 10% fill state
- end state becomes fully filled
============================================================ */
:root {
--ink: #02253d;
--brand-gradient-90: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20%, #64eda8 48%, #d0f88d 100%);
--scrollbar-rail-width: 12px;
--scrollbar-rail-top: 10px;
--scrollbar-pill-width: var(--scrollbar-rail-width);
--scrollbar-pill-height: min(11vh, 88px);
--scrollbar-pill-right: 0px;
--scrollbar-pill-top-gap: 2px;
--scrollbar-pill-bottom-gap: 2px;
--scrollbar-pill-top: calc(var(--scrollbar-rail-top) + var(--scrollbar-pill-top-gap));
--scrollbar-radius: 999px;
--scrollbar-border: 0.75px;
--wave-tile: 40px;
}

@property --liquid-fill {
syntax: "<percentage>";
initial-value: 10%;
inherits: false;
}

html {
scrollbar-width: none;
-ms-overflow-style: none;
}

body::-webkit-scrollbar {
width: 0;
height: 0;
}

body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb {
background: transparent;
}

/* ---- Dark rail ---- */
body::before {
content: "";
position: fixed;
top: var(--scrollbar-rail-top);
right: 0;
z-index: 99990;
width: var(--scrollbar-rail-width);
height: calc(100vh - var(--scrollbar-rail-top));
background: var(--ink);
pointer-events: none;
}

/* ---- Pill shell: full outline stays visible at every scroll position ---- */
body::after {
content: "";
position: fixed;
top: var(--scrollbar-pill-top);
right: var(--scrollbar-pill-right);
z-index: 99992;
box-sizing: border-box;
width: var(--scrollbar-pill-width);
height: var(--scrollbar-pill-height);
padding: var(--scrollbar-border);
border-radius: var(--scrollbar-radius);
pointer-events: none;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.22),
inset 0 0 18px rgba(255, 255, 255, 0.05);
background: var(--brand-gradient-90);
animation-name: liquidScrollbarTravel;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-duration: auto;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}

/* ---- Liquid layer: full size, under the outline ring, so there is no inner gap ---- */
html::after {
--liquid-fill: 10%;

content: "";
position: fixed;
top: var(--scrollbar-pill-top);
right: var(--scrollbar-pill-right);
z-index: 99991;
width: var(--scrollbar-pill-width);
height: var(--scrollbar-pill-height);
border-radius: var(--scrollbar-radius);
overflow: hidden;
pointer-events: none;

background-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2020'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='%2302bcdd'/%3E%3Cstop%20offset='50%25'%20stop-color='%2364eda8'/%3E%3Cstop%20offset='100%25'%20stop-color='%23d0f88d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill='url(%23g)'%20d='M0,4%20C5,0%2015,0%2020,4%20C25,8%2035,8%2040,4%20L40,20%20L0,20%20Z'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: var(--wave-tile) var(--liquid-fill);
background-position: 0 100%;

clip-path: inset(calc(100% - var(--liquid-fill)) 0 0 0 round var(--scrollbar-radius));

animation-name: liquidScrollbarFill, liquidScrollbarTravel, waveFlow;
animation-timing-function: linear, linear, linear;
animation-fill-mode: both, both, none;
animation-iteration-count: 1, 1, infinite;
animation-timeline: scroll(root block), scroll(root block), auto;
animation-duration: auto, auto, 1.6s;
}

@keyframes liquidScrollbarTravel {
from {
transform: translateY(0);
}

to {
transform: translateY(calc(100vh - var(--scrollbar-pill-height) - var(--scrollbar-pill-top) - var(--scrollbar-pill-bottom-gap)));
}
}

@keyframes liquidScrollbarFill {
0% {
--liquid-fill: 10%;
}

96% {
--liquid-fill: 100%;
}

100% {
--liquid-fill: 200%;
}
}

@keyframes waveFlow {
from {
background-position: 0 100%;
}

to {
background-position: calc(-1 * var(--wave-tile)) 100%;
}
}

@supports not (animation-timeline: scroll(root block)) {
html::after {
--liquid-fill: 50%;
}
}

body.preloader-active::before,
body.preloader-active::after,
html:has(body.preloader-active)::after {
opacity: 0;
visibility: hidden;
}

html,
body,
body * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

@media (prefers-reduced-motion: reduce) {
html::after {
animation-name: liquidScrollbarFill, liquidScrollbarTravel;
animation-timing-function: linear, linear;
animation-fill-mode: both, both;
animation-iteration-count: 1, 1;
animation-timeline: scroll(root block), scroll(root block);
animation-duration: auto, auto;
}
}

@media (max-width: 768px) {
body::before,
body::after,
html::after {
display: none;
}
}