@font-face {
    font-family: 'Passion One';
    src: url(/_astro/PassionOne-Regular.CXRuNj9h.ttf);
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url(/_astro/Montserrat-Bold.DEcR8bPr.ttf);
}

@font-face {
    font-family: 'Montserrat Regular';
    src: url(/_astro/Montserrat-Regular.BQsUpcHj.ttf);
}

:root {
    --woodsmoke: #131215;
    --woodsmoke-08: #141316cc;
    --baltic-sea: #201E23;
    --dolphin: #676370;
    --blue-haze: #C5BDD6;

    --burnt-sienna: #EB5656;
    --amaranth: #EF3254;
    --melanze:  #440642;
    --maroon-flush: #b31e67;
    --scarlet-gum: #43145c;
    --chestnut-rose: #cf5b5d;
    --hibiscus: #b8345c;

    --mountain-meadow: #1ABA5A;
    --flamingo: #F14242;

    --input-bg-inactive: rgb(103, 99, 112, 0.3);
    --input-bg-active: rgb(103, 99, 112, 0.41);
    --input-bg-error: #3e3333;
    --input-bg-success: #303a34;

    --to-top: 0deg;
    --to-bottom: 180deg;
    --to-right: 90deg;
    --to-left: -90deg;

    --gradient-magenta: linear-gradient(
        var(--to-right),
        var(--amaranth) 0%,
        var(--melanze) 81%
    );

    --gradient-magenta-2: linear-gradient(
        var(--to-right),
        var(--amaranth) 0%,
        var(--melanze) 81%,
        var(--amaranth) 100%
    );

    --gradient-blue-haze: linear-gradient(
        var(--to-right),
        var(--dolphin) 0%,
        var(--blue-haze) 50%,
        var(--dolphin) 100%
    );

    --gradient-blue-haze-2: linear-gradient(
        var(--to-right),
        var(--dolphin) 20%,
        var(--blue-haze) 50%,
        #ffffff 60%,
        var(--blue-haze) 70%,
        var(--dolphin) 80%
    );

    --gradient-chip-bg: linear-gradient(
        var(--to-right),
        #c5bdd65c 0%,
        #6763705c 81%
    );

    --gradient-main-nav: linear-gradient(
        180deg,
        var(--woodsmoke) 40%,
        transparent 90%
    );

    --title-font: 'Passion One';
    --bold-font: 'Montserrat Bold';
    --regular-font: 'Montserrat Regular';
    --default-font:
        system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', sans-serif;

    --fs-3xs: clamp(0.52rem, 0.4213rem + 0.4937vw, 0.729rem);
    --fs-2xs: clamp(0.72rem, 0.6213rem + 0.5937vw, 0.9889rem);
    --fs-xs: clamp(0.9rem, 0.7493rem + 0.7536vw, 1.3333rem);
    --fs-s: clamp(1.125rem, 0.8207rem + 1.5217vw, 2rem);
    --fs-m: clamp(1.4063rem, 0.8519rem + 2.7717vw, 3rem);
    --fs-l: clamp(1.7578rem, 0.804rem + 4.769vw, 4.5rem);
    --fs-xl: clamp(2.1973rem, 0.6137rem + 7.9178vw, 6.75rem);
    --fs-2xl: clamp(2.7466rem, 0.1802rem + 12.832vw, 10.125rem);
    --fs-3xl: clamp(3.4332rem, -0.6552rem + 20.4422vw, 15.1875rem);

    --space-3xs: clamp(0.415rem, 0.308rem + 0.540vw, 0.7rem);
    --space-2xs: clamp(0.5625rem, 0.4103rem + 0.7609vw, 1rem);
    --space-xs: clamp(0.875rem, 0.6576rem + 1.087vw, 1.5rem);
    --space-s: clamp(1.125rem, 0.8207rem + 1.5217vw, 2rem);
    --space-m: clamp(1.6875rem, 1.231rem + 2.2826vw, 3rem);
    --space-l: clamp(2.25rem, 1.6413rem + 3.0435vw, 4rem);
    --space-xl: clamp(3.375rem, 2.462rem + 4.5652vw, 6rem);
    --space-2xl: clamp(4.5rem, 3.2826rem + 6.087vw, 8rem);
    --space-3xl: clamp(6.75rem, 4.9239rem + 9.1304vw, 12rem);

    --max-w: clamp(90%, 1440px, 80dvw + 9rem);
    --max-w-2: clamp(50%, 520px, 35dvw + 10rem);
    --calc-w: min(95%, var(--max-w));

    --max-h: max(100dvh, 550px);

    --cubic-bezier: cubic-bezier(0, 1.24, 1, 1.33);

    --tr-xs: 0.15s;
    --tr-s: 0.25s;

    --blur-s: 3px;
    --blur-m: 5px;
    --blur-l: 11px;

    --br-s: 0.2em;
    --br-m: 0.35em;

    --shadow-color: #00000066;
    --shadow-upper: 0px -2px 5px var(--shadow-color);
    --shadow-under: 0px 2px 5px var(--shadow-color);

    --lh-xs: 0.75em;
    --lh-s: 1.05em;
    --lh-m: 1.75em;

    --o-dolphin-xs: 0.01em solid var(--dolphin);
    --o-hibiscus-xs: 0.01em solid var(--hibiscus);

    --filter-maroon-flush: 
        brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(2692%) hue-rotate(312deg) brightness(80%) contrast(94%);
    --filter-scarlet-gum: 
        brightness(0) saturate(100%) invert(4%) sepia(94%) saturate(7476%) hue-rotate(299deg) brightness(69%) contrast(96%);
    --filter-chestnut-rose: 
        brightness(0) saturate(100%) invert(41%) sepia(30%) saturate(911%) hue-rotate(310deg) brightness(103%) contrast(102%);
    --filter-hibiscus: 
        brightness(0) saturate(100%) invert(25%) sepia(37%) saturate(2972%) hue-rotate(313deg) brightness(99%) contrast(88%);

}

@keyframes blink {
    50% { opacity: 0.6; }
}

@keyframes decrease-timer-bar {
    100% { scale: 0 1; }
}

@keyframes fill-on-scroll {
    100% {
        background-size: 120% 100%;
        color: transparent;
    }
}

@keyframes gradient-shine-sliding {
    100% {
        background-position: -200% center;
    }
}

@keyframes gradient-to-magenta {
    100% {
        background-image: var(--gradient-magenta);
    }
}

@keyframes pulse {
    50% { scale: 1.2; }
}

@keyframes reveal-on-scroll {
    100% { opacity: 1; }
}

@keyframes scale-on-scroll {
    100% {
        scale: 1;
        opacity: 1;
    }
}

@keyframes timeline-scale {
    100% {
        transform: scaleY(100%);
    }
}

.text-gradient { 
    &.text-gradient--magenta {
        background: var(--gradient-magenta);
    }
    
    &.text-gradient--blue-haze {
        background: var(--gradient-blue-haze);
    }

    &.text-gradient--magenta,
    &.text-gradient--blue-haze {
        background-clip: text;
        color: transparent;
    }

    &.text-gradient--scale-on-scroll {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .text-gradient {
            &.text-gradient--magenta {
                background-image: var(--gradient-magenta-2);
            }
                
            &.text-gradient--blue-haze {
                background-image: var(--gradient-blue-haze-2);
            }

            &.text-gradient--glitter-gliding {
                background-size: 200% 100%;
                background-position: 0% center;
                animation: 
                    gradient-shine-sliding 7.5s var(--cubic-bezier) infinite;
            }

            &.text-gradient--fill-on-scroll {
                background-size: 0 100%;
                background-repeat: no-repeat;
                color: var(--dolphin);
                animation: fill-on-scroll linear both;
                animation-range: entry 20% cover 40%; 
                animation-timeline: view();
            }
        }

        .reveal-on-scroll {
            animation: reveal-on-scroll linear both;
        }
        
        .scale-on-scroll {
            animation: scale-on-scroll linear both;
            scale: 0.6;
        }

        .reveal-on-scroll,
        .scale-on-scroll {
            --entry-range: calc(5% - var(--space-s));
            --end-range: calc(30% - var(--space-s));

            animation-range: entry var(--entry-range) cover var(--end-range);
            animation-timeline: view();
            opacity: 0;
        }
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

body {
    background-color: var(--woodsmoke);
    color: var(--dolphin);
    font-family: 'Montserrat Regular', var(--default-font);
    overflow-x: clip;
}

h1, h2 {
    font-family: var(--title-font);
    text-transform: uppercase;
}

h1 {
    font-size: 12.35dvw;
    text-align: center;
}

h2 {
    font-size: var(--fs-l);
}

h3, h4, h5 {
    font-family: var(--bold-font);
}

h3 {
    font-size: var(--fs-m);
}

h4 {
    font-size: var(--fs-s);
}

p, span, li, label, input, textarea, button, a {
    font-family: var(--regular-font);
    font-size: var(--fs-m);
}

a {
    color: var(--dolphin);
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button, input, textarea {
    background-color: transparent;
    border: none;
    outline: none;
}

textarea {
    resize: none;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    footer {
        flex-grow: 1;
        justify-self: flex-end;
    }
}

header,
section,
main,
footer {
    width: var(--calc-w);
    margin: 0 auto;
}

main:has(section) {
    section {
        width: 100%;
    }
}

::selection {
    background-color: var(--dolphin);
    color: var(--baltic-sea);
}

html {
    scrollbar-color: var(--amaranth) var(--baltic-sea);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

hr {
    --color: var(--dolphin);
    --height: 0.2em;

    background-color: var(--color);
    height: var(--height);
    margin: 0 auto;
    border-radius: var(--br-m);
    border: none;
}
.alert-list {
    --dialog-w: clamp(320px, 32dvw, calc(27% + 15rem));

    width: var(--dialog-w);
    padding: 0.1em;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3xs);
    position: fixed;
    bottom: var(--space-s);
    right: var(--space-s);
    z-index: 1;
.alert {
        background-color: var(--baltic-sea);
        color: var(--blue-haze);
        width: 100%;
        padding: var(--space-xs);
        position: relative;
        border-radius: var(--br-m);
        border: none;
        outline: var(--o-dolphin-xs);
        box-shadow: var(--shadow-under), var(--shadow-upper);
.timer-bar {
            background-color: var(--dolphin);
            width: 100%;
            height: var(--space-3xs);
            margin-top: var(--space-2xs);
            position: relative;
            border-radius: var(--br-m);
            overflow: hidden;
&::before {
                content: '';
                background-color: var(--blue-haze);
                width: 100%;
                height: 100%;
                position: absolute;
                transform-origin: left;
                animation: decrease-timer-bar attr(data-duration ms) forwards;
}
}
}
}