:root {
    --bg: #0f1016;
    --white: #ffffff;
    --muted: #b8b8c8;

    --love: #ff4f8b;
    --x-color: #7c5cff;
    --meet: #2563eb;

    --ease: cubic-bezier(.2,.8,.2,1);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 22% 24%, rgba(255,79,139,.12), transparent 28%),
        radial-gradient(circle at 76% 76%, rgba(37,99,235,.14), transparent 34%),
        linear-gradient(180deg, #0d0f14 0%, #11131a 100%);
    color: var(--white);
}

.splash {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 22% 24%, rgba(255,79,139,.12), transparent 28%),
        radial-gradient(circle at 76% 76%, rgba(37,99,235,.14), transparent 34%),
        linear-gradient(180deg, #0d0f14 0%, #11131a 100%);
    opacity: 1;
    transition: opacity 280ms var(--ease), visibility 280ms var(--ease);
}

.splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.stage {
    position: relative;
    width: min(96vw, 1200px);
    height: 260px;
    display: grid;
    place-items: center;
}

.glow {
    position: absolute;
    width: min(68vw, 740px);
    height: 120px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--love), var(--x-color), var(--meet));
    filter: blur(78px);
    opacity: .20;
    transform: translateY(38px);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.stage.fade-glow .glow {
    opacity: 0;
    transform: translateY(38px) scale(.88);
}

.brand {
    --brand-x-shift: 0px;

    position: absolute;
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    font-weight: 800;
    font-size: clamp(56px, 11vw, 132px);
    letter-spacing: -0.065em;

    opacity: 0;
    transform: translateX(var(--brand-x-shift)) translateY(10px) scale(.98);
    filter: blur(8px);

    transition:
        opacity 280ms var(--ease),
        transform 280ms var(--ease),
        filter 280ms var(--ease);
}

.brand.active {
    opacity: 1;
    transform: translateX(var(--brand-x-shift)) translateY(0) scale(1);
    filter: blur(0);
}

.brand.hide {
    opacity: 0;
    transform: translateX(var(--brand-x-shift)) translateY(-8px) scale(.99);
    filter: blur(7px);
}

.brand .lo,
.brand .x,
.brand .eet {
    display: inline-block;
    color: var(--white);
    transition:
        margin 420ms var(--ease),
        transform 420ms var(--ease),
        color 340ms var(--ease);
}

.brand .ve,
.brand .m {
    display: inline-block;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    color: var(--white);
    filter: blur(12px);
    transform: translateY(14px) scale(.96);
    transition:
        max-width 420ms var(--ease),
        opacity 320ms var(--ease),
        filter 320ms var(--ease),
        transform 320ms var(--ease),
        color 340ms var(--ease);
}

.brand.spread .ve {
    max-width: 1.08em;
}

.brand.spread .m {
    max-width: 0.84em;
}

.brand.spread .x {
    margin-left: 0.42em;
    margin-right: 0.42em;
    transform: translateY(-0.02em);
}

.brand.show-fill .lo,
.brand.show-fill .ve {
    color: var(--love);
}

.brand.show-fill .x {
    color: var(--x-color);
}

.brand.show-fill .m,
.brand.show-fill .eet {
    color: var(--meet);
}

.brand.show-fill .ve,
.brand.show-fill .m {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.brand.white-fill .lo,
.brand.white-fill .ve,
.brand.white-fill .x,
.brand.white-fill .m,
.brand.white-fill .eet {
    color: var(--white);
}

.brand.white-fill .ve,
.brand.white-fill .m {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.brand.blink {
    animation: multiBlink 760ms ease-in-out 1;
}

@keyframes multiBlink {
    0% {
        opacity: 1;
        filter: brightness(1);
        transform: translateX(var(--brand-x-shift)) scale(1);
    }

    10% {
        opacity: .24;
        filter: brightness(2.2);
        transform: translateX(var(--brand-x-shift)) scale(1.014);
    }

    20% {
        opacity: 1;
        filter: brightness(1);
        transform: translateX(var(--brand-x-shift)) scale(1);
    }

    34% {
        opacity: .32;
        filter: brightness(2.0);
        transform: translateX(var(--brand-x-shift)) scale(1.012);
    }

    48% {
        opacity: 1;
        filter: brightness(1.1);
        transform: translateX(var(--brand-x-shift)) scale(1);
    }

    62% {
        opacity: .40;
        filter: brightness(1.8);
        transform: translateX(var(--brand-x-shift)) scale(1.01);
    }

    76% {
        opacity: 1;
        filter: brightness(1.05);
        transform: translateX(var(--brand-x-shift)) scale(1);
    }

    88% {
        opacity: .55;
        filter: brightness(1.6);
        transform: translateX(var(--brand-x-shift)) scale(1.006);
    }

    100% {
        opacity: 1;
        filter: brightness(1);
        transform: translateX(var(--brand-x-shift)) scale(1);
    }
}

.final {
    --final-x-shift: 0px;

    position: absolute;
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    font-weight: 800;
    font-size: clamp(56px, 11vw, 132px);
    letter-spacing: -0.065em;
    color: var(--white);

    opacity: 0;
    transform: translateX(var(--final-x-shift)) translateY(30px) scale(.98);
    filter: blur(8px);

    transition:
        opacity 280ms var(--ease),
        transform 280ms var(--ease),
        filter 280ms var(--ease);
}

.final.active {
    opacity: 1;
    transform: translateX(var(--final-x-shift)) translateY(0) scale(1);
    filter: blur(0);
}

.final .dotcom {
    display: inline-block;
    font-size: .32em;
    margin-left: .10em;
    color: var(--muted);
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateX(-12px);
    filter: blur(6px);
    transition:
        opacity 240ms var(--ease),
        transform 240ms var(--ease),
        filter 240ms var(--ease);
}

.final.show-com .dotcom {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.home {
    min-height: 100vh;
    opacity: 0;
    transition: opacity 200ms var(--ease);
}

.home.visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .splash {
        display: none;
    }

    .home {
        opacity: 1;
    }
}