:root {
    color-scheme: light dark;
    --bg: #f8fafc;
    --surface: rgba(255, 255, 255, 0.72);
    --text: #0f172a;
    --muted: #64748b;
    --border: rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 1px 10px rgba(2, 6, 23, 0.08);
    --primary: #2b34bd;
    --primary-hover: #2e5bc6;
    --hero-spot-1: rgba(43, 52, 189, 0.12);
    --hero-spot-2: rgba(43, 52, 189, 0.06);
    --hero-grid: rgba(2, 6, 23, 0.04);
    --clr-1: rgba(0, 194, 255, 0.75);
    --clr-2: rgba(51, 255, 140, 0.55);
    --clr-3: rgba(255, 198, 64, 0.55);
    --clr-4: rgba(229, 76, 255, 0.55);
    --blur: 1.1rem;
    --aurora-opacity: 0.70;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1020;
        --surface: rgba(15, 23, 42, 0.62);
        --text: #e5e7eb;
        --muted: rgba(229, 231, 235, 0.62);
        --border: rgba(226, 232, 240, 0.12);
        --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.35);
        --hero-spot-1: rgba(43, 52, 189, 0.24);
        --hero-spot-2: rgba(43, 52, 189, 0.12);
        --hero-grid: rgba(255, 255, 255, 0.05);
        --clr-1: rgba(0, 194, 255, 0.70);
        --clr-2: rgba(51, 255, 140, 0.45);
        --clr-3: rgba(255, 198, 64, 0.45);
        --clr-4: rgba(229, 76, 255, 0.55);
        --aurora-opacity: 0.85;
    }
}

*,
*::before,
*::after {
    font-family: inherit;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    user-select: none;
    overflow: hidden;
    background:
        radial-gradient(1200px circle at 18% 6%, var(--hero-spot-1), transparent 58%),
        radial-gradient(900px circle at 92% 10%, var(--hero-spot-2), transparent 55%),
        var(--bg);
    font-family: "Inter", "DM Sans", Arial, sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(90deg, var(--hero-grid) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(0deg, var(--hero-grid) 0 1px, transparent 1px 56px);
    opacity: 0.55;
}

.content {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.content .title-subtext {
    height: 100%;
    margin-bottom: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.content .title-subtext h1 {
    width: 100%;
    color: var(--text);
    margin: .75rem 0 2rem;
    font-size: 20vw;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0.75;
    letter-spacing: 8px;
    line-height: 0.92;
    animation: scale 1.25s forwards;
}

.content .title-subtext p {
    width: 100%;
    font-size: 8vw;
    font-weight: 500;
    letter-spacing: 2px;
    opacity: 0.75;
    white-space: nowrap;
}

.home-auth-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.home-auth-btn {
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    font-size: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.home-auth-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(43, 52, 189, 0.35);
}

.home-auth-btn:active {
    transform: translateY(0px);
}

.home-auth-btn--primary {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 520px) {
    .home-auth-actions {
        top: calc(50% + clamp(0rem, 7vw, 3.4rem));
        gap: 0.7rem;
    }

    .home-auth-btn {
        padding: 0.5rem 1rem;
        border-radius: 6px;
    }
}

@supports (-webkit-background-clip: text) {
    .content .title-subtext h1 {
        background: linear-gradient(90deg, var(--text), var(--primary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

@keyframes scale {
    from {
        font-size: 200vw;
    }

    to {
        font-size: 16vw;
        color: var(--text);
    }
}

.aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: var(--aurora-opacity);
    mix-blend-mode: multiply;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .aurora {
        mix-blend-mode: screen;
    }
}

.aurora__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

.aurora__item:nth-of-type(1) {
    top: -50%;
    animation: aurora-border 6s ease-in-out infinite,
        aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
    background-color: var(--clr-3);
    right: 0;
    top: 0;
    animation: aurora-border 6s ease-in-out infinite,
        aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
    background-color: var(--clr-2);
    left: 0;
    bottom: 0;
    animation: aurora-border 6s ease-in-out infinite,
        aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
    background-color: var(--clr-4);
    right: 0;
    bottom: -50%;
    animation: aurora-border 6s ease-in-out infinite,
        aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes aurora-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes aurora-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes aurora-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes aurora-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}

footer {
    position: fixed;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

@media (max-width: 680px) {
    .content .title {
        font-size: 22vw;
        letter-spacing: 6px;
    }
}