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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, Arial, sans-serif;
    background: #030207;
    color: #f7f4ff;
    min-height: 100vh;
    overflow-x: hidden;
}

button,
a {
    font: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}


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

#galaxyCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -5;

    opacity: 0;

    animation:
        galaxyIn 1.4s ease forwards;
}

.ambient {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: -3;
}

.ambient-one {
    width: 420px;
    height: 420px;

    background: #7627ff;

    top: 15%;
    left: -180px;

    opacity: 0;

    animation:
        ambientIn 1.5s .2s ease forwards,
        ambientOneFloat 14s 1.7s ease-in-out infinite alternate;
}

.ambient-two {
    width: 380px;
    height: 380px;

    background: #00c8ff;

    right: -180px;
    bottom: 0;

    opacity: 0;

    animation:
        ambientIn 1.5s .35s ease forwards,
        ambientTwoFloat 17s 1.85s ease-in-out infinite alternate;
}


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

.site-header {
    position: fixed;

    top: 18px;
    left: 50%;

    transform:
        translateX(-50%)
        translateY(-35px);

    width: min(1180px, calc(100% - 30px));
    height: 66px;

    padding:
        8px
        10px
        8px
        16px;

    border:
        1px solid
        rgba(255,255,255,.11);

    background:
        rgba(7,5,16,.66);

    backdrop-filter:
        blur(24px);

    border-radius: 22px;

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

    z-index: 20;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.3);

    opacity: 0;

    animation:
        headerIn
        .9s
        .05s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 150px;

    opacity: 0;

    animation:
        fadeUp
        .65s
        .3s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.brand-logo {
    height: 32px;
    width: auto;

    display: block;

    filter:
        drop-shadow(
            0 0 14px
            rgba(151,71,255,.25)
        );

    transition:
        transform .35s
        cubic-bezier(.22,1,.36,1),
        filter .35s ease;
}

.brand:hover .brand-logo {
    transform:
        translateY(-2px)
        scale(1.03);

    filter:
        drop-shadow(
            0 0 20px
            rgba(151,71,255,.4)
        );
}

.version-pill {
    font-size: 11px;

    font-weight: 700;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        999px;

    color:
        #c9c0da;

    background:
        rgba(255,255,255,.04);

    transition:
        .3s
        cubic-bezier(.22,1,.36,1);
}

.brand:hover .version-pill {
    transform:
        translateY(-2px);

    border-color:
        rgba(190,100,255,.35);

    background:
        rgba(150,70,255,.1);
}


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

.main-nav {
    display: flex;

    gap: 4px;

    padding: 4px;

    background:
        rgba(0,0,0,.18);

    border-radius: 16px;
}

.nav-item {
    position: relative;

    border: 0;

    background:
        transparent;

    color:
        #9b94ab;

    padding:
        10px
        15px;

    border-radius:
        12px;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        600;

    opacity:
        0;

    animation:
        navIn
        .55s
        var(--delay)
        cubic-bezier(.22,1,.36,1)
        forwards;

    transition:
        .3s
        cubic-bezier(.22,1,.36,1);
}

.nav-item:nth-child(1) {
    --delay: .4s;
}

.nav-item:nth-child(2) {
    --delay: .48s;
}

.nav-item:nth-child(3) {
    --delay: .56s;
}

.nav-item:hover {
    color: #fff;

    background:
        rgba(255,255,255,.05);

    transform:
        translateY(-2px);
}

.nav-item.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(150,75,255,.3),
            rgba(30,210,255,.1)
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(190,120,255,.16);
}

.nav-item::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #a84cff,
            #38dfff
        );

    transition:
        width .35s
        cubic-bezier(.22,1,.36,1);
}

.nav-item:hover::after,
.nav-item.active::after {
    width: 22px;
}


/* =========================================================
   DISCORD
   ========================================================= */

.header-discord {
    border:
        1px solid
        rgba(180,110,255,.24);

    background:
        rgba(139,72,255,.1);

    padding:
        10px
        15px;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        700;

    color:
        #ded5ee;

    opacity:
        0;

    animation:
        fadeUp
        .65s
        .6s
        cubic-bezier(.22,1,.36,1)
        forwards;

    transition:
        .35s
        cubic-bezier(.22,1,.36,1);
}

