/* --------------------------------------- */
/* ----- Fonts ----- */
/* --------------------------------------- */

@font-face {
    font-family: 'Hk Grotesk';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/HKGrotesk-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/Jost-Regular.ttf') format('woff');
}

/* --------------------------------------- */
/* ----- Basic Setup ----- */
/* --------------------------------------- */

:root {
    --font-size-small: 1.8rem;
    --font-size-normal: 2.2rem;
    --font-size-medium: 2.8rem;
    --font-size-large: 5.5rem;
    --font-size-huge: 7.5rem;
    --font-stack: 'Hk Grotesk', sans-serif;
    --font-display: 'Jost', sans-serif;

    --black: #000;
    --pink: #b10020;
    --pink-soft: #ff2d55;
    --white: #f0e9f2;
    --white-1: #e5e5e6da;
    --grey: #7a7a80;

    --line: 1px solid rgba(240, 233, 242, .1);

    --gutter-huge: 12rem;
    --gutter-medium: 6rem;
    --gutter-normal: 3rem;
    --gutter-small: 2rem;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
    font-size: 62.5%; /* 1rem = 10px */
    box-sizing: border-box;
}

@media(max-width: 1000px) {
    html {
        font-size: 54%;
    }
}

body {
    min-height: 100vh;
    font-family: var(--font-stack);
    font-size: var(--font-size-normal);
    color: var(--white-1);
    line-height: 1.7;
    background: var(--black);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------- */
/* ----- Ambient Background ----- */
/* --------------------------------------- */

.particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

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

.orb {
    position: absolute;
    display: block;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}

.orb--1 {
    top: -25vmax;
    left: -20vmax;
    background: radial-gradient(circle, rgba(177, 0, 32, .75), transparent 65%);
    animation: drift-a 22s var(--ease-out) infinite alternate;
}

.orb--2 {
    bottom: -30vmax;
    right: -18vmax;
    background: radial-gradient(circle, rgba(120, 0, 60, .55), transparent 65%);
    animation: drift-b 28s var(--ease-out) infinite alternate;
}

.orb--3 {
    top: 40%;
    left: 55%;
    width: 40vmax;
    height: 40vmax;
    background: radial-gradient(circle, rgba(255, 45, 85, .28), transparent 68%);
    animation: drift-c 34s var(--ease-out) infinite alternate;
}

@keyframes drift-a {
    to {
        transform: translate3d(18vmax, 12vmax, 0) scale(1.15);
    }
}

@keyframes drift-b {
    to {
        transform: translate3d(-16vmax, -14vmax, 0) scale(1.2);
    }
}

@keyframes drift-c {
    to {
        transform: translate3d(-22vmax, 10vmax, 0) scale(.8);
    }
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .9) 100%),
        linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}

.noise {
    position: fixed;
    inset: -50%;
    z-index: 2;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 8s steps(10) infinite;
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-2%, 3%);
    }

    40% {
        transform: translate(3%, -2%);
    }

    60% {
        transform: translate(-1%, -3%);
    }

    80% {
        transform: translate(2%, 1%);
    }
}

/* --------------------------------------- */
/* ----- Layout ----- */
/* --------------------------------------- */

.page {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 var(--gutter-normal);
}

@media(max-width: 600px) {
    .page {
        padding: 0 var(--gutter-small);
    }
}

/* --------------------------------------- */
/* ----- Reveal Animation ----- */
/* --------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

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

body.is-loading .reveal {
    transition: none;
}

/* --------------------------------------- */
/* ----- Hero ----- */
/* --------------------------------------- */

.hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter-medium) 0;
}

.hero__inner {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    text-align: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0 0 var(--gutter-normal);
    padding: .8rem 2rem;
    font-family: var(--font-display);
    font-size: var(--font-size-small);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--white-1);
    border: var(--line);
    border-radius: 100px;
    background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(6px);
}

.dot {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 0 rgba(177, 0, 32, .7);
    animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 1.2rem rgba(177, 0, 32, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(177, 0, 32, 0);
    }
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(6rem, 15vw, var(--font-size-huge) * 2);
    line-height: .92;
    color: var(--white);
    margin-bottom: var(--gutter-normal);
}

.hero__title .line {
    display: block;
    overflow: hidden;
}

.hero__title .line>span {
    display: block;
}

.hero__title .line:nth-child(2)>span {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(240, 233, 242, .65);
    background: linear-gradient(120deg, var(--white), var(--pink-soft), var(--white)) 0% 50%/220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sheen 6s linear infinite;
}

