/* ==================================================
   XTRIM RECORDS — COMPLETE HOMEPAGE CSS
================================================== */


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

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

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

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

    background:
        #050205;

    color:
        #ffffff;

    overflow-x:
        hidden;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;
}


html::-webkit-scrollbar,
body::-webkit-scrollbar {

    display:
        none;

    width:
        0;

    height:
        0;
}


body {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;
}



/* ==================================================
   DISABLE SELECTION / DRAGGING
================================================== */

body,
body * {

    -webkit-user-select:
        none;

    -moz-user-select:
        none;

    -ms-user-select:
        none;

    user-select:
        none;

    -webkit-touch-callout:
        none;
}


a,
button,
img,
svg,
i {

    -webkit-user-drag:
        none;

    user-drag:
        none;

    -webkit-user-select:
        none;

    user-select:
        none;

    -webkit-touch-callout:
        none;
}


img {

    pointer-events:
        none;
}



/* ==================================================
   BACKGROUND
   PRIMARY MAGENTA: #8e024d
================================================== */

.xtrim-bg {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    height:
        100dvh;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        0;


    background:

        radial-gradient(
            ellipse at 47% 45%,

            rgba(142,2,77,0.46) 0%,

            rgba(91,2,53,0.39) 29%,

            rgba(43,2,31,0.55) 54%,

            rgba(16,2,15,0.88) 77%,

            #050205 100%
        );


    transform:
        translateZ(0);

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    isolation:
        isolate;


    opacity:
        0;


    animation:
        xtrimBackgroundEntrance
        1.35s
        cubic-bezier(.22,.61,.36,1)
        1.05s
        forwards;
}



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

.liquid-1 {

    position:
        absolute;

    width:
        84vw;

    height:
        108vh;

    left:
        -34vw;

    top:
        -18vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 58% 48%,

            rgba(142,2,77,0.94) 0%,

            rgba(142,2,77,0.72) 21%,

            rgba(105,2,62,0.46) 42%,

            rgba(55,2,40,0.19) 61%,

            transparent 79%
        );


    filter:
        blur(76px);

    opacity:
        0.90;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove1
        19s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



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

.liquid-2 {

    position:
        absolute;

    width:
        82vw;

    height:
        105vh;

    right:
        -35vw;

    bottom:
        -21vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 41% 46%,

            rgba(142,2,77,0.84) 0%,

            rgba(121,2,68,0.63) 23%,

            rgba(82,2,53,0.38) 45%,

            rgba(39,2,31,0.16) 63%,

            transparent 80%
        );


    filter:
        blur(84px);

    opacity:
        0.85;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove2
        22s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   LIQUID 3
================================================== */

.liquid-3 {

    position:
        absolute;

    width:
        64vw;

    height:
        83vh;

    left:
        18vw;

    top:
        8vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 48% 52%,

            rgba(142,2,77,0.38) 0%,

            rgba(112,2,65,0.25) 32%,

            rgba(67,2,46,0.11) 56%,

            transparent 78%
        );


    filter:
        blur(100px);

    opacity:
        0.73;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove3
        24s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   LIQUID 4
================================================== */

.liquid-4 {

    position:
        absolute;

    width:
        54vw;

    height:
        125vh;

    left:
        24vw;

    top:
        -22vh;

    border-radius:
        50%;


    background:

        linear-gradient(
            112deg,

            transparent 5%,

            rgba(142,2,77,0.02) 19%,

            rgba(142,2,77,0.18) 38%,

            rgba(181,5,99,0.30) 49%,

            rgba(142,2,77,0.15) 62%,

            transparent 82%
        );


    filter:
        blur(72px);

    opacity:
        0.66;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove4
        26s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   PARTICLES
================================================== */

.space-particles {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;


    background:

        radial-gradient(circle at 8% 17%, rgba(255,255,255,0.20) 0 0.55px, transparent 1px),

        radial-gradient(circle at 17% 61%, rgba(255,255,255,0.13) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 26% 27%, rgba(244,223,255,0.16) 0 0.6px, transparent 1.05px),

        radial-gradient(circle at 36% 78%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 43% 19%, rgba(255,255,255,0.18) 0 0.55px, transparent 1px),

        radial-gradient(circle at 58% 66%, rgba(255,255,255,0.11) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 67% 31%, rgba(244,223,255,0.15) 0 0.55px, transparent 1px),

        radial-gradient(circle at 77% 74%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 86% 18%, rgba(255,255,255,0.17) 0 0.55px, transparent 1px),

        radial-gradient(circle at 93% 53%, rgba(255,255,255,0.10) 0 0.5px, transparent 0.95px);


    opacity:
        0.40;

    transform:
        translate3d(0,0,0);

    will-change:
        transform;


    animation:
        spaceParticlesDrift
        34s
        linear
        infinite;
}



/* ==================================================
   GLINTS
================================================== */

.space-glints {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;


    background:

        radial-gradient(
            circle at 21% 32%,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.05) 17%,
            transparent 55%
        ),

        radial-gradient(
            circle at 73% 22%,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 18%,
            transparent 56%
        );


    background-size:
        9px 9px,
        7px 7px;

    background-repeat:
        no-repeat;

    opacity:
        0.42;


    animation:
        spaceGlintsTwinkle
        7s
        ease-in-out
        infinite;
}



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