.header-discord:hover {
    transform:
        translateY(-3px);

    background:
        rgba(139,72,255,.2);

    color:
        #fff;

    border-color:
        rgba(190,120,255,.4);

    box-shadow:
        0 8px 30px
        rgba(130,60,255,.12);
}


/* =========================================================
   PAGES
   ========================================================= */

.page {
    display: none;

    min-height: 100vh;

    padding:
        130px
        24px
        60px;
}

.page.active {
    display: block;
}

.page.page-enter {
    animation:
        pageIn
        .55s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* =========================================================
   HOME
   ========================================================= */

#home {
    min-height: 100vh;

    display: none;

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

    padding-top: 90px;
}

#home.active {
    display: flex;
}

.hero-wrap {
    min-height:
        calc(100vh - 190px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    text-align:
        center;

    width:
        100%;

    perspective:
        1200px;
}


/* =========================================================
   INITIAL SOLAS MATERIALIZE
   ========================================================= */

#home.active .hero-logo {
    display: block;

    width: max-content;
    max-width: 100%;

    white-space: nowrap;

    font-size:
        clamp(
            100px,
            18vw,
            245px
        );

    line-height:
        .9;

    margin:
        30px
        auto
        22px;

    font-weight:
        900;

    letter-spacing:
        0;

    background:
        linear-gradient(
            90deg,
            #ff3b89 5%,
            #ffbe4d 28%,
            #a865ff 50%,
            #39ddff 72%,
            #ff3b89 95%
        );

    background-size:
        300% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    position:
        relative;

    z-index:
        1;

    opacity:
        0;

    transform:
        translateY(55px)
        scale(.78)
        rotateX(16deg);

    filter:
        blur(18px)
        drop-shadow(
            0 0 45px
            rgba(151,71,255,.2)
        );

    animation:
        logoMaterialize
        1.6s
        .65s
        cubic-bezier(.16,1,.3,1)
        forwards,

        rainbow
        8s
        2.25s
        linear
        infinite;
}


/* =========================================================
   AFTER FIRST LOAD
   ========================================================= */

body.site-loaded #home.active .hero-logo {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1)
        rotateX(0);

    filter:
        blur(0)
        drop-shadow(
            0 0 45px
            rgba(151,71,255,.2)
        );

    animation:
        rainbow
        8s
        linear
        infinite;
}


/* =========================================================
   RETURNING TO HOME
   ========================================================= */

body.site-loaded #home.page-enter .hero-logo {
    animation:
        homeDrop
        .42s
        cubic-bezier(.22,1,.36,1)
        both,

        rainbow
        8s
        .42s
        linear
        infinite;
}


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

.hero-actions {
    display:
        flex;

    gap:
        12px;

    margin-top:
        30px;

    opacity:
        0;

    transform:
        translateY(25px);

    animation:
        fadeUp
        .8s
        1.05s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.site-loaded #home.page-enter .hero-actions {
    animation:
        quickFadeUp
        .4s
        .08s
        cubic-bezier(.22,1,.36,1)
        both;
}

.primary-action,
.secondary-action {
    height:
        50px;

    padding:
        0
        24px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(255,255,255,.1);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-weight:
        700;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        filter .3s ease,
        box-shadow .4s ease,
        background .3s ease;
}

.primary-action {
    color:
        #fff;

    background:
        linear-gradient(
            110deg,
            #8d43ff,
            #c151ff
        );

    box-shadow:
        0 10px 35px
        rgba(132,62,255,.25);
}

.secondary-action {
    background:
        rgba(255,255,255,.045);

    color:
        #ddd6e7;
}

.primary-action:hover,
.secondary-action:hover {
    transform:
        translateY(-5px)
        scale(1.02);

    filter:
        brightness(1.08);
}

.primary-action:hover {
    box-shadow:
        0 16px 45px
        rgba(132,62,255,.35);
}

.secondary-action:hover {
    border-color:
        rgba(190,120,255,.3);

    background:
        rgba(255,255,255,.07);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.25);
}

.primary-action:active,
.secondary-action:active {
    transform:
        scale(.96);
}


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

