/* Animation styles */

/* Title pulse animation */
@keyframes pulse {
    0% { text-shadow: 0 0 20px rgba(253, 200, 64, 0.7); }
    50% { text-shadow: 0 0 30px rgba(214, 41, 65, 0.9); }
    100% { text-shadow: 0 0 20px rgba(253, 200, 64, 0.7); }
}

#title {
    animation: pulse 3s infinite;
}

/* Wind flow animation */
@keyframes windFlow {
    from { background-position: 0 0; }
    to { background-position: 800px 0; }
}

.wind-effect {
    animation: windFlow 30s linear infinite;
}

/* Hand waving animation */
@keyframes handWave {
    0% { transform: rotate(15deg); }
    25% { transform: rotate(20deg); }
    50% { transform: rotate(15deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(15deg); }
}

.hand-element {
    animation: handWave 5s ease-in-out infinite;
}

/* Sunset color shift */
@keyframes colorShift {
    0% { opacity: 0.3; }
    50% { opacity: 0.5; }
    100% { opacity: 0.3; }
}

.sunset-overlay {
    animation: colorShift 8s infinite;
}

/* Credits screen animation */
@keyframes creditsAppear {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#creditsScreen.visible .credits-content {
    animation: creditsAppear 0.5s ease-out forwards;
}

/* Credits section titles glow */
@keyframes creditsGlow {
    0% { text-shadow: 0 0 10px rgba(253, 200, 64, 0.5); }
    50% { text-shadow: 0 0 20px rgba(253, 200, 64, 0.8), 0 0 30px rgba(214, 41, 65, 0.4); }
    100% { text-shadow: 0 0 10px rgba(253, 200, 64, 0.5); }
}

.credits-section h3 {
    animation: creditsGlow 4s infinite alternate;
}

/* Credits particles float */
@keyframes creditsParticleFloat {
    0% { opacity: 0; transform: translateY(20px) scale(0.8); }
    20% { opacity: 0.8; }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-20px) scale(1.2); }
}

/* Transitions for UI elements */
.memory-tafel {
    transition: opacity 0.2s, transform 0.2s;
}

#memoryImage {
    transition: opacity 1s, transform 1s;
}

#lyrics {
    transition: opacity 0.5s;
}

#message {
    transition: opacity 0.5s;
}

/* Button hover animations */
#startButton, #creditsButton, #restartButton, #resumeButton, #restartFromPauseButton, #backButton {
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Start button shine effect */
#startButton:after, #creditsButton:after {
    transition: transform 0.5s;
}

/* Progress bar smooth transition */
#progressBar {
    transition: width 0.3s;
    background: linear-gradient(90deg, #D62941, #631D76);
}

/* Floating word animations */
.floating-word {
    transition: opacity 0.5s, transform 0.5s;
}

/* Particle animations */
@keyframes particleFade {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
}

.particle {
    animation: particleFade 2s forwards;
}

/* Credits screen transition */
#creditsScreen {
    transition: opacity 0.5s ease;
}

/* Credits image hover effect */
.credits-cover img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Credits close button animation */
.credits-close {
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Credits section animation on appear */
@keyframes sectionAppear {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.credits-section {
    animation: sectionAppear 0.5s ease-out forwards;
}

.credits-section:nth-child(2) {
    animation-delay: 0.2s;
}

/* Back button animation */
#backButton {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}