/* Animações suaves para o aplicativo de sono */

/* Fade in suave */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Pulsação suave para elementos interativos */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* Flutuação suave (para elementos decorativos) */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-5px) rotate(1deg);
    }
    66% {
        transform: translateY(5px) rotate(-1deg);
    }
}

.float {
    animation: float 6s infinite ease-in-out;
}

/* Brilho suave */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 188, 180, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(212, 188, 180, 0.6);
    }
}

.glow {
    animation: glow 3s infinite ease-in-out;
}

/* Deslizamento suave */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Rotação suave (para loading) */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 2s infinite linear;
}

/* Efeito de respiração (para exercícios de respiração) */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.breathe {
    animation: breathe 4s infinite ease-in-out;
}

/* Ondulação suave (para efeitos de água) */
@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.ripple {
    animation: ripple 2s infinite ease-out;
}

/* Tremor suave (para feedback) */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.3s ease-in-out;
}

/* Escala suave para botões */
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.scale {
    animation: scale 0.3s ease-in-out;
}

/* Efeito de neve (para background decorativo) */
@keyframes snow {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.snowflake {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: snow linear infinite;
}

/* Efeito de estrelas cadentes */
@keyframes shootingStar {
    0% {
        transform: translateX(-100px) translateY(-100px) rotate(45deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100vh) rotate(45deg);
        opacity: 0;
    }
}

.shooting-star {
    position: absolute;
    background: linear-gradient(45deg, transparent, white, transparent);
    height: 2px;
    animation: shootingStar 2s ease-in-out infinite;
}

/* Transições suaves para todos os elementos interativos */
.btn-primary,
.btn-secondary,
.btn-icon,
.menu-card,
.audio-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efeito de loading para áudio */
@keyframes audioLoading {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

.audio-loading-bar {
    animation: audioLoading 1s infinite ease-in-out;
}

.audio-loading-bar:nth-child(2) { animation-delay: 0.1s; }
.audio-loading-bar:nth-child(3) { animation-delay: 0.2s; }
.audio-loading-bar:nth-child(4) { animation-delay: 0.3s; }
.audio-loading-bar:nth-child(5) { animation-delay: 0.4s; }

/* Efeito de fade para transições entre telas */
.screen-transition {
    animation: fadeIn 0.4s ease-out;
}

/* Efeito de overlay para modais */
@keyframes overlayFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.overlay {
    animation: overlayFade 0.3s ease-out;
}

/* Animação para notificações */
@keyframes notification {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    90% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.notification {
    animation: notification 3s ease-in-out;
}

/* Efeito de heartbeat para elementos importantes */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

.heartbeat {
    animation: heartbeat 1.3s ease-in-out;
}

/* Efeito de flutuação para nuvens */
@keyframes cloudFloat {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(10px) translateY(-5px);
    }
    50% {
        transform: translateX(0) translateY(-10px);
    }
    75% {
        transform: translateX(-10px) translateY(-5px);
    }
}

.cloud-float {
    animation: cloudFloat 8s infinite ease-in-out;
}

/* Efeito de onda para elementos aquáticos */
@keyframes wave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-2px) rotate(1deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(2px) rotate(-1deg);
    }
}

.wave {
    animation: wave 4s infinite ease-in-out;
}

/* Aplicar animações de entrada para elementos */
.menu-card,
.audio-item,
.btn-primary {
    animation: fadeIn 0.6s ease-out;
}

/* Delay para animações em sequência */
.menu-card:nth-child(1) { animation-delay: 0.1s; }
.menu-card:nth-child(2) { animation-delay: 0.2s; }
.menu-card:nth-child(3) { animation-delay: 0.3s; }
.menu-card:nth-child(4) { animation-delay: 0.4s; }

.audio-item:nth-child(1) { animation-delay: 0.1s; }
.audio-item:nth-child(2) { animation-delay: 0.2s; }
.audio-item:nth-child(3) { animation-delay: 0.3s; }
.audio-item:nth-child(4) { animation-delay: 0.4s; }