@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --black: #09050d;
    --dark-purple: #160b20;
    --purple: #6e3b8d;
    --pink: #f06fae;
    --light-pink: #ffb5d8;
    --white: #fff8fc;
    --soft-white: #e7dfe8;
    --muted: #aa95ad;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

.background-glow {
    position: fixed;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.23;
    pointer-events: none;
    z-index: 0;
}

.glow-1 {
    background: #c84f9d;
    top: -150px;
    left: -100px;
}

.glow-2 {
    background: #673bb8;
    bottom: -180px;
    right: -100px;
}

.floating-hearts span {
    position: fixed;
    bottom: -30px;
    color: var(--pink);
    opacity: 0;
    font-size: 20px;
    pointer-events: none;
    z-index: 10;
    animation: floatHeart 10s linear infinite;
}

.floating-hearts span:nth-child(1) {
    left: 8%;
    animation-delay: 1s;
}

.floating-hearts span:nth-child(2) {
    left: 24%;
    animation-delay: 5s;
}

.floating-hearts span:nth-child(3) {
    left: 45%;
    animation-delay: 2s;
}

.floating-hearts span:nth-child(4) {
    left: 63%;
    animation-delay: 7s;
}

.floating-hearts span:nth-child(5) {
    left: 80%;
    animation-delay: 4s;
}

.floating-hearts span:nth-child(6) {
    left: 92%;
    animation-delay: 8s;
}

@keyframes floatHeart {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }

    15% {
        opacity: 0.6;
    }

    80% {
        opacity: 0.25;
    }

    100% {
        transform: translateY(-110vh) scale(1.5);
        opacity: 0;
    }
}

.reveal {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.reveal.animate {
    opacity: 0;
    transform: translateY(40px);
}

.reveal.animate.visible {
    opacity: 1;
    transform: translateY(0);
}