@font-face {
    font-family: 'guffonia';
    src:
            url("../FONTS/guffonia-guffonia-regular-400.woff2") format('woff2'),
            url("../FONTS/guffonia-guffonia-regular-400.woff") format('woff'),
            url("../FONTS/guffonia-guffonia-regular-400.ttf");
}

@font-face {
    font-family: 'AkiraBold';
    src:
            url("../FONTS/AkiraBold.woff2") format('woff2'),
            url("../FONTS/AkiraBold.woff") format('woff'),
            url("../FONTS/AkiraBold.ttf");
}

:root{
    --ff-title: 'AkiraBold', system-ui, sans-serif;
    --ff-title-2: 'guffonia', system-ui, sans-serif;

    --cl-fff: #fff;
    --cl-400: #ed1c24;
}



/* ======== RESET ======== */

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

html {
    hanging-punctuation: first last;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: var(--cl-400) #333;
}

body {
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    font-family: var(--ff-title);
    position: relative;
}

html,
body{
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul {
    list-style: none;
}


/* ======== REDUCED MOTION: NO PREFERENCE ======== */

@media (prefers-reduced-motion: no-preference) {
    html,
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding: 30px;
    }
}



/* ======== SCROLLBAR ======== */

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece{
    display: none;
}
::-webkit-scrollbar-thumb{
    background-color: color-mix(in oklab, var(--cl-400) 80%, rgb(0 0 0 / .5));
    border-radius: 100vh;
}
::-webkit-scrollbar-track{
    width: 0;
    background-color: #333;
}
::-webkit-scrollbar{
    width: 4px;
    height: 8px;
}



/* ======== SELECTION ======== */
::selection{
    background: color-mix(in oklab, var(--cl-400) 70%, rgb(0 0 0 / .2));
}



/* ======== CSS ======== */



main{
    position: relative;
    isolation: isolate;
}



/* ======== LOADER ======== */

body:not(.loaded){
    overflow: hidden;
}

@property --progress {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0%;
}
@keyframes loaderLoaded {
    to{
        opacity: 0;
        display: none;
    }
}
#loader{
    position: absolute;
    inset: 0;
    height: 100dvh;
    background: #000;
    z-index: 10000;
}
body.loaded #loader{ animation: loaderLoaded .5s linear forwards; }
#loaderWhite img,
#loaderRed img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(75%, 800px);
}
#loaderRed img{
    clip-path:  polygon(0 0, var(--progress) 0, var(--progress) 100%, 0 100%);
    transition: --progress .5s linear;
}



/* ======== BG IMG ======== */

#backgroundImg img{
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ======== NAV ======== */

nav {
    display: flex;
    justify-content: center;
    position: fixed;
    padding-block: 1rem;
    top: 0;
    inset-inline: 0;
    background: #000;
}
nav ul {
    display: flex;
    gap: 8.5rem;
}
nav ul li a {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    transition: color .3s ease;
    text-transform: uppercase;
}
nav ul li a:hover {
    color:#ED1C24;
}



/* ======== LOGO ======== */

header{
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}
header img{
    width: min(75svw, 1200px);
}



/* ======== SECTIONS ======== */

main section{
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.section-content{
    width: min(80%, 1200px);
    margin: 0 auto;
    display: flex;
    gap: 1rem;
}


h2{
    font-size: 3rem;
    margin: 1.5rem auto;
    color: var(--cl-400);
    width: min(80%, 1200px);
}

p{
    font-size: 1rem;
    text-align: justify;
}

.red-letter{
    color: var(--cl-400);
}



/* ======== ABOUT SECTION ======== */

#aboutSection .section-content{ flex-direction: column; }
#about{
    margin: 0 auto;
}
#about p:not(:last-child){
    margin-bottom: 1.5rem;
}
#info{
    margin: 0 auto;
    margin-top: 1rem;
    text-align: center;
}
#aboutSection h3{
    font-family: var(--ff-title);
    font-size: 1rem;
}
#aboutSection h3:not(:last-child){
    margin-bottom: 1rem;
}



/* ======== ARTISTS ======== */

#artistsSection{
    position: relative;
    isolation: isolate;
    z-index: -1;
}