@keyframes sheen {
    to {
        background-position: -220% 0;
    }
}

.hero__tagline {
    max-width: 62rem;
    margin: 0 auto var(--gutter-medium);
    font-size: var(--font-size-normal);
    color: var(--white-1);
}

/* --------------------------------------- */
/* ----- Countdown ----- */
/* --------------------------------------- */

.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: var(--gutter-normal);
    font-family: var(--font-display);
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 15rem;
    padding: 2.4rem 1.6rem 1.6rem;
    border: var(--line);
    border-radius: 14px;
    background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.countdown__value {
    font-size: clamp(4.2rem, 7vw, 6.4rem);
    line-height: 1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 40px rgba(177, 0, 32, .55);
}

.countdown__value.is-tick {
    animation: tick .5s var(--ease-out);
}

@keyframes tick {
    0% {
        transform: translateY(-25%) scale(.94);
        opacity: .35;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

.countdown__label {
    margin-top: 1rem;
    font-family: var(--font-stack);
    font-size: 1.4rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--grey);
}

.countdown__sep {
    font-size: 4rem;
    line-height: 1;
    color: var(--pink);
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

.countdown.is-done .countdown__value {
    text-shadow: none;
}

@media(max-width: 900px) {
    .countdown {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .countdown__unit {
        min-width: 12rem;
        padding: 1.8rem 1rem 1.2rem;
    }

    .countdown__sep {
        font-size: 3rem;
    }
}

@media(max-width: 420px) {
    .countdown__sep {
        display: none;
    }

    .countdown__unit {
        flex: 1 1 44%;
    }
}

.hero__launch {
    margin-bottom: var(--gutter-medium);
    font-size: var(--font-size-small);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey);
}

.hero__launch time {
    color: var(--white);
}

/* --------------------------------------- */
/* ----- Notify Form ----- */
/* --------------------------------------- */

.notify {
    max-width: 62rem;
    margin: 0 auto;
}

.notify__label {
    display: block;
    margin-bottom: 1.6rem;
    font-family: var(--font-display);
    font-size: var(--font-size-small);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--white);
}

.notify__field {
    display: flex;
    gap: 1rem;
    padding: .6rem;
    border: var(--line);
    border-radius: 100px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(10px);
    transition: border-color .3s;
}

.notify__field:focus-within {
    border-color: rgba(177, 0, 32, .8);
}

.notify__input {
    flex: 1;
    min-width: 0;
    padding: 1.4rem 2rem;
    font-family: var(--font-stack);
    font-size: var(--font-size-small);
    color: var(--white);
    background: transparent;
    border: none;
    border-radius: 100px;
    outline: none;
}

.notify__input::placeholder {
    color: var(--grey);
}

.notify__submit {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 2.8rem;
    font-family: var(--font-display);
    font-size: var(--font-size-small);
    letter-spacing: .08em;
    color: var(--white);
    cursor: pointer;
    border: 1px solid var(--pink);
    border-radius: 100px;
    background: var(--pink);
    transition: background .25s, color .25s, transform .25s;
}

.notify__submit:hover,
.notify__submit:focus-visible {
    color: var(--pink);
    background: transparent;
    transform: translateY(-2px);
}

.notify__submit svg {
    transition: transform .25s var(--ease-out);
}

.notify__submit:hover svg {
    transform: translateX(4px);
}

.notify__message {
    min-height: 3rem;
    margin: 1.6rem 0 0;
    font-size: var(--font-size-small);
    color: var(--grey);
}

.notify__message.is-success {
    color: #57d9a3;
}

.notify__message.is-error {
    color: var(--pink-soft);
}

@media(max-width: 620px) {
    .notify__field {
        flex-direction: column;
        border-radius: 22px;
    }

    .notify__submit {
        justify-content: center;
    }
}

/* --------------------------------------- */
/* ----- Footer ----- */
/* --------------------------------------- */

.cs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-small);
    padding: var(--gutter-small) 0;
    border-top: var(--line);
    font-size: var(--font-size-small);
    color: var(--grey);
}

.cs-footer__copy {
    margin: 0;
}

.cs-footer__links {
    display: flex;
    gap: var(--gutter-small);
    list-style: none;
}

.cs-footer__links a {
    text-decoration: none;
    transition: color .2s;
}

.cs-footer__links a:hover {
    color: var(--pink);
}

@media(max-width: 600px) {
    .cs-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------- */
/* ----- Accessibility ----- */
/* --------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

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

    .particles,
    .noise {
        display: none;
    }
}