:root {
    --paper: #fffaf9;
    --ink: #160d10;
    --wine: rgba(101, 0, 32, 0.58);
    --red: rgba(197, 10, 53, 0.46);
    --rose: rgba(255, 96, 155, 0.48);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "Cormorant Garamond", Georgia, serif;
}

.stage {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    isolation: isolate;
}

h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(56px, 9vw, 132px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0;
    text-shadow: 0 18px 45px rgba(84, 0, 24, 0.08);
}

.aurora {
    position: fixed;
    inset: -28vh -20vw;
    z-index: -1;
    overflow: hidden;
    filter: blur(48px);
    opacity: 1;
    pointer-events: none;
}

.aurora::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 25%),
        linear-gradient(to bottom, rgba(255, 250, 249, 0.28), rgba(255, 250, 249, 0.02) 40%, rgba(255, 250, 249, 0.46));
    z-index: 2;
}

.ribbon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120vw;
    height: 46vh;
    border-radius: 999px;
    transform: translate(-50%, -50%) rotate(-9deg);
    background:
        radial-gradient(ellipse at 18% 50%, var(--wine), rgba(101, 0, 32, 0) 52%),
        radial-gradient(ellipse at 50% 36%, var(--red), rgba(197, 10, 53, 0) 54%),
        radial-gradient(ellipse at 82% 54%, var(--rose), rgba(255, 96, 155, 0) 52%);
    mix-blend-mode: multiply;
    animation: float-one 7s ease-in-out infinite alternate;
}

.ribbon-two {
    width: 104vw;
    height: 38vh;
    transform: translate(-47%, -54%) rotate(10deg);
    background:
        radial-gradient(ellipse at 26% 44%, rgba(255, 177, 206, 0.58), rgba(255, 177, 206, 0) 50%),
        radial-gradient(ellipse at 66% 52%, rgba(111, 7, 34, 0.42), rgba(111, 7, 34, 0) 58%);
    animation: float-two 8.5s ease-in-out infinite alternate;
}

.ribbon-three {
    width: 112vw;
    height: 30vh;
    transform: translate(-54%, -46%) rotate(-18deg);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(137, 7, 39, 0.4), rgba(255, 122, 169, 0.42), rgba(255, 255, 255, 0));
    animation: float-three 10s ease-in-out infinite alternate;
}

@keyframes float-one {
    from {
        transform: translate(-58%, -56%) rotate(-14deg) scale(1.02);
    }

    to {
        transform: translate(-42%, -44%) rotate(-3deg) scale(1.18);
    }
}

@keyframes float-two {
    from {
        transform: translate(-40%, -62%) rotate(4deg) scale(1);
    }

    to {
        transform: translate(-57%, -45%) rotate(17deg) scale(1.16);
    }
}

@keyframes float-three {
    from {
        transform: translate(-62%, -38%) rotate(-24deg) scale(1.04);
    }

    to {
        transform: translate(-42%, -58%) rotate(-9deg) scale(1.2);
    }
}

@media (max-width: 720px) {
    h1 {
        font-size: clamp(52px, 18vw, 82px);
    }

    .aurora {
        inset: -18vh -48vw;
        filter: blur(42px);
    }

    .ribbon {
        width: 170vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ribbon {
        animation: none;
    }
}