#artistsCollection{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#artistsCollection .artist{
    width: 100px;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(1);
    cursor: pointer;
    transition: filter .2s;
}
#artistsCollection .artist:is(:hover, .active){
    filter: grayscale(0);
}
#artistView{
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#artistsSection img{
    max-height: 70dvh;
    aspect-ratio: 1;
    object-fit: cover;
}
#socialMedia{
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.3rem;
}
#socialMedia a{
    position: relative;
    color: var(--cl-fff);
    padding: 8px 16px;
    transition: color .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
#socialMedia a::before,
#socialMedia a::after{
    content: '';
    position: absolute;
    inset-block: 0;
    width: var(--_width, 15px);
    border: 1px solid var(--cl-400);
    transition: width .3s ease;
}
#socialMedia a::before{
    left: 0;
    border-right: none;
    border-bottom: none;
}
#socialMedia a::after{
    right: 0;
    border-left: none;
    border-top: none;
}
#socialMedia a:is(:focus-visible, :hover){
    --_width: 100%;
    color: var(--cl-400);
    background: #0009;
    backdrop-filter: blur(2px);
}
#artistView h3{
    font-family: var(--ff-title-2);
    text-transform: uppercase;
    font-size: 3rem;
}
#artistPresentation p{
    font-size: 1rem;
}



/* ======== FOOTER ======== */

footer {
    margin-top: 300px;
    height: 300px;
    background-color: #000;
    position: relative;
    display: flex;
    justify-content: center;
}
footer::before{
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -100%;
    height: 300px;
    background: linear-gradient(#0000, #000);
    z-index: -1;
}
.sponsors {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 30px;
}
.sponsors a{
    --_offset: -10px;
    position: relative;
    padding-block: 10px;
}
.sponsors a:is(:focus-visible, :hover){
    --_width: 50%;
    --_hue-rotate: 25deg;
}
.sponsors a::before,
.sponsors a::after{
    content: '';
    position: absolute;
    inset-block: 0;
    width: calc(var(--_width, 5px) - var(--_offset));
    border: 1px solid var(--cl-400);
    backdrop-filter: brightness(50%) sepia(100) saturate(100) hue-rotate(var(--_hue-rotate));
    transition: width .2s ease;
}
.sponsors a::before{
    left: var(--_offset);
    border-right: none;
}
.sponsors a::after{
    right: var(--_offset);
    border-left: none;
}
.sponsors__logo {
    width: auto;
    height: min(10vw, 100px);
    object-fit: contain;
    cursor: pointer;
    transition: filter .2s ease;
}
.copyWrite {
    width: auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: system-ui, sans-serif;
}
.copyWrite p{
    font-size: 16px;
    text-align: center;
}
.copyWrite span{ color: var(--cl-400); }
.copyWrite p:last-child,
.copyWrite p:last-child span{
    font-size: 13px;
    color: #eee;
}



/* ======== DEVS ======== */
#devs{
    font-family: system-ui, sans-serif;
    background: #000;
    padding-bottom: 10px;
}
#devs .splide__slide{
    padding-block: 10px;
    text-align: center;
}
#devs .splide__slide a{
    color: #fff7;
    transition: color .2s ease;
}
#devs .splide__slide a:is(:focus-visible, :hover){
    color: var(--cl-400);
}
#devs .splide__arrows.splide__arrows--ltr,
#devs .splide__pagination.splide__pagination--ltr{ display: none; }



/* ======== RESPONSIVE ======== */

@media (width < 601px) {
    nav ul li a {
        font-size: 1rem;
    }

    h2{
        font-size: 18px;
        text-align: center;
    }

    p{
        font-size: 14px;
    }

    h3{
        font-size: 15rem;
    }

    .section-content{
        flex-direction: column-reverse;
    }
    #artistsCollection{
        flex-direction: row;
    }
    #artistView{
        height: calc(90dvh - 250px);
    }
    #artists img{
        max-height: 50dvh;
    }

    footer {
        height: 200px;
    }
    .sponsors {
        gap: 10px;
        display: flex;
        align-items: center;
    }
    .sponsors a::before,
    .sponsors a::after{
        content: unset;
    }
    .copyWrite {
        font-size: 10px;
    }
    .copyWrite p{
        text-wrap: balance;
    }
}