:root {
	/* Colors */
    --color-muted: #494b50;
    --color-border: #1f2937;
    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f97316;

    --background_color: #0f0611;
    --nav_button_hover_color: #222222;
    --Ui_color: rgba(17, 17, 17, 0.8);
    --Ui_color_transparent: rgb(17, 17, 17, .8);
    --accent_color: rgba(204, 26, 236, 0.304);
    --accent_color2: #cc1aec;

    --color_white: white;
    --text_color: rgb(255, 255, 255);

    /*
    #cc1aec Pink
    #6a05f4 Purple
    */

    --vis-brightness: 1;
    --hue-rotation: 0deg;

	/* Typography */
	--font-sans: "Outfit";
    --font-sans2: "Satoshi";
    --font-sans3: "Alpino";
	--font-mono: "Inconsolata";
	--font-size-base: 1rem;
	--line-height-base: 1.5;

    /* Misc */
    --transition_duration: var(--ease-default);
    --small_gap: var(--gap-sm);
    --hover_scale: 1.03;
    --img-brightness: brightness(1);
}

:root {
	/* Radius */
	--radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 50%;

	/* Elevation / shadow */
	--shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
	--shadow-md: 0 4px 12px rgba(16,24,40,0.08);
	--shadow-lg: 0 12px 24px rgba(16,24,40,0.12);

	/* Transitions */
    --ease-default: 200ms;
	--ease-fast: 150ms;
	--ease-medium: 300ms;
	--ease-slow: 450ms;

    /* hovers */
    --hover-scale-btn: 1.03;

    /* Misc */
    --padding: 12px;
    --padding-sm: 10px;
    --padding-lg: 17px;
    --gap-sm: 8px;
    --gap: 16px;
    --gap-lg: 32px;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: var(--background_color);
    user-select: none;

    cursor: none;
}

figure {
    all: unset;
}

a {
    all: unset;
}

img {
    user-select: none;
    -webkit-user-drag: none;  
    -moz-user-drag: none; 
    pointer-events: none;
}

html {
    scrollbar-width: thin;
    scrollbar-color: gray var(--background_color);
}

button {
    all: unset;
    transition: var(--ease-fast);
}

nav {
    all: unset;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_contain, .img_cover {
    width: 100%;
    height: 100%;
}

    .img_contain {
        object-fit: contain;
    }

    .img_cover {
        object-fit: cover;
    }

.divider {
    width: 100%;
    height: var(--gap);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .2 !important;
}

.dividerThick {
    opacity: 1 !important;
    width: 100%;
    height: var(--gap);
    display: flex;
    justify-content: center;
    align-items: center;

    &::after {
        content: '';
        position: relative;
        background-color: var(--color_white);
        width: 100%;
        height: 2px;
    }
}

.divider::after {
    content: '';
    position: relative;
    background-color: var(--color_white);
    width: 100%;
    height: 1px;
}

.dividerVer {
    width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .5;
    background-color: var(--color_white);
}

.mediaBadge {
    font-weight: 600 !important;
    margin-right: 6px;
    display: inline-block;
    letter-spacing: 0.02em;
    font-size: .6rem !important;
}

.musicTimeValue {
    white-space: nowrap;
    display: inline-block;
}

.losslessBadge {
    color: #0eff4a !important;
}

.videoBadge {
    color: #4ea9ff !important;
}

.playlistEmpty {
    padding: 20px;
    text-align: center;
    opacity: 0.7;
}

.op0-2 { opacity: .2; }
.op0-5 { opacity: .5; }
.op0-8 { opacity: .8; }

.deactive {
    cursor: not-allowed !important;
    filter: grayscale(100%) !important;
    opacity: .5 !important;
}

.iconImg {
    filter: var(--img-brightness);
    aspect-ratio: 1 / 1;
    height: 1rem;
    width: 1rem;
}

.contextRight {
    position: absolute;
    right: var(--padding-sm);
    top: 50%;
    transform: translateY(-50%);
}

.uiColor {
    border: 1px solid rgba(111,76,255,0.08);
    backdrop-filter: blur(50px);
    background: linear-gradient(180deg, rgba(111,76,255,0.06), rgba(71,255,210,0.03));
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url("media/noise.png");
        background-size: 50% 50%;
        background-repeat: repeat;
        z-index: +1;
        animation: noiseMover 1s steps(2) infinite;
        opacity: .15;
        mix-blend-mode: luminosity;
        pointer-events: none;
    }
}

@keyframes noiseMover {
    0% { background-position: 0 0; }
    25% { background-position: -10% 5%; }
    50% { background-position: -15% -10%; }
    75% { background-position: 5% 15%; }
    100% { background-position: 0 0; }
}

.corner {
    border-radius: var(--radius-md);
    corner-shape: squircle;
}

span {
    transition: color var(--ease-medium);
}

.cursorDiv {
    aspect-ratio: 1 / 1;
    width: 25px;

    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;

    z-index: 9999;

    img {
        position: absolute;
        top: 40%;
        left: 40%;
        transform: scale(.6);

        filter:
        invert(100)
        drop-shadow(-1px 1px 0px var(--accent_color2))
        drop-shadow(-1px 1px 3px var(--accent_color2));

        display: none;
    }

    span {
        position: absolute;
        top: 10px;
        left: 30px;
        display: none;
        white-space: nowrap;
    }
}

.blur_bottom {
    position: fixed;
    width: 100%;
    height: 300px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    pointer-events: none;
}

.blur_bottom.project_blur {
    height: 200px;
}

.blur_bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    backdrop-filter: blur(3px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

.space {
    margin-left: 1cqh;
}

/* Start animation section */

.start_animation {
    position: fixed;
    z-index: 99999;
    height: 100vh;
    width: 100vw;
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    pointer-events: none;
    user-select: none;
}

.start_box {
    position: relative;
    background: linear-gradient(180deg, rgba(111,76,255,0.06), rgba(181, 71, 255, 0.3));
    background-color: rgb(0, 0, 0);
    animation: start_animation .7s cubic-bezier(1,.01,.93,.51) forwards;
    animation-delay: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.start_box:nth-child(2), .start_box:nth-child(4) {
    animation-delay: 0.6s;
}

.start_box:nth-child(3) {
    animation-delay: 0.65s;
}

@keyframes start_animation {
    0% {
        top: 0px;
    }
    100% {
        top: -200vh;
    }
}

.start_box span {
    animation: start_animation_span .5s ease forwards;
    display: none;
}

.start_box span:nth-child(2) {
    display: block;
}


@keyframes start_animation_span {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.TitleDiv {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    width: fit-content;
}

.textAppearText {
    display: inline-block;
    will-change: transform, opacity, filter;
}