/* Reset some default browser styles */
:root {

    --coral: #dd393a;
    --coral-hot: #fc1a32;
    --coral-light: #ff6b6b;
    --purple: #4c3594;
    --purple-hot: #6a00c9;
    --purple-light: #6f5bb8;
    --bg-height: 145vh;/*1300px; */
}

/* @supports (-webkit-overflow-scrolling: touch) {

    html,
    body {
        overscroll-behavior: none;
        /* disables rubber band staying stuck
    }
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Neometric';
    src: url('fonts/Neometric-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Set default font styles */
body {
    height: 200vh;
    width: 100%; /* use % instead of vw to avoid scrollbar issues */
    font-family: 'Neometric', Helvetica, Arial, sans-serif;
    text-transform: lowercase;
    line-height: 1.6;
    color: var(--coral-hot);
    background-color: var(--coral);
    /* background-image: url('images/BG_grad_tile.png');
    background-size: 100% var(--bg-height);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-position-y: 0vh; */
}

#logo,
#logo-reflection,
#links,
#links-reflection,
#EP,
#EP-reflection,
#background,
#background-edges,
#canvas-container {
    will-change: transform, top, width;
    /* Add will-change to allow GPU acceleration */
}

#background-edges {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--bg-height);
    pointer-events: none; /* Prevent interaction with background edges */
    background-image: url('images/BG_grad_tile.png');
    background-size: 100% var(--bg-height);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 0vh;
}

#background {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: var(--bg-height); /* MUST BE THE SAME AS THE Y-component OF THE BACKGROUND */
}

#canvas-container {
    position: fixed;
    top: 100vh;
    left: 0;
    width: 100%; /* use % instead of vw to avoid scrollbar issues */
    height: 100vh;
    overflow: hidden;
    background-color: black;
}

#canvas-container > * {
    pointer-events: none; /* Prevent interaction with canvas elements */
    position: absolute;
    top: 0;
}

#reflection-container {
    width: 100%;
    height: 100%;
}

#canvas {
    background-color: transparent;
}

#canvas-blurred {   
    opacity: 0.5;
    background-color: transparent;
    filter: blur(6px);
    mix-blend-mode: lighten;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

#bg-reflection-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bg-reflection {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: var(--bg-height);
    opacity: 1;
    /* filter: blur(20px); */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 60%);
}

img#logo {
    position: fixed;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: 0 auto;
    width: 80vw;
    height: auto;
}

img#logo-reflection {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: 0 auto;
    width: 82.61vw;
    height: auto;
    opacity: 0.3;
    /* filter: blur(8px); */
}

section#links, #links-reflection {
    position: fixed;
    top: 150vh;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    gap: 20px;
}

section#links img, #links-reflection img {
    width: auto;
    height: 80px;
    transition: filter 0.15s ease;
}

section#links img:hover, #links-reflection img.hovered {
    filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 10px rgba(111, 91, 184, 0.3));
}

section#links img#spotify:hover, #links-reflection img#spotify.hovered {
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 10px rgba(111, 91, 184, 0.3));
}

section#EP, #EP-reflection {
    display: none;
    position: fixed;
    /* top: 200vh; */
    bottom: 9vh;
    left: 50%;
    transform: translateX(-50%);
    color: var(--coral-hot);
    min-width: 100%;
    /* text-align: center; */
    /* display: flex;
        justify-content: center;
        align-items: center;
        text-align: center; */
}

#EP h2, #EP-reflection h2 {
    font-size: 4em;
    font-weight: bold;
}

#EP-marquee-container, #EP-reflection-marquee-container {
    padding: 0 2em; /* keep the shadow from getting clipped */
}


section#EP h2, #EP-reflection h2 {
    line-height: 1.2;
    text-shadow:
            /* -.071em -.071em .03em #000,
            .071em -.071em .03em #000,
            -.071em .071em .03em #000,
            .071em .071em .03em #000,
            0em .1em .03em #000,
            0em -.1em .03em #000,
            -.1em 0em .03em #000,
            .1em 0em .03em #000, */
            0 0 .4em var(--coral),
            0 0 .3em var(--purple),
            0 0 .3em var(--purple);
}

#EP-reflection {
    top: 52vh;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

section#EP.marquee, #EP-reflection.marquee {
    display: block;
}

section#EP.marquee #EP-marquee-container, #EP-reflection.marquee #EP-marquee-container {
    /* Make sure it's visible */
    white-space: nowrap;
    /* Prevent line wrapping */
    overflow: hidden;
    animation: marquee 12s linear infinite;
}

.reflection {
    position: absolute !important;
}