:root {
    --page-cream: #f7f2e8;
    --page-cream-warm: #f3eadc;
    --page-glow: #f4d7ce;
    --page-ink: #3f3f43;
    --page-grain: rgb(63 63 67 / 5%);
    --page-shadow: rgb(93 65 58 / 16%);
    --letter-start-scale: 2;
    --letter-start-blur: 20px;
    --letter-enter-delay: 240ms;
    --letter-enter-duration: 900ms;
    --letter-enter-stagger: 120ms;
}

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

html,
body {
    min-height: 100%;
    padding: 0;
    margin: 0;
}

body {
    overflow: hidden;
    background: var(--page-cream);
}

.coming-soon {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    overflow: hidden;
    color: var(--page-ink);
    background:
        radial-gradient(circle at 50% 44%,
            color-mix(in srgb, var(--page-glow) 76%, transparent) 0,
            color-mix(in srgb, var(--page-glow) 28%, transparent) 28%,
            transparent 58%),
        linear-gradient(145deg, var(--page-cream), var(--page-cream-warm));
    isolation: isolate;
}

.coming-soon::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, var(--page-grain) 0 0.04rem, transparent 0.05rem);
    background-size: 0.42rem 0.42rem;
    content: '';
    opacity: 0.16;
    pointer-events: none;
}

.coming-soon__content {
    display: grid;
    width: min(90vw, 72rem);
    place-items: center;
    transform: translateY(-3vh);
}

.coming-soon__cat-frame {
    width: clamp(10.5rem, 17vw, 13.75rem);
    aspect-ratio: 632 / 640;
}

.coming-soon__cat {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1.4rem 1.6rem var(--page-shadow));
    opacity: 0;
    transform: translateY(0.75rem);
    animation: cat-arrives 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
    user-select: none;
}

.coming-soon__title {
    margin: clamp(1.2rem, 3vh, 2rem) 0 0;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 3.5vw, 3.15rem);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.coming-soon__letters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.2rem, 0.8vw, 0.75rem);
}

.coming-soon__letter {
    --letter-delay: calc(var(--letter-enter-delay) + (var(--letter-index) - 1) * var(--letter-enter-stagger));

    display: inline-block;
    transform-origin: center;
    animation: letter-arrives var(--letter-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--letter-delay) both;
    will-change: opacity, filter, transform;
}

.coming-soon__letter--1 {
    --letter-index: 1;
}

.coming-soon__letter--2 {
    --letter-index: 2;
}

.coming-soon__letter--3 {
    --letter-index: 3;
}

.coming-soon__letter--4 {
    --letter-index: 4;
}

.coming-soon__letter--5 {
    --letter-index: 5;
}

.coming-soon__letter--6 {
    --letter-index: 6;
}

.coming-soon__letter--7 {
    --letter-index: 7;
}

.coming-soon__letter--8 {
    --letter-index: 8;
}

.coming-soon__letter--9 {
    --letter-index: 9;
}

.coming-soon__letter--10 {
    --letter-index: 10;
}

.coming-soon__space {
    width: clamp(0.35rem, 1.2vw, 1.15rem);
}

@keyframes cat-arrives {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes letter-arrives {
    from {
        opacity: 0;
        filter: blur(var(--letter-start-blur));
        transform: scale(var(--letter-start-scale));
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .coming-soon__cat {
        animation: none;
        opacity: 1;
        transform: none;
    }
}