.dot-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;


    background-image:

        radial-gradient(
            circle,
            rgba(0,0,0,0.82) 0.42px,
            transparent 0.62px
        );


    background-size:
        4px 4px;

    opacity:
        0.78;

    mix-blend-mode:
        multiply;
}



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

.grain {

    position:
        absolute;

    inset:
        -20%;

    width:
        140%;

    height:
        140%;

    z-index:
        3;

    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='.92' 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:
        105px 105px;

    mix-blend-mode:
        soft-light;

    transform:
        translate3d(0,0,0);

    will-change:
        transform;


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



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

.vignette {

    position:
        absolute;

    inset:
        0;

    z-index:
        4;


    background:

        radial-gradient(
            ellipse at center,

            transparent 18%,

            rgba(5,1,6,0.08) 38%,

            rgba(4,1,5,0.30) 63%,

            rgba(1,0,3,0.78) 100%
        );
}



/* ==================================================
   SITE
================================================== */

.site {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;
}



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

.site-header {

    position:
        relative;

    z-index:
        20;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-shrink:
        0;


    padding:
        clamp(20px,2.15vw,32px)
        clamp(22px,3vw,46px);


    min-height:
        clamp(68px,5vw,82px);
}



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

.logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    flex-shrink:
        0;

    -webkit-tap-highlight-color:
        transparent;
}


.logo-image {

    display:
        block;

    width:
        clamp(58px,4.6vw,78px);

    height:
        auto;

    object-fit:
        contain;

    pointer-events:
        none;

    -webkit-user-drag:
        none;

    user-select:
        none;
}



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

.header-right {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        clamp(7px,0.65vw,10px);

    transform:
        translateY(-4px);
}



/* ==================================================
   SOCIALS
================================================== */

.socials {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;


    gap:
        clamp(17px,1.6vw,23px);


    min-height:
        35px;
}


.socials a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    width:
        clamp(23px,1.55vw,27px);


    height:
        clamp(23px,1.55vw,27px);


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

    text-decoration:
        none;


    font-size:
        clamp(17px,1.22vw,20px);


    line-height:
        1;


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


    -webkit-tap-highlight-color:
        transparent;
}