.hero-meta {
    display:
        flex;

    gap:
        22px;

    margin-top:
        35px;

    color:
        #70697c;

    font-size:
        11px;

    opacity:
        0;

    transform:
        translateY(15px);

    animation:
        fadeUp
        .8s
        1.25s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.site-loaded #home.page-enter .hero-meta {
    animation:
        quickFadeUp
        .4s
        .15s
        cubic-bezier(.22,1,.36,1)
        both;
}

.hero-meta span {
    transition:
        .3s
        cubic-bezier(.22,1,.36,1);
}

.hero-meta span:hover {
    color:
        #aaa2b7;

    transform:
        translateY(-2px);
}


/* =========================================================
   FEATURES
   ========================================================= */

.section-heading {
    width:
        min(
            1180px,
            100%
        );

    margin:
        0
        auto
        34px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    opacity:
        0;

    transform:
        translateY(30px);

    animation:
        fadeUp
        .8s
        .15s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.section-heading h2,
.download-copy h2 {
    font-size:
        clamp(
            36px,
            5vw,
            64px
        );

    letter-spacing:
        -.055em;

    margin-top:
        9px;

    line-height:
        1;
}

.section-kicker {
    font-size:
        10px;

    letter-spacing:
        .25em;

    font-weight:
        800;

    color:
        #958ca5;
}

.section-note {
    max-width:
        340px;

    color:
        #8d8599;

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   FEATURE SHELL
   ========================================================= */

.feature-shell {
    width:
        min(
            1180px,
            100%
        );

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        215px
        1fr;

    gap:
        15px;

    opacity:
        0;

    transform:
        translateY(35px);

    animation:
        fadeUp
        .9s
        .3s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* =========================================================
   CATEGORY RAIL
   ========================================================= */

.category-rail {
    padding:
        8px;

    background:
        rgba(8,6,16,.64);

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        22px;

    height:
        max-content;

    transition:
        .4s ease;
}

.category-rail:hover {
    border-color:
        rgba(170,90,255,.2);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.2);
}


/* =========================================================
   CATEGORY BUTTONS
   ========================================================= */

.category-button {
    width:
        100%;

    border:
        0;

    background:
        transparent;

    color:
        #8d859c;

    text-align:
        left;

    padding:
        12px
        13px;

    border-radius:
        13px;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    font-size:
        12px;

    font-weight:
        650;

    opacity:
        0;

    transform:
        translateX(-15px);

    transition:
        .3s
        cubic-bezier(.22,1,.36,1);
}

/*
 * Long entrance only on the very first paint,
 * before body.site-loaded is added.
 */
body:not(.site-loaded) .category-button {
    animation:
        categoryIn
        .45s
        var(--category-delay, 0s)
        cubic-bezier(.22,1,.36,1)
        forwards;
}

/*
 * Short return animation every time the Features
 * page is re-entered after the first load.
 */
body.site-loaded #features.page-enter .category-button {
    animation:
        categoryReturn
        .25s
        cubic-bezier(.22,1,.36,1)
        both;
}

/*
 * After first load, if a page isn't actively entering,
 * make sure buttons are simply visible (no stuck opacity:0).
 */
body.site-loaded .category-button {
    opacity: 1;
    transform: translateX(0);
}

.category-button:hover {
    background:
        rgba(255,255,255,.04);

    color:
        #ddd7e7;

    transform:
        translateX(4px);
}

.category-button.active {
    background:
        linear-gradient(
            100deg,
            rgba(148,74,255,.25),
            rgba(38,207,255,.06)
        );

    color:
        #fff;

    box-shadow:
        inset
        0 0 0 1px
        rgba(168,91,255,.18);
}

.category-button span:first-child {
    font-size:
        9px;

    color:
        #615a6c;

    width:
        20px;

    transition:
        color
        .3s
        ease;
}

.category-button.active span:first-child {
    color:
        #b66bff;
}


/* =========================================================
   FEATURE PANEL
   ========================================================= */

.feature-panel {
    min-width:
        0;

    padding:
        23px;

    background:
        rgba(7,5,14,.65);

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        22px;

    transition:
        border-color .4s ease,
        box-shadow .4s ease;
}

.feature-panel:hover {
    border-color:
        rgba(170,90,255,.16);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.22);
}


/* =========================================================
   FEATURE PANEL TOP
   ========================================================= */

