/* === CSS Keyframe Animations === */

/* Bounce (for buttons, icons) */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Float (ambient elements) */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}


/* Shake (for errors/warnings) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}


/* Zzz floating */
@keyframes zzzFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(30px, -60px) scale(1.2); }
}


/* Scale pop */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Glow pulse */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(106, 90, 205, 0.3); }
    50% { box-shadow: 0 0 16px rgba(106, 90, 205, 0.6); }
}


/* Utility classes */
.animate-bounce { animation: bounce 0.6s ease infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shake { animation: shake 0.3s ease; }
.animate-pop { animation: popIn 0.3s ease forwards; }
.animate-glow { animation: glowPulse 2s ease infinite; }

/* Sleep overlay */
.sleep-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0a0a1a;
    z-index: 80;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.sleep-overlay .zzz {
    font-size: 48px;
    color: #4682B4;
    animation: zzzFloat 2s ease-out forwards;
    position: absolute;
}

.sleep-overlay .sleep-text {
    font-size: 24px;
    color: rgba(255,255,255,0.7);
    margin-top: 20px;
}

/* Minigame fullscreen overlay */
.minigame-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 90;
    background: #1A1E28;
}

.minigame-overlay canvas {
    width: 100%;
    height: 100%;
}