:root {
    --brand: #b42a2a;
    --brand-dark: #8f2020;
    --brand-10: rgba(180, 42, 42, .1);
    --brand-20: rgba(180, 42, 42, .2);
    --brand-30: rgba(180, 42, 42, .3);
    --bg: #000;
    --n400: #a1a1a1;
    --n500: #737373;
    --n600: #404040
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

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

img {
    display: block;
    max-width: 100%
}

button {
    cursor: pointer;
    border: none;
    background: 0 0;
    font-family: inherit;
    color: inherit
}

input,
select {
    font-family: inherit
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: rgba(180, 42, 42, .25);
    border-radius: 2px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 42, 42, .5)
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 42, 42, .25) transparent
}

#bg-wrap {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
    box-shadow: inset 0 0 150px rgba(0, 0, 0, .5)
}

#bg-orb1 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% -10%, rgba(180, 42, 42, .15) 0, transparent 45%), radial-gradient(circle at 80% 20%, rgba(143, 32, 32, .12) 0, transparent 45%)
}

#bg-orb2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 100%, rgba(180, 42, 42, .1) 0, transparent 50%), radial-gradient(circle at 0 100%, rgba(143, 32, 32, .08) 0, transparent 50%), radial-gradient(circle at 50% 50%, rgba(12, 8, 8, .5) 0, transparent 100%)
}

#bg-dots {
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: radial-gradient(rgba(212, 90, 90, .12) 1px, transparent 1px);
    background-size: 60px 60px
}

#bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(transparent 40%, rgba(2, 2, 2, .85) 100%)
}

#bg-top {
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 128px;
    background: linear-gradient(var(--bg) 0, transparent 100%)
}

#bg-bottom {
    position: absolute;
    inset-x: 0;
    bottom: 0;
    height: 128px;
    background: linear-gradient(to top, var(--bg) 0, transparent 100%)
}

@keyframes orbPulse1 {
    0%,
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1
    }
    50% {
        transform: scale(1.08) translate(2%, 3%);
        opacity: .85
    }
}

@keyframes orbPulse2 {
    0%,
    100% {
        transform: scale(1) translate(0, 0);
        opacity: .9
    }
    50% {
        transform: scale(1.1) translate(-2%, -3%);
        opacity: 1
    }
}

#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden
}

.ln {
    position: absolute;
    width: 1px;
    height: 30px;
    border-radius: 1px;
    background: linear-gradient(to bottom, transparent, rgba(180, 42, 42, .4), transparent);
    filter: blur(1px);
    animation: ease-in-out infinite lnTwinkle
}

@keyframes lnTwinkle {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: var(--op, .5)
    }
}

.view {
    display: none;
    position: relative;
    z-index: 1;
    min-height: 100vh
}

.view.active {
    display: block
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .75s, transform .75s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: .3
    }
}

@keyframes ncPulse {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}