.feature-panel-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    padding:
        0
        4px
        18px;

    margin-bottom:
        17px;
}

.feature-panel-top div {
    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;
}

.feature-panel-top span:first-child {
    font-size:
        10px;

    color:
        #9f62ff;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.feature-panel-top h3 {
    font-size:
        22px;

    transition:
        .3s
        cubic-bezier(.22,1,.36,1);
}

.feature-panel-top > span:last-child {
    font-size:
        9px;

    color:
        #716a7d;

    letter-spacing:
        .15em;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.feature-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        9px;
}


/* =========================================================
   FEATURE ITEMS
   ========================================================= */

.feature-item {
    position:
        relative;

    padding:
        14px
        14px
        15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);

    min-height:
        68px;

    opacity:
        0;

    transform:
        translateY(15px)
        scale(.96);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .3s ease,
        background .3s ease,
        box-shadow .4s ease;
}

/*
 * Long entrance only on the very first paint.
 */
body:not(.site-loaded) .feature-item {
    animation:
        featureIn
        .5s
        cubic-bezier(.22,1,.36,1)
        both;
}

/*
 * Short animation whenever the feature grid is
 * (re)rendered after first load — covers both
 * re-entering the Features page and switching
 * categories within it.
 */
body.site-loaded .feature-item {
    animation:
        featureReturn
        .22s
        cubic-bezier(.22,1,.36,1)
        both;
}

.feature-item:hover {
    transform:
        translateY(-5px)
        scale(1.015);

    border-color:
        rgba(171,99,255,.3);

    background:
        rgba(142,69,255,.07);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.2);
}

.feature-item::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        12px;

    bottom:
        12px;

    width:
        2px;

    border-radius:
        2px;

    background:
        linear-gradient(
            180deg,
            #ff4f9a,
            #a855ff,
            #35dcff
        );

    opacity:
        0;

    transform:
        scaleY(0);

    transition:
        .4s
        cubic-bezier(.22,1,.36,1);
}

.feature-item:hover::before {
    opacity:
        .9;

    transform:
        scaleY(1);
}

.feature-title {
    font-size:
        12px;

    font-weight:
        700;

    color:
        #eee9f4;
}

.feature-desc {
    font-size:
        10px;

    color:
        #777080;

    margin-top:
        5px;

    line-height:
        1.4;
}


/* =========================================================
   DOWNLOAD
   ========================================================= */

.download-layout {
    width:
        min(
            1040px,
            100%
        );

    min-height:
        calc(100vh - 190px);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr
        440px;

    gap:
        70px;

    align-items:
        center;
}

.download-copy {
    opacity:
        0;

    transform:
        translateX(-45px);
}

body:not(.site-loaded) .download-copy {
    animation:
        downloadLeft
        .9s
        .25s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.site-loaded #download.page-enter .download-copy {
    animation:
        pageReturnLeft
        .3s
        cubic-bezier(.22,1,.36,1)
        both;
}

body.site-loaded .download-copy {
    opacity: 1;
    transform: translateX(0);
}

.download-copy h2 span {
    background:
        linear-gradient(
            90deg,
            #ff3c93,
            #9f5cff,
            #32d9ff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.release-card {
    padding:
        25px;

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(18,12,31,.88),
            rgba(7,8,18,.82)
        );

    border:
        1px solid
        rgba(188,116,255,.2);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.35),

        0 0 70px
        rgba(107,45,210,.08);

    opacity:
        0;

    transform:
        translateX(45px)
        scale(.94);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        box-shadow .45s ease;
}

body:not(.site-loaded) .release-card {
    animation:
        downloadRight
        .9s
        .4s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.site-loaded #download.page-enter .release-card {
    animation:
        pageReturnRight
        .3s
        .05s
        cubic-bezier(.22,1,.36,1)
        both;
}