.socials a i {

    display:
        block;

    line-height:
        1;

    font-style:
        normal;

    text-rendering:
        geometricPrecision;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


.socials a:hover {

    opacity:
        1;

    transform:
        translateY(-2px);
}



/* ==================================================
   LANGUAGE SWITCHER
================================================== */

.language-switcher {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        30;
}



/* ==================================================
   CURRENT LANGUAGE
================================================== */

.language-current {

    appearance:
        none;

    border:
        1px solid transparent;

    outline:
        none;

    background-color:
        transparent;

    margin:
        0;


    padding:
        10px 13px;


    min-width:
        75px;


    min-height:
        42px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    gap:
        11px;


    color:
        #ffffff;


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


    font-size:
        17px;


    font-weight:
        400;


    line-height:
        1;


    cursor:
        pointer;


    border-radius:
        1px;


    transition:
        background-color .15s ease,
        border-color .15s ease;


    -webkit-tap-highlight-color:
        transparent;
}


.language-current:hover,
.language-switcher:hover
.language-current,
.language-switcher:focus-within
.language-current {

    background-color:
        rgba(204,204,204,0.15);


    border-color:
        rgba(204,204,204,0.15);
}



/* ==================================================
   LANGUAGE ARROW
================================================== */

.language-arrow {

    position:
        relative;


    width:
        10px;


    height:
        10px;


    flex:
        0 0 10px;


    border-right:
        1.4px solid rgba(255,255,255,0.92);


    border-bottom:
        1.4px solid rgba(255,255,255,0.92);


    transform:
        rotate(45deg)
        translateY(-2px);


    transform-origin:
        center;


    transition:
        transform .18s ease;
}


.language-switcher:hover
.language-arrow,
.language-switcher:focus-within
.language-arrow {

    transform:
        rotate(225deg)
        translate(-1px,-1px);
}



/* ==================================================
   LANGUAGE DROPDOWN
================================================== */

.language-menu {

    position:
        absolute;


    top:
        100%;


    left:
        0;


    width:
        100%;


    min-width:
        75px;


    display:
        flex;


    flex-direction:
        column;


    gap:
        2px;


    padding:
        6px 0 0;


    border:
        0;


    border-radius:
        0;


    background:
        transparent;


    box-shadow:
        none;


    backdrop-filter:
        none;


    -webkit-backdrop-filter:
        none;


    opacity:
        0;


    visibility:
        hidden;


    transform:
        translateY(-3px);


    pointer-events:
        none;


    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;

    transition-delay:
        .10s;
}


.language-switcher:hover
.language-menu,
.language-switcher:focus-within
.language-menu {

    opacity:
        1;


    visibility:
        visible;


    transform:
        translateY(0);


    pointer-events:
        auto;

    transition-delay:
        0s;
}



/* ==================================================
   LANGUAGE OPTIONS
================================================== */

.language-option {

    appearance:
        none;


    width:
        100%;


    min-height:
        40px;


    border:
        1px solid transparent;


    outline:
        none;


    background-color:
        transparent;


    color:
        #ffffff;


    padding:
        9px 10px;


    border-radius:
        1px;


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


    font-size:
        17px;


    line-height:
        1;


    font-weight:
        400;


    text-align:
        center;


    cursor:
        pointer;


    transition:
        background-color .15s ease,
        border-color .15s ease;
}


.language-option:hover,
.language-option.selected {

    background-color:
        rgba(204,204,204,0.15);


    border-color:
        rgba(204,204,204,0.15);
}



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

.hero {

    position:
        relative;

    flex:
        1;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    padding:
        clamp(28px,5vw,70px)
        clamp(18px,4vw,50px);
}


.hero-content {

    width:
        min(92vw,800px);

    text-align:
        center;

    transform:
        translate3d(0,-10px,0);
}



/* ==================================================
   TITLE
================================================== */

.hero-title {

    margin:
        0;

    padding:
        0;

    color:
        #ffffff;


    font-size:
        clamp(71px,6.15vw,103px);


    line-height:
        0.94;


    font-weight:
        700;


    letter-spacing:
        clamp(-4px,-0.22vw,-2px);


    pointer-events:
        none;


    opacity:
        0;


    transform:
        translateY(20px);


    animation:
        xtrimTitleEntrance
        .72s
        cubic-bezier(.22,.61,.36,1)
        .05s
        forwards;
}



/* ==================================================
   DESCRIPTION
================================================== */

.hero-text {

    margin:
        clamp(16px,1.4vw,22px)
        0
        clamp(22px,1.95vw,29px);


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


    font-size:
        clamp(14px,1.02vw,17px);


    line-height:
        1.42;


    font-weight:
        400;


    pointer-events:
        none;


    opacity:
        0;


    transform:
        translateY(15px);


    animation:
        xtrimTextEntrance
        .68s
        cubic-bezier(.22,.61,.36,1)
        .38s
        forwards;
}



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

.submit-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;


    min-width:
        clamp(182px,12.5vw,214px);


    height:
        clamp(47px,3.35vw,52px);


    padding:
        0
        clamp(28px,2.3vw,36px);


    border-radius:
        999px;


    color:
        #ffffff;


    text-decoration:
        none;


    font-size:
        clamp(13px,0.94vw,16px);


    line-height:
        1;


    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 .22s ease,
        box-shadow .22s ease,
        filter .22s ease,
        background .22s ease;


    -webkit-tap-highlight-color:
        transparent;


    isolation:
        isolate;


    opacity:
        0;


    transform:
        translateY(16px);


    animation:
        xtrimButtonEntrance
        .68s
        cubic-bezier(.22,.61,.36,1)
        .70s
        forwards;
}



/* ==================================================
   ORBIT PROPERTIES
================================================== */

@property --orbit-one {

    syntax:
        "<angle>";

    initial-value:
        0deg;

    inherits:
        false;
}


@property --orbit-two {

    syntax:
        "<angle>";

    initial-value:
        180deg;

    inherits:
        false;
}



/* ==================================================
   NORMAL ORBIT 1
================================================== */

.submit-link::before {

    content:
        "";


    position:
        absolute;


    inset:
        -5px;


    border-radius:
        999px;


    padding:
        1.45px;


    background:

        conic-gradient(

            from
            var(--orbit-one),

            transparent 0deg,

            transparent 308deg,

            rgba(143,53,255,0.16) 311deg,

            #8f35ff 318deg,

            #bd8aff 326deg,

            #9b46ff 334deg,

            rgba(168,78,255,0.16) 341deg,

            transparent 344deg,

            transparent 360deg
        );


    -webkit-mask:

        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);


    -webkit-mask-composite:
        xor;


    mask-composite:
        exclude;


    pointer-events:
        none;


    animation:
        xtrimSnakeOne
        3.1s
        linear
        infinite;


    filter:

        drop-shadow(
            0 0 2px
            rgba(155,70,255,0.82)
        );


    transition:
        filter .22s ease;
}



