@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.strawberry-spin {
    animation: spin 2s linear infinite;
    display: inline-block;
}

.progress-bar {
    animation: progress 3.5s ease-out forwards;
}

.sparkle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.sparkle-container::before,
.sparkle-container::after {
    content: '✨';
    position: absolute;
    font-size: 2rem;
    animation: float 3s ease-in-out infinite;
    opacity: 0.6;
}

.sparkle-container::before {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
}

.sparkle-container::after {
    right: 15%;
    top: 60%;
    animation-delay: 1.5s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

* {
    box-sizing: border-box;
}