body.site-loaded .release-card {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.release-card:hover {
    transform:
        translateY(-6px)
        scale(1.01);

    border-color:
        rgba(188,116,255,.35);

    box-shadow:
        0 40px 110px
        rgba(0,0,0,.45),

        0 0 80px
        rgba(107,45,210,.13);
}

.release-top {
    display:
        flex;

    gap:
        13px;

    align-items:
        center;

    padding-bottom:
        21px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.release-top p {
    font-size:
        9px;

    letter-spacing:
        .18em;

    color:
        #756d80;

    font-weight:
        800;
}

.release-top h3 {
    margin-top:
        5px;

    font-size:
        18px;
}

.release-top h3 span {
    color:
        #9c91a8;

    font-weight:
        500;

    font-size:
        12px;
}

.release-line {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        15px
        2px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    font-size:
        12px;
}

.release-line span {
    color:
        #716a7b;
}

.release-line strong {
    color:
        #dcd5e4;
}

.download-main {
    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px;

    border-radius:
        15px;

    background:
        linear-gradient(
            110deg,
            #8d43ff,
            #c34eff
        );

    box-shadow:
        0 12px 30px
        rgba(130,57,255,.23);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        filter .3s ease,
        box-shadow .4s ease;
}

.download-main:hover {
    transform:
        translateY(-4px)
        scale(1.01);

    filter:
        brightness(1.08);

    box-shadow:
        0 18px 45px
        rgba(130,57,255,.35);
}

.download-main:active {
    transform:
        scale(.97);
}

.download-main span {
    display:
        flex;

    flex:
        1;

    flex-direction:
        column;
}

.download-main strong {
    font-size:
        12px;
}

.download-main small {
    font-size:
        9px;

    opacity:
        .7;

    margin-top:
        3px;
}

.download-discord {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        9px;

    height:
        43px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        13px;

    color:
        #bdb4c8;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        .35s
        cubic-bezier(.22,1,.36,1);
}

.download-discord:hover {
    color:
        #fff;

    background:
        rgba(255,255,255,.04);

    border-color:
        rgba(180,100,255,.25);

    transform:
        translateY(-3px);
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position:
        fixed;

    bottom:
        25px;

    left:
        50%;

    transform:
        translate(-50%, 20px)
        scale(.95);

    opacity:
        0;

    padding:
        9px
        15px;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #09060e;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        .4s
        cubic-bezier(.22,1,.36,1);

    z-index:
        50;
}

.toast.show {
    opacity:
        1;

    transform:
        translate(-50%, 0)
        scale(1);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes galaxyIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ambientIn {
    from {
        opacity: 0;
    }

    to {
        opacity: .22;
    }
}

@keyframes ambientOneFloat {
    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(120px,70px,0)
            scale(1.15);
    }
}

@keyframes ambientTwoFloat {
    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(-100px,-70px,0)
            scale(1.12);
    }
}

@keyframes headerIn {

    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-35px)
            scale(.96);
    }

    100% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}