/* ==================================================
   NORMAL ORBIT 2
================================================== */

.submit-link::after {

    content:
        "";


    position:
        absolute;


    inset:
        -5px;


    border-radius:
        999px;


    padding:
        1.45px;


    background:

        conic-gradient(

            from
            var(--orbit-two),

            transparent 0deg,

            transparent 308deg,

            rgba(143,53,255,0.16) 311deg,

            #8f35ff 318deg,

            #bd8aff 326deg,

            #9b46ff 334deg,

            rgba(168,78,255,0.16) 341deg,

            transparent 344deg,

            transparent 360deg
        );


    -webkit-mask:

        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);


    -webkit-mask-composite:
        xor;


    mask-composite:
        exclude;


    pointer-events:
        none;


    animation:
        xtrimSnakeTwo
        3.1s
        linear
        infinite;


    filter:

        drop-shadow(
            0 0 2px
            rgba(155,70,255,0.82)
        );


    transition:
        filter .22s ease;
}



/* ==================================================
   BUTTON HOVER
================================================== */

.submit-link:hover {

    transform:
        translateY(-2px)
        scale(1.02);


    background:

        linear-gradient(
            90deg,

            #a735ff 0%,

            #bb3ff2 48%,

            #d64bd8 100%
        );


    box-shadow:

        0 0 18px
        rgba(207,67,225,0.35),

        0 0 30px
        rgba(188,46,201,0.16);


    filter:
        brightness(1.07);
}


.submit-link:hover::before,
.submit-link:hover::after {

    filter:

        drop-shadow(
            0 0 3px
            rgba(239,91,255,0.95)
        )

        drop-shadow(
            0 0 6px
            rgba(219,61,234,0.44)
        );
}


.submit-link:active {

    transform:
        translateY(0)
        scale(0.99);
}



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

.site-footer {

    width:
        100%;

    flex-shrink:
        0;

    text-align:
        center;


    padding:
        clamp(16px,1.5vw,22px)
        20px
        clamp(18px,2vw,26px);


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


    font-size:
        clamp(10px,0.75vw,12px);


    line-height:
        1.2;


    pointer-events:
        none;
}



/* ==================================================
   ENTRANCE
================================================== */

