/* Screen Transitions */
.screen.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.screen.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

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

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

/* Pulse Animation for Start Node */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 0.3; }
}

.pulse-ring {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Button Press */
@keyframes btnPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.93); }
    100% { transform: scale(1); }
}

/* Victory Stars */
@keyframes starPop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.star.animate {
    animation: starPop 0.4s ease forwards;
}

.star:nth-child(1).animate { animation-delay: 0.1s; }
.star:nth-child(2).animate { animation-delay: 0.3s; }
.star:nth-child(3).animate { animation-delay: 0.5s; }

/* Modal Appear */
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

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

.modal-content.show {
    animation: modalIn 0.3s ease forwards;
}

.modal-content.hide {
    animation: modalOut 0.2s ease forwards;
}

/* Overlay Fade */
@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay {
    animation: overlayIn 0.3s ease forwards;
}

/* Level Card Hover */
.level-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Shake for Error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.4s ease;
}

/* Loading Shimmer */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* Confetti */
@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.6); }
}