@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(22px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes navIn {

    from {
        opacity: 0;

        transform:
            translateY(-12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   BIG INITIAL MATERIALIZE
   ========================================================= */

@keyframes logoMaterialize {

    0% {
        opacity: 0;

        transform:
            translateY(55px)
            scale(.78)
            rotateX(16deg);

        filter:
            blur(18px)
            drop-shadow(
                0 0 45px
                rgba(151,71,255,.2)
            );
    }

    35% {
        opacity: .45;

        transform:
            translateY(25px)
            scale(.88)
            rotateX(8deg);

        filter:
            blur(9px)
            drop-shadow(
                0 0 55px
                rgba(151,71,255,.3)
            );
    }

    70% {
        opacity: .9;

        transform:
            translateY(-4px)
            scale(1.015)
            rotateX(-1deg);

        filter:
            blur(1px)
            drop-shadow(
                0 0 60px
                rgba(151,71,255,.28)
            );
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotateX(0);

        filter:
            blur(0)
            drop-shadow(
                0 0 45px
                rgba(151,71,255,.2)
            );
    }
}


/* =========================================================
   QUICK RETURN
   ========================================================= */

@keyframes homeDrop {

    0% {
        opacity: 0;

        transform:
            translateY(-14px)
            scale(.985);

        filter:
            blur(2px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}

@keyframes quickFadeUp {

    0% {
        opacity: 0;

        transform:
            translateY(10px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes pageIn {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);

        filter:
            blur(3px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}

@keyframes categoryIn {

    from {
        opacity: 0;

        transform:
            translateX(-15px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes featureIn {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.96);
    }

    to {
        opacity: 1;

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

@keyframes downloadLeft {

    from {
        opacity: 0;

        transform:
            translateX(-45px);

        filter:
            blur(7px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }
}

@keyframes categoryReturn {

    from {
        opacity: 0;

        transform:
            translateX(-6px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes featureReturn {

    from {
        opacity: 0;

        transform:
            translateY(6px)
            scale(.99);
    }

    to {
        opacity: 1;

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

@keyframes pageReturnLeft {

    from {
        opacity: 0;

        transform:
            translateX(-16px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes pageReturnRight {

    from {
        opacity: 0;

        transform:
            translateX(16px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes downloadRight {

    from {
        opacity: 0;

        transform:
            translateX(45px)
            scale(.94);

        filter:
            blur(7px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        filter:
            blur(0);
    }
}

@keyframes rainbow {

    to {
        background-position:
            300% center;
    }
}


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

@media(max-width:850px) {

    .site-header {
        height:
            60px;
    }

    .brand {
        min-width:
            auto;
    }

    .brand-logo {
        height:
            26px;
    }

    .header-discord span,
    .nav-item span {
        display:
            none;
    }

    .nav-item {
        padding:
            10px
            12px;
    }

    .main-nav {
        margin-left:
            auto;

        margin-right:
            8px;
    }

    .feature-shell {
        grid-template-columns:
            1fr;
    }

    .category-rail {
        display:
            flex;

        overflow-x:
            auto;

        gap:
            4px;

        padding:
            6px;
    }

    .category-button {
        width:
            auto;

        white-space:
            nowrap;

        padding:
            10px
            12px;
    }

    .category-button span:first-child {
        display:
            none;
    }

    .feature-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .download-layout {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }
}


@media(max-width:560px) {

    .page {
        padding-left:
            15px;

        padding-right:
            15px;
    }

    .site-header {
        top:
            10px;

        width:
            calc(100% - 20px);

        padding-left:
            10px;
    }

    .version-pill {
        display:
            none;
    }

    .brand-logo {
        height:
            22px;
    }

    .header-discord {
        padding:
            9px
            12px;
    }

    .hero-logo {
        font-size:
            28vw;
    }

    .hero-meta {
        gap:
            10px;

        flex-wrap:
            wrap;

        justify-content:
            center;
    }

    .feature-grid {
        grid-template-columns:
            1fr;
    }

    .feature-panel {
        padding:
            15px;
    }

    .download-copy h2 {
        font-size:
            45px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* =========================================================
   SOLAS - FINAL INTERACTION / ANIMATION OVERRIDES
   ========================================================= */

/* Disable text selection and dragging across the entire site. */
html,
body,
body * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

body * {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}

/* Keep the page itself from accidentally becoming selectable. */
body {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/*
 * Do not change .page display/visibility behavior here.
 * The original script controls .page.active.
 *
 * The existing Home materialize animation remains intact.
 * Returning to a page should not get another large materialize
 * animation from these overrides.
 */

/* Smooth micro-interactions. */
button,
a {
    -webkit-tap-highlight-color: transparent;
    transition:
        transform .25s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        filter .25s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

/* Buttons / links lift slightly on hover. */
button:hover,
a:hover {
    transform: translateY(-2px);
}

button:active,
a:active {
    transform: translateY(0) scale(.97);
}

/* Category rail interaction. */
.category-button:hover {
    transform: translateX(4px);
}

.category-button:active {
    transform: translateX(2px) scale(.98);
}

/* Feature cards. */
.feature-item {
    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease,
        background .3s ease,
        box-shadow .35s ease;
}

.feature-item:hover {
    transform: translateY(-5px) scale(1.015);
}

/* Release card. */
.release-card {
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .4s ease;
}

.release-card:hover {
    transform: translateY(-6px) scale(1.01);
}

/* Download controls. */
.download-main:hover,
.download-discord:hover,
.primary-action:hover,
.secondary-action:hover,
.header-discord:hover {
    transform: translateY(-3px);
}

.download-main:active,
.download-discord:active,
.primary-action:active,
.secondary-action:active,
.header-discord:active {
    transform: translateY(0) scale(.97);
}

/* Prevent browser selection highlight entirely. */
::selection {
    background: transparent !important;
    color: inherit !important;
}

::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}