/* ==================================================
   XTRIM RECORDS — GLOBAL
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    background: #050308;

    color: #ffffff;

    overflow-x: hidden;
}


/* ==================================================
   PAGE
================================================== */

body {
    min-height: 100vh;
    position: relative;
}


/* ==================================================
   ANIMATED BACKGROUND
================================================== */

.xtrim-bg {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at 48% 48%,
            #1a0713 0%,
            #0e050d 42%,
            #08040a 68%,
            #040307 100%
        );
}


/* ==================================================
   LIQUID GLOW 1
================================================== */

.liquid-1 {
    position: absolute;

    width: 95vw;
    height: 120vh;

    left: -32vw;
    top: -20vh;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(129,13,87,0.95) 0%,
            rgba(129,13,87,0.75) 22%,
            rgba(95,8,65,0.48) 42%,
            rgba(48,4,35,0.18) 60%,
            transparent 78%
        );

    filter: blur(72px);

    opacity: 0.95;

    will-change: transform;

    animation:
        liquidMove1 16s
        ease-in-out
        infinite;
}


/* ==================================================
   LIQUID GLOW 2
================================================== */

.liquid-2 {
    position: absolute;

    width: 95vw;
    height: 110vh;

    right: -33vw;
    bottom: -25vh;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(129,13,87,0.75) 0%,
            rgba(105,8,72,0.52) 26%,
            rgba(63,5,47,0.27) 48%,
            transparent 74%
        );

    filter: blur(84px);

    opacity: 0.88;

    will-change: transform;

    animation:
        liquidMove2 18s
        ease-in-out
        infinite;
}


/* ==================================================
   CENTER GLOW
================================================== */

.liquid-3 {
    position: absolute;

    width: 75vw;
    height: 90vh;

    left: 12vw;
    top: 4vh;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(129,13,87,0.38) 0%,
            rgba(95,7,67,0.22) 38%,
            transparent 73%
        );

    filter: blur(90px);

    opacity: 0.9;

    will-change: transform;

    animation:
        liquidMove3 20s
        ease-in-out
        infinite;
}


/* ==================================================
   DOT GRID
================================================== */

.dot-grid {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(0,0,0,0.72) 0.75px,
            transparent 0.95px
        );

    background-size: 5px 5px;

    opacity: 0.72;

    mix-blend-mode: multiply;
}


/* ==================================================
   GRAIN
================================================== */

.grain {
    position: absolute;

    left: -30%;
    top: -30%;

    width: 160%;
    height: 160%;

    opacity: 0.13;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    background-size: 120px 120px;

    mix-blend-mode: soft-light;

    animation:
        grainMove .35s
        steps(2,end)
        infinite;
}


/* ==================================================
   VIGNETTE
================================================== */

.vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(3,2,6,0.12) 58%,
            rgba(2,1,4,0.58) 100%
        );
}


/* ==================================================
   CONTENT LAYER
================================================== */

.site {
    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        26px
        34px;

    position: relative;

    z-index: 10;
}


.logo {
    color: white;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.5px;
}


.socials {
    display: flex;

    align-items: center;

    gap: 18px;
}


.socials a {
    color: rgba(255,255,255,0.88);

    text-decoration: none;

    font-size: 13px;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.socials a:hover {
    opacity: 1;

    transform:
        translateY(-2px);
}


/* ==================================================
   HERO
================================================== */

.hero {
    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        40px
        20px;
}


.hero-content {
    text-align: center;

    transform:
        translateY(-15px);
}


.hero-title {
    margin: 0;

    font-size:
        clamp(
            58px,
            6vw,
            92px
        );

    line-height: 0.95;

    font-weight: 700;

    letter-spacing: -3px;

    color: #fff;
}


.hero-text {
    margin:
        18px
        0
        22px;

    color:
        rgba(255,255,255,0.92);

    font-size: 14px;

    line-height: 1.35;
}


/* ==================================================
   SUBMIT BUTTON
================================================== */

.submit-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 170px;

    height: 44px;

    padding:
        0
        28px;

    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    background:
        linear-gradient(
            90deg,
            #8f35ff 0%,
            #9b46ff 55%,
            #a84eff 100%
        );

    box-shadow:
        0 0 18px
        rgba(155,70,255,0.28);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.submit-link:hover {
    transform:
        translateY(-2px)
        scale(1.02);

    filter:
        brightness(1.08);

    box-shadow:
        0 0 24px
        rgba(155,70,255,0.45);
}


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

.site-footer {
    width: 100%;

    text-align: center;

    padding:
        20px
        20px
        24px;

    color:
        rgba(255,255,255,0.52);

    font-size: 10px;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes liquidMove1 {

    0%,
    100% {
        transform:
            translate3d(-7vw,6vh,0)
            scale(1.03);
    }

    35% {
        transform:
            translate3d(19vw,-5vh,0)
            scale(1.14);
    }

    70% {
        transform:
            translate3d(34vw,11vh,0)
            scale(1.08);
    }

}


@keyframes liquidMove2 {

    0%,
    100% {
        transform:
            translate3d(7vw,-7vh,0)
            scale(1.04);
    }

    40% {
        transform:
            translate3d(-22vw,6vh,0)
            scale(1.16);
    }

    75% {
        transform:
            translate3d(-38vw,-4vh,0)
            scale(1.07);
    }

}


@keyframes liquidMove3 {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-12vw,8vh,0)
            scale(1.12);
    }

}


@keyframes grainMove {

    0% {
        transform:
            translate3d(0,0,0);
    }

    25% {
        transform:
            translate3d(-2%,3%,0);
    }

    50% {
        transform:
            translate3d(3%,-2%,0);
    }

    75% {
        transform:
            translate3d(-3%,-1%,0);
    }

    100% {
        transform:
            translate3d(0,0,0);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .site-header {
        padding:
            20px
            18px;
    }


    .socials {
        gap: 12px;
    }


    .socials a {
        font-size: 11px;
    }


    .hero {
        padding:
            30px
            18px;
    }


    .hero-content {
        transform:
            translateY(-5px);
    }


    .hero-title {
        font-size:
            clamp(
                48px,
                16vw,
                68px
            );

        letter-spacing:
            -2px;
    }


    .hero-text {
        margin-top: 14px;

        font-size: 12px;
    }


    .submit-link {
        min-width: 150px;

        height: 40px;

        font-size: 12px;
    }


    .liquid-1 {
        width: 170vw;
        height: 95vh;

        left: -78vw;
        top: 2vh;

        filter:
            blur(60px);
    }


    .liquid-2 {
        width: 175vw;
        height: 95vh;

        right: -82vw;
        bottom: -3vh;

        filter:
            blur(64px);
    }


    .liquid-3 {
        width: 140vw;
        height: 80vh;

        left: -20vw;
        top: 12vh;

        filter:
            blur(68px);
    }


    .dot-grid {
        background-size:
            5px
            5px;

        opacity:
            0.68;
    }


    .grain {
        opacity:
            0.11;
    }

}