@keyframes xtrimTitleEntrance {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

        filter:
            blur(7px);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes xtrimTextEntrance {

    from {

        opacity:
            0;

        transform:
            translateY(15px);

        filter:
            blur(5px);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes xtrimButtonEntrance {

    from {

        opacity:
            0;

        transform:
            translateY(16px);

        filter:
            blur(4px);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes xtrimBackgroundEntrance {

    from {

        opacity:
            0;
    }


    to {

        opacity:
            1;
    }
}



/* ==================================================
   LIQUID
================================================== */

@keyframes liquidMove1 {

    0%,
    100% {

        transform:
            translate3d(-8vw,3vh,0)
            scale(1.02);
    }


    25% {

        transform:
            translate3d(4vw,-5vh,0)
            scale(1.08);
    }


    50% {

        transform:
            translate3d(18vw,3vh,0)
            scale(1.12);
    }


    75% {

        transform:
            translate3d(5vw,10vh,0)
            scale(1.05);
    }
}


@keyframes liquidMove2 {

    0%,
    100% {

        transform:
            translate3d(8vw,-4vh,0)
            scale(1.03);
    }


    25% {

        transform:
            translate3d(-4vw,3vh,0)
            scale(1.09);
    }


    50% {

        transform:
            translate3d(-17vw,-5vh,0)
            scale(1.12);
    }


    75% {

        transform:
            translate3d(-5vw,-10vh,0)
            scale(1.06);
    }
}


@keyframes liquidMove3 {

    0%,
    100% {

        transform:
            translate3d(-3vw,-2vh,0)
            scale(1);
    }


    25% {

        transform:
            translate3d(-9vw,5vh,0)
            scale(1.06);
    }


    50% {

        transform:
            translate3d(5vw,9vh,0)
            scale(1.10);
    }


    75% {

        transform:
            translate3d(10vw,-4vh,0)
            scale(1.04);
    }
}


@keyframes liquidMove4 {

    0%,
    100% {

        transform:
            translate3d(-10vw,-3vh,0)
            rotate(-6deg)
            scale(1.01);
    }


    33% {

        transform:
            translate3d(2vw,6vh,0)
            rotate(3deg)
            scale(1.09);
    }


    66% {

        transform:
            translate3d(12vw,-1vh,0)
            rotate(-2deg)
            scale(1.04);
    }
}



/* ==================================================
   PARTICLE ANIMATION
================================================== */

@keyframes spaceParticlesDrift {

    from {

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


    to {

        transform:
            translate3d(-9px,6px,0);
    }
}


@keyframes spaceGlintsTwinkle {

    0%,
    100% {

        opacity:
            0.30;
    }


    50% {

        opacity:
            0.48;
    }
}



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

@keyframes grainMove {

    0% {

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


    25% {

        transform:
            translate3d(-1.5%,2%,0);
    }


    50% {

        transform:
            translate3d(2%,-1.5%,0);
    }


    75% {

        transform:
            translate3d(-2%,-1%,0);
    }


    100% {

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



/* ==================================================
   BUTTON ORBIT
================================================== */

@keyframes xtrimSnakeOne {

    from {

        --orbit-one:
            0deg;
    }


    to {

        --orbit-one:
            360deg;
    }
}


@keyframes xtrimSnakeTwo {

    from {

        --orbit-two:
            180deg;
    }


    to {

        --orbit-two:
            540deg;
    }
}



/* ==================================================
   TABLET
================================================== */

@media
(min-width:768px)
and
(max-width:1100px) {


    .site-header {

        padding:
            20px
            24px;
    }


    .logo-image {

        width:
            clamp(56px,7vw,70px);
    }


    .header-right {

        gap:
            6px;

        transform:
            translateY(-3px);
    }


    .socials {

        gap:
            clamp(13px,1.8vw,18px);
    }


    .socials a {

        font-size:
            clamp(17px,1.85vw,19px);


        width:
            24px;


        height:
            24px;
    }


    .language-current {

        min-width:
            73px;


        min-height:
            41px;


        padding:
            9px 11px;


        font-size:
            16px;


        gap:
            10px;
    }


    .language-menu {

        min-width:
            73px;
    }


    .language-option {

        font-size:
            16px;
    }


    .hero-title {

        font-size:
            clamp(69px,8vw,89px);
    }


    .hero-text {

        font-size:
            clamp(14px,1.65vw,16px);
    }


    .submit-link {

        min-width:
            182px;


        height:
            47px;


        font-size:
            15px;
    }


    .liquid-1 {

        width:
            105vw;


        left:
            -48vw;


        filter:
            blur(74px);
    }


    .liquid-2 {

        width:
            105vw;


        right:
            -49vw;


        filter:
            blur(82px);
    }
}



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

@media (max-width:767px) {


    html,
    body {

        width:
            100%;


        min-height:
            100dvh;


        overflow-x:
            hidden;
    }


    .site {

        min-height:
            100dvh;
    }


    .site-header {

        padding:
            17px
            16px;


        min-height:
            60px;
    }


    .logo-image {

        width:
            clamp(50px,14vw,62px);
    }


    .header-right {

        gap:
            4px;

        transform:
            translateY(-2px);
    }


    .socials {

        gap:
            clamp(9px,2.7vw,12px);


        min-height:
            26px;
    }


    .socials a {

        width:
            clamp(20px,5vw,23px);


        height:
            clamp(20px,5vw,23px);


        font-size:
            clamp(15px,4vw,17px);
    }


    .language-current {

        min-width:
            64px;


        min-height:
            37px;


        padding:
            7px 8px;


        gap:
            8px;


        font-size:
            14px;
    }


    .language-arrow {

        width:
            6px;


        height:
            6px;


        flex:
            0 0 6px;


        border-width:
            1.2px;
    }


    .language-menu {

        min-width:
            64px;
    }


    .language-option {

        min-height:
            33px;


        padding:
            7px 6px;


        font-size:
            14px;
    }


    .hero {

        padding:
            24px
            16px;
    }


    .hero-content {

        width:
            min(94vw,520px);


        transform:
            translate3d(0,-3px,0);
    }


    .hero-title {

        font-size:
            clamp(56px,17.2vw,74px);


        letter-spacing:
            -2px;
    }


    .hero-text {

        margin:
            13px
            0
            21px;


        font-size:
            clamp(13px,3.65vw,15px);


        line-height:
            1.38;
    }


    .submit-link {

        min-width:
            clamp(162px,48vw,187px);


        height:
            clamp(43px,12vw,48px);


        font-size:
            clamp(12px,3.3vw,14px);
    }


    .submit-link::before,
    .submit-link::after {

        inset:
            -4px;


        padding:
            1.3px;
    }


    .site-footer {

        padding:
            15px
            12px
            18px;


        font-size:
            10px;
    }


    .liquid-1 {

        width:
            145vw;


        height:
            100vh;


        left:
            -69vw;


        top:
            -4vh;


        filter:
            blur(67px);


        opacity:
            0.89;
    }


    .liquid-2 {

        width:
            145vw;


        height:
            102vh;


        right:
            -71vw;


        bottom:
            -7vh;


        filter:
            blur(73px);


        opacity:
            0.83;
    }


    .liquid-3 {

        width:
            120vw;


        height:
            84vh;


        left:
            -8vw;


        top:
            9vh;


        filter:
            blur(83px);


        opacity:
            0.68;
    }


    .liquid-4 {

        width:
            105vw;


        height:
            110vh;


        left:
            -2vw;


        top:
            -6vh;


        filter:
            blur(69px);


        opacity:
            0.44;
    }


    .space-particles {

        opacity:
            0.27;
    }


    .space-glints {

        opacity:
            0.23;
    }


    .dot-grid {

        background-size:
            4px 4px;


        opacity:
            0.72;
    }


    .grain {

        opacity:
            0.10;
    }
}



/* ==================================================
   VERY SMALL PHONES
================================================== */

@media (max-width:380px) {


    .site-header {

        padding:
            15px
            13px;
    }


    .logo-image {

        width:
            48px;
    }


    .header-right {

        gap:
            3px;

        transform:
            translateY(-2px);
    }


    .socials {

        gap:
            8px;
    }


    .socials a {

        width:
            19px;


        height:
            19px;


        font-size:
            15px;
    }


    .language-current {

        min-width:
            53px;


        min-height:
            30px;


        font-size:
            11px;


        gap:
            7px;


        padding:
            6px 6px;
    }


    .language-arrow {

        width:
            5px;


        height:
            5px;


        flex:
            0 0 5px;
    }


    .language-menu {

        min-width:
            53px;
    }


    .language-option {

        min-height:
            29px;


        font-size:
            11px;
    }


    .hero-title {

        font-size:
            clamp(52px,16.5vw,61px);
    }


    .hero-text {

        font-size:
            12px;
    }


    .submit-link {

        min-width:
            156px;


        height:
            42px;


        font-size:
            12px;
    }
}


/* ==================================================
   THEME SWITCH — UPDATED
   Original homepage / entrance animations above are untouched.
================================================== */

.theme-wash {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    opacity: 0;
    background-color: #ffffff;
    transition:
        opacity .62s cubic-bezier(.22,.61,.36,1),
        background-color .62s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, background-color;
}

html[data-theme="light"] .theme-wash {
    opacity: 1;
    background-color: #ffffff;
}

html[data-theme="dark-transition"] .theme-wash {
    opacity: 1;
    background-color: #050205;
}

html[data-theme="dark"] .theme-wash {
    opacity: 0;
    background-color: #050205;
}


/* ==================================================
   THEME BUTTON / CUSTOM ICONS
================================================== */

.theme-toggle {
    appearance: none;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    background: transparent;

    width: clamp(23px,1.55vw,27px);
    height: clamp(23px,1.55vw,27px);

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    /* Gives the theme icon the same breathing room as social icons. */
    margin-right: clamp(10px,0.95vw,15px);

    color: rgba(255,255,255,0.92);
    line-height: 1;
    cursor: pointer;

    transition:
        color .42s cubic-bezier(.22,.61,.36,1),
        opacity .2s ease,
        transform .2s ease;

    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

.theme-icon {
    display: block;
    width: clamp(22px, 1.5vw, 25px);
    height: clamp(22px, 1.5vw, 25px);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.theme-icon-sun {
    display: block;
}

.theme-icon-moon {
    display: none;
}

html[data-theme="light"] .theme-icon-sun {
    display: none;
}

html[data-theme="light"] .theme-icon-moon {
    display: block;
}

html[data-theme="dark-transition"] .theme-icon-sun {
    display: block;
}

html[data-theme="dark-transition"] .theme-icon-moon {
    display: none;
}


/* ==================================================
   LIGHT MODE
================================================== */

html[data-theme="light"] body {
    background: #ffffff;
    color: #000000;
}

html[data-theme="light"] .logo-image {
    filter: brightness(0);
}

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .socials a {
    color: rgba(0,0,0,0.92);
}

html[data-theme="light"] .language-current,
html[data-theme="light"] .language-option {
    color: #000000;
}

html[data-theme="light"] .language-arrow {
    border-right-color: rgba(0,0,0,0.92);
    border-bottom-color: rgba(0,0,0,0.92);
}

html[data-theme="light"] .language-current:hover,
html[data-theme="light"] .language-switcher:hover .language-current,
html[data-theme="light"] .language-switcher:focus-within .language-current,
html[data-theme="light"] .language-option:hover,
html[data-theme="light"] .language-option.selected {
    background-color: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.08);
}

html[data-theme="light"] .hero-title {
    color: #000000;
}

html[data-theme="light"] .hero-text {
    color: rgba(0,0,0,0.88);
}

html[data-theme="light"] .submit-link {
    color: #ffffff;
    background: #000000;
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
}

html[data-theme="light"] .submit-link::before {
    background:
        conic-gradient(
            from var(--orbit-one),
            transparent 0deg,
            transparent 308deg,
            rgba(0,0,0,0.13) 311deg,
            #000000 318deg,
            #5f5f5f 326deg,
            #111111 334deg,
            rgba(0,0,0,0.13) 341deg,
            transparent 344deg,
            transparent 360deg
        );
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.58));
}

html[data-theme="light"] .submit-link::after {
    background:
        conic-gradient(
            from var(--orbit-two),
            transparent 0deg,
            transparent 308deg,
            rgba(0,0,0,0.13) 311deg,
            #000000 318deg,
            #5f5f5f 326deg,
            #111111 334deg,
            rgba(0,0,0,0.13) 341deg,
            transparent 344deg,
            transparent 360deg
        );
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.58));
}

html[data-theme="light"] .submit-link:hover {
    background: #000000;
    box-shadow:
        0 0 18px rgba(0,0,0,0.20),
        0 0 30px rgba(0,0,0,0.08);
    filter: brightness(1.08);
}

html[data-theme="light"] .submit-link:hover::before,
html[data-theme="light"] .submit-link:hover::after {
    filter:
        drop-shadow(0 0 3px rgba(0,0,0,0.75))
        drop-shadow(0 0 6px rgba(0,0,0,0.24));
}

html[data-theme="light"] .site-footer {
    color: rgba(0,0,0,0.52);
}


/* ==================================================
   LIGHT -> DARK TRANSITION
   Important fix:
   UI changes toward its DARK colors DURING the black fade.
   It no longer stays black on top of the black transition layer.
================================================== */

html[data-theme="dark-transition"] .logo-image {
    filter: brightness(0) invert(1);
}

html[data-theme="dark-transition"] .theme-toggle,
html[data-theme="dark-transition"] .socials a,
html[data-theme="dark-transition"] .language-current,
html[data-theme="dark-transition"] .language-option,
html[data-theme="dark-transition"] .hero-title {
    color: #ffffff;
}

html[data-theme="dark-transition"] .language-arrow {
    border-right-color: rgba(255,255,255,0.92);
    border-bottom-color: rgba(255,255,255,0.92);
}

html[data-theme="dark-transition"] .hero-text {
    color: rgba(255,255,255,0.92);
}

html[data-theme="dark-transition"] .site-footer {
    color: rgba(255,255,255,0.52);
}

/* Keep button visually stable while returning to dark. */
html[data-theme="dark-transition"] .submit-link {
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            #8f35ff 0%,
            #9b46ff 55%,
            #a84eff 100%
        );
    box-shadow: 0 0 18px rgba(155,70,255,0.28);
    filter: none;
}

html[data-theme="dark-transition"] .submit-link::before {
    background:
        conic-gradient(
            from var(--orbit-one),
            transparent 0deg,
            transparent 308deg,
            rgba(143,53,255,0.16) 311deg,
            #8f35ff 318deg,
            #bd8aff 326deg,
            #9b46ff 334deg,
            rgba(168,78,255,0.16) 341deg,
            transparent 344deg,
            transparent 360deg
        );
    filter: drop-shadow(0 0 2px rgba(155,70,255,0.82));
}

html[data-theme="dark-transition"] .submit-link::after {
    background:
        conic-gradient(
            from var(--orbit-two),
            transparent 0deg,
            transparent 308deg,
            rgba(143,53,255,0.16) 311deg,
            #8f35ff 318deg,
            #bd8aff 326deg,
            #9b46ff 334deg,
            rgba(168,78,255,0.16) 341deg,
            transparent 344deg,
            transparent 360deg
        );
    filter: drop-shadow(0 0 2px rgba(155,70,255,0.82));
}


/* ==================================================
   COLOR TRANSITIONS ONLY
   Entrance keyframes/timing are NOT changed.
================================================== */

.logo-image,
.theme-toggle,
.socials a,
.language-current,
.language-option,
.language-arrow,
.hero-title,
.hero-text,
.site-footer {
    transition-property:
        color,
        background-color,
        border-color,
        filter,
        box-shadow;
    transition-duration: .42s;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

.submit-link {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease,
        background .42s cubic-bezier(.22,.61,.36,1),
        color .42s cubic-bezier(.22,.61,.36,1);
}


/* ==================================================
   TABLET
================================================== */

@media (min-width:768px) and (max-width:1100px) {
    .theme-toggle {
        width: 24px;
        height: 24px;
        margin-right: clamp(8px,1vw,12px);
    }

    .theme-icon {
        width: 19px;
        height: 19px;
    }
}


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

@media (max-width:767px) {
    .theme-toggle {
        width: clamp(20px,5vw,23px);
        height: clamp(20px,5vw,23px);
        margin-right: clamp(6px,2vw,9px);
    }

    .theme-icon {
        width: clamp(16px,4.4vw,19px);
        height: clamp(16px,4.4vw,19px);
    }
}


/* ==================================================
   VERY SMALL PHONES
================================================== */

@media (max-width:380px) {
    .theme-toggle {
        width: 19px;
        height: 19px;
        margin-right: 6px;
    }

    .theme-icon {
        width: 16px;
        height: 16px;
    }
}

/* ==================================================
   ONLY FIX: TOP-LEFT LOGO BLINK ON LIGHT -> DARK
   Everything else above remains EXACTLY untouched.
================================================== */

/* ==================================================
   FINAL LOGO THEME FIX
   Prevents the second blink after LIGHT -> DARK.
   No other element is affected.
================================================== */

html[data-theme="light"] .logo-image {
    filter: brightness(0) !important;
    transition: none !important;
    animation: none !important;
}

html[data-theme="dark-transition"] .logo-image,
html[data-theme="dark"] .logo-image {
    filter: none !important;
    transition: none !important;
    animation: none !important;
}


/* ==================================================
   FINAL MOBILE POLISH — DESKTOP UNCHANGED
   ================================================== */

/* Explicit click/touch-open state for the language menu. */
.language-switcher.is-open .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}

.language-switcher.is-open .language-arrow {
    transform:
        rotate(225deg)
        translate(-1px,-1px);
}

.language-switcher.is-open .language-current {
    background-color:
        rgba(204,204,204,0.15);

    border-color:
        rgba(204,204,204,0.15);
}

html[data-theme="light"] .language-switcher.is-open .language-current {
    background-color:
        rgba(0,0,0,0.08);

    border-color:
        rgba(0,0,0,0.08);
}


@media (hover: none), (pointer: coarse) {

    /* Prevent sticky mobile :hover / :focus-within from keeping EN open. */
    .language-switcher:not(.is-open):hover .language-menu,
    .language-switcher:not(.is-open):focus-within .language-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-3px);
        pointer-events: none;
    }

    .language-switcher:not(.is-open):hover .language-arrow,
    .language-switcher:not(.is-open):focus-within .language-arrow {
        transform:
            rotate(45deg)
            translateY(-2px);
    }

    .language-switcher:not(.is-open):hover .language-current,
    .language-switcher:not(.is-open):focus-within .language-current {
        background-color: transparent;
        border-color: transparent;
    }

    html[data-theme="light"]
    .language-switcher:not(.is-open):hover
    .language-current,

    html[data-theme="light"]
    .language-switcher:not(.is-open):focus-within
    .language-current {
        background-color: transparent;
        border-color: transparent;
    }

}


@media (max-width: 767px) {

    /*
       Keep Safari/Chrome mobile browser chrome visually tied to the site.
       viewport-fit=cover is set in HTML; safe-area spacing keeps UI clear.
    */
    html,
    body {
        background:
            #050205;
    }

    html[data-theme="light"],
    html[data-theme="light"] body {
        background:
            #ffffff;
    }

    .site-header {
        padding-top:
            calc(17px + env(safe-area-inset-top));
    }

    .site-footer {
        padding-bottom:
            calc(18px + env(safe-area-inset-bottom));
    }


    /*
       Mobile-only liquid sizing:
       smaller shapes + less blur make the movement visible again
       without altering desktop timing or animation keyframes.
    */
    .liquid-1 {
        width:
            116vw;

        height:
            94vh;

        left:
            -49vw;

        top:
            -8vh;

        filter:
            blur(52px);

        opacity:
            0.90;
    }

    .liquid-2 {
        width:
            118vw;

        height:
            96vh;

        right:
            -51vw;

        bottom:
            -10vh;

        filter:
            blur(57px);

        opacity:
            0.85;
    }

    .liquid-3 {
        width:
            88vw;

        height:
            72vh;

        left:
            6vw;

        top:
            12vh;

        filter:
            blur(63px);

        opacity:
            0.72;
    }

    .liquid-4 {
        width:
            82vw;

        height:
            106vh;

        left:
            9vw;

        top:
            -10vh;

        filter:
            blur(54px);

        opacity:
            0.50;
    }


    /* Smaller visual grid on phones. */
    .dot-grid {
        background-image:
            radial-gradient(
                circle,
                rgba(0,0,0,0.82) 0.32px,
                transparent 0.50px
            );

        background-size:
            3px 3px;

        opacity:
            0.72;
    }

}