/* Floating hearts */
@keyframes floating-up {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    25% {
        transform: translateY(-25vh) rotate(45deg);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-50vh) rotate(-45deg);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-75vh) rotate(22deg);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 0;
    }
}

.floating-heart {
    position: absolute;
    bottom: -40px;
    width: 20px;
    height: 20px;
    background-color: var(--color-pink-soft);
    clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 50% 80%, 18% 100%, 0% 35%);
    /* Heart shape clip-path */
    opacity: 0;
    animation: floating-up 10s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Scroll Fade In */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* Polaroid Hover Animation */
.polaroid {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.polaroid:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.03) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    z-index: 5;
}

/* Typewriter Animation for Love Letter */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.typewriter-text {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

/* Heart-shaped clip-path reveal */
@keyframes heart-reveal {
    0% {
        clip-path: circle(0% at 50% 50%);
    }

    100% {
        clip-path: circle(150% at 50% 50%);
    }
}

.page-transition {
    animation: heart-reveal 1.5s ease-out forwards;
}

/* Bounce for scroll indicator */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}

/* Wax Seal Beat */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 2s infinite;
}