@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromBottom {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.slide-in {
    animation: slideInFromBottom 0.5s ease-out forwards;
}

/* Cherry Blossom Animation */
.cherry-blossoms {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.cherry-blossom {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FFB7C5;
    border-radius: 50%;
    opacity: 0.7;
    animation: fall 10s linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-5%) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}