:root {
    --bg: #050505;
    --gray: #d2d5db;
    --white: #f4f6f8;
    --blue: #7dd3fc;
    --orange: #ff6a00;
    --muted: #f4f6f873;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace
}

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

html,
body {
    height: 100%
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    display: grid;
    overflow: hidden
}

body:before {
    content: "";
    z-index: 0;
    pointer-events: none;
    contain: strict;
    will-change: transform;
    background: linear-gradient(90deg, #6366f133, #a78bfa29, #f472b624, #7dd3fc1f, #2dd4bf29, #6366f133);
    width: 120vmax;
    height: 120vmax;
    margin: -60vmax 0 0 -60vmax;
    animation: 40s linear infinite wash;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: rotate(-25deg)
}

@keyframes wash {
    to {
        transform: rotate(335deg)
    }
}

#particles {
    z-index: 0;
    contain: strict;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0
}

.vignette {
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(56% 38%, #000000c7, #0000 100%), radial-gradient(#0000 45%, #0009 100%);
    position: fixed;
    inset: 0
}

.topbar,
.hero,
.footer {
    z-index: 2;
    position: relative
}

.topbar {
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    justify-content: flex-end;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
    font-size: .75rem;
    display: flex
}

.lang {
    align-items: center;
    gap: .5rem;
    display: flex
}

.lang button {
    font: inherit;
    letter-spacing: inherit;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: .35rem .25rem;
    transition: color .25s, text-shadow .25s
}

.lang button:hover {
    color: var(--white)
}

.lang button[aria-pressed=true] {
    color: var(--orange);
    text-shadow: 0 0 12px #ff6a008c
}

.lang button:focus-visible {
    outline: 1px solid var(--blue);
    outline-offset: 3px
}

.hero {
    text-align: center;
    flex-direction: column;
    justify-content: normal;
    align-items: center;
    margin: 8em 0 0;
    padding: 0 1.5rem;
    display: flex
}

.wordmark {
    letter-spacing: -.045em;
    color: var(--gray);
    text-shadow: 0 0 36px #000000e6, 0 4px 18px #000000b3;
    font-size: clamp(3.25rem, 14vw, 10rem);
    font-weight: 700;
    line-height: 1;
    display: flex
}

.wordmark span {
    opacity: 0;
    filter: blur(8px);
    animation: 400ms cubic-bezier(.2, .7, .2, 1) forwards rise;
    animation-delay: calc(var(--i) * 50ms + .2s);
    display: inline-block;
    transform: translateY(.25em)
}

.wordmark .accent {
    color: #ff6f0f;
    text-shadow: 0 0 30px #ff6a0099, 0 4px 18px #0009;
    animation: 400ms cubic-bezier(.2, .7, .2, 1) forwards rise, 4s ease-in-out 1.6s infinite glow;
    animation-delay: calc(var(--i) * 50ms + .2s), 1.6s
}

.wordmark span:not(.accent) {
    animation: 400ms cubic-bezier(.2, .7, .2, 1) forwards rise, 8s ease-in-out infinite shimmer;
    animation-delay: calc(var(--i) * 50ms + .2s), calc(var(--i) * .22s + 2.4s)
}

.rule {
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
    width: min(280px, 50vw);
    height: 1px;
    margin: clamp(1.5rem, 4vw, 2.5rem) 0;
    animation: 1.2s ease-out 1s forwards grow;
    transform: scaleX(0)
}

.slogan {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35em;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 300;
    letter-spacing: .03em;
    color: var(--gray);
    text-shadow: 0 2px 14px #000c;
    opacity: 0;
    animation: 1.2s ease-out 1.4s forwards fade;
    @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        animation: none
    }
}

.slogan-words {
    display: inline-grid;
    text-align: left;
    vertical-align: baseline;
    transition: width .55s cubic-bezier(.2, .7, .2, 1);
    @media (prefers-reduced-motion: reduce) {
        transition: none
    }
}

.slogan-word {
    grid-area: 1 / 1;
    width: max-content;
    font-weight: 500;
    color: #ff6f0f;
    text-shadow: 0 0 24px #ff6a008c, 0 2px 12px #000000b3;
    opacity: 0;
    translate: 0 .5em;
    filter: blur(6px);
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.2, .7, .2, 1), translate .55s cubic-bezier(.2, .7, .2, 1), filter .55s cubic-bezier(.2, .7, .2, 1);
    @media (prefers-reduced-motion: reduce) {
        translate: 0px 0px;
        filter: none;
        transition: none
    }
}

.slogan-word.is-active {
    opacity: 1;
    translate: 0px 0px;
    filter: blur(0);
    pointer-events: auto
}

.slogan-word.is-exit {
    opacity: 0;
    translate: 0 -.5em;
    filter: blur(6px);
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1), translate .45s cubic-bezier(.4, 0, .2, 1), filter .45s cubic-bezier(.4, 0, .2, 1)
}

.tags {
    font-family: var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    opacity: 0;
    gap: clamp(1rem, 3vw, 2rem);
    font-size: .75rem;
    list-style: none;
    animation: 1.2s ease-out 1.4s forwards fade;
    display: flex
}

.tags li+li:before {
    content: "";
    vertical-align: middle;
    background: var(--orange);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    margin-right: clamp(1rem, 3vw, 2rem);
    display: inline-block
}

.footer {
    font-family: var(--font-mono);
    letter-spacing: .12em;
    color: var(--muted);
    justify-content: space-between;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
    font-size: .7rem;
    display: flex
}

[data-i18n] {
    transition: opacity .25s
}

.swapping [data-i18n] {
    opacity: 0 !important
}

@keyframes rise {
    to {
        opacity: 1;
        filter: blur();
        transform: none
    }
}

@keyframes fade {
    to {
        opacity: 1
    }
}

@keyframes grow {
    to {
        transform: scaleX(1)
    }
}

@keyframes glow {
    50% {
        text-shadow: 0 0 46px #ff6a00d9, 0 0 8px #ff6a0099
    }
}

@keyframes shimmer {

    0%,
    40%,
    to {
        color: var(--gray);
        text-shadow: 0 0 36px #000000e6, 0 4px 18px #000000b3
    }

    18% {
        color: #fff;
        text-shadow: 0 0 36px #ffffff73, 0 4px 18px #000000b3
    }
}

@media (width<=520px) {
    .tags {
        flex-wrap: wrap;
        justify-content: center;
        font-size: .68rem
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        transition: none !important;
        animation: none !important
    }

    .wordmark span,
    .rule,
    .slogan,
    .tags {
        opacity: 1;
        filter: none;
        transform: none
    }

    .slogan-word {
        translate: 0px 0px;
        filter: none
    }
}