/* =========================================
   BIRTHDAY REVEAL
   ROMANTIC + CUTE
========================================= */

#birthday-reveal {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #080406;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 999999;

    overflow: hidden;
}


/* =========================================
   SOFT BACKGROUND
========================================= */

#birthday-reveal::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,

            #fff7fa 0%,
            #ffd9e7 22%,
            #ffb1cb 45%,
            #f57fa8 65%,
            #8e3459 82%,
            #2c0118 100%
        );

    opacity: 0;

    transition:
        opacity 3s ease-in-out;

    z-index: 0;
}


#birthday-reveal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


#birthday-reveal.active::before {

    opacity: 1;
}


/* =========================================
   MAIN CONTENT
========================================= */

#birthday-reveal-content {

    position: absolute;

    z-index: 5;

    left: 50%;

    top: 50%;

    transform: translate(
        -50%,
        -50%
    );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: 90%;

    max-width: 800px;

    opacity: 0;

    transition:
        opacity 1.8s ease;
}


#birthday-reveal.active
#birthday-reveal-content {

    opacity: 1;

    transition-delay: 1.1s;
}


/* =========================================
   MAIN HEART
========================================= */

#birthday-ornament {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            4vw,
            44px
        );

    color: #a95b76;

    margin-bottom: 18px;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


#birthday-reveal.active
#birthday-ornament {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 0.7s;
}


/* =========================================
   TITLE
========================================= */

#birthday-title {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            8vw,
            80px
        );

    font-weight: 600;

    letter-spacing:
        clamp(
            3px,
            0.6vw,
            7px
        );

    line-height: 1.1;

    color: #74384f;

    text-shadow:
        0 1px 10px
        rgba(
            255,
            255,
            255,
            0.7
        );

    margin: 0;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


#birthday-reveal.active
#birthday-title {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 1.4s;
}


/* =========================================
   DECORATIVE LINE
========================================= */

#birthday-line {

    width: 0;

    height: 1px;

    margin-top: 12px;

    margin-bottom: 8px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a95b76,
            transparent
        );

    transition:
        width 1.4s ease;
}


#birthday-reveal.active
#birthday-line {

    width:
        clamp(
            120px,
            25vw,
            240px
        );

    transition-delay: 2.1s;
}


/* =========================================
   SUBTITLE
========================================= */

#birthday-subtitle {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            20px,
            3vw,
            30px
        );

    font-style: italic;

    letter-spacing: 2px;

    color: #92506a;

    opacity: 0;

    transform:
        translateY(5px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


#birthday-reveal.active
#birthday-subtitle {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 2.3s;
}


/* =========================================
   SMALL TEXT
========================================= */

#birthday-small-text {

    margin-top: 18px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            2vw,
            15px
        );

    letter-spacing: 2px;

    color: #8c6372;

    opacity: 0;

    transition:
        opacity 1.2s ease;
}


#birthday-reveal.active
#birthday-small-text {

    opacity: 1;

    transition-delay: 2.7s;
}


/* =========================================
   RANDOM DECORATION CONTAINERS
========================================= */

#random-sparkles,
#random-hearts {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 3;
}


/* =========================================
   RANDOM SPARKLES
========================================= */

.random-sparkle {

    position: absolute;

    color: #b96d88;

    line-height: 1;

    opacity: 0;

    pointer-events: none;

    will-change:
        transform,
        opacity;

    animation:
        randomSparkle
        var(--duration)
        ease-in-out
        var(--delay)
        infinite alternate;
}


@keyframes randomSparkle {

    0% {

        opacity: 0.15;

        transform:
            translateY(4px)
            scale(0.8)
            rotate(0deg);

    }

    50% {

        opacity: 0.75;

        transform:
            translateY(-3px)
            scale(1)
            rotate(15deg);

    }

    100% {

        opacity: 0.2;

        transform:
            translateY(4px)
            scale(0.8)
            rotate(30deg);

    }
}


/* =========================================
   RANDOM HEARTS
========================================= */

.random-heart {

    position: absolute;

    color: #c87995;

    line-height: 1;

    opacity: 0;

    pointer-events: none;

    will-change:
        transform,
        opacity;

    animation:
        randomHeart
        var(--duration)
        ease-in-out
        var(--delay)
        infinite alternate;
}


@keyframes randomHeart {

    0% {

        opacity: 0.12;

        transform:
            translateY(5px)
            scale(0.8);

    }

    50% {

        opacity: 0.65;

        transform:
            translateY(-7px)
            scale(1.05);

    }

    100% {

        opacity: 0.18;

        transform:
            translateY(3px)
            scale(0.85);

    }
}


/* =========================================
   CSS PETALS
========================================= */

.css-petal {

    position: absolute;

    width: 11px;

    height: 17px;

    background:
        rgba(
            190,
            91,
            124,
            0.55
        );

    border-radius:
        80% 20% 80% 20%;

    opacity: 0;

    z-index: 2;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


#birthday-reveal.active
.css-petal {

    animation:
        petalDrift
        6s
        ease-in-out
        infinite;
}


/* =========================================
   PETAL POSITIONS
========================================= */

.petal-1 {

    left: 9%;
    top: 27%;

    transform:
        rotate(25deg);

    animation-delay:
        0.8s !important;
}


.petal-2 {

    right: 11%;
    top: 32%;

    transform:
        rotate(-35deg);

    animation-delay:
        2s !important;
}


.petal-3 {

    left: 16%;
    bottom: 22%;

    transform:
        rotate(55deg);

    animation-delay:
        1.5s !important;
}


.petal-4 {

    right: 17%;
    bottom: 25%;

    transform:
        rotate(-20deg);

    animation-delay:
        3s !important;
}


.petal-5 {

    left: 27%;
    top: 14%;

    width: 8px;
    height: 13px;

    transform:
        rotate(70deg);

    animation-delay:
        3.8s !important;
}


.petal-6 {

    right: 27%;
    bottom: 14%;

    width: 8px;
    height: 13px;

    transform:
        rotate(-60deg);

    animation-delay:
        4.5s !important;
}


/* =========================================
   PETAL ANIMATION
========================================= */

@keyframes petalDrift {

    0% {

        opacity: 0;

        transform:
            translate3d(
                0,
                15px,
                0
            )
            rotate(20deg);

    }

    20% {

        opacity: 0.65;

    }

    50% {

        opacity: 0.45;

        transform:
            translate3d(
                8px,
                -10px,
                0
            )
            rotate(70deg);

    }

    80% {

        opacity: 0.55;

    }

    100% {

        opacity: 0;

        transform:
            translate3d(
                -6px,
                -28px,
                0
            )
            rotate(110deg);

    }
}

/* =========================================
   OPEN BUTTON
========================================= */

.reveal-open-button {

    margin-top: 28px;

    padding: 12px 30px;

    border: 1px solid
        rgba(169, 91, 118, 0.45);

    border-radius: 50px;

    background:
        rgba(255, 255, 255, 0.25);

    color: #8f4e68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    letter-spacing: 1.5px;

    cursor: pointer;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================
   BUTTON APPEARS
========================================= */

#birthday-reveal.active
.reveal-open-button {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 3.1s;
}


/* =========================================
   HOVER
========================================= */

.reveal-open-button:hover {

    background-color:
        rgba(255, 255, 255, 0.65);

    box-shadow:
        0 6px 20px
        rgba(130, 60, 90, 0.15);

    transform:
        translateY(-2px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .reveal-open-button {

        margin-top: 24px;

        padding:
            11px 27px;

        font-size: 14px;

    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    #birthday-title {

        width: 90%;

        font-size:
            clamp(
                37px,
                8vw,
                60px
            );

        letter-spacing: 1px;}

}