/* styles/animations.css */

/* Button Animations */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

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

@keyframes dance {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-0.5vh) rotate(-2deg);
    }

    75% {
        transform: translateY(-0.5vh) rotate(2deg);
    }
}

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

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    /* Increased intensity */
}

/* Combined Dance and Breathe for buttons */
.dance-breathe {
    animation: danceBreathe 3s ease-in-out infinite;
}

@keyframes danceBreathe {

    0%,
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
    }

    33% {
        transform: scale(1.08) translateY(-1vh) rotate(-3deg);
    }

    66% {
        transform: scale(1.05) translateY(0.2vh) rotate(3deg);
    }
}

.bounce-hover:hover {
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Flower Animations (Removed legacy CSS flower animations, using 3D bloom in flowers.css) */

.flower-wither {
    animation: withering-flower 1.5s forwards;
}

@keyframes withering-flower {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
        filter: grayscale(1);
    }
}

/* Individual Leaf Blooming */
.leaf-bloom {
    animation: blooming-leaf 1s ease-out forwards;
}

@keyframes blooming-leaf {
    0% {
        transform: scale(0) translateY(3vh) rotate(-20deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Moving animation for flowers to feel alive */
.flower-sway {
    animation: sway 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes sway {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

/* Card Transitions */
.card-enter {
    animation: cardSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-exit {
    animation: cardSlideOut 0.4s ease-in forwards;
}

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateX(3vw) rotate(5deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes cardSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }

    to {
        opacity: 0;
        transform: translateX(-3vw) rotate(-5deg);
    }
}

/* Sky Transition */
.sky-disappear {
    animation: skyDisappear 0.5s ease-in forwards;
}

.sky-appear {
    animation: skyAppear 0.5s ease-out forwards;
}

@keyframes skyDisappear {
    0% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(0.8vw);
        transform: scale(1.02);
    }
}

@keyframes skyAppear {
    0% {
        opacity: 0;
        filter: blur(0.8vw);
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

.sky-flash {
    animation: skyFlash 0.5s ease-out;
}

@keyframes skyFlash {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(2);
    }

    100% {
        filter: brightness(1);
    }
}

/* Celebration Popper / Confetti */
.confetti {
    position: absolute;
    width: 1vw;
    height: 1vw;
    top: -2vh;
    z-index: 999;
    pointer-events: none;
    animation: confetti-fall 3s ease-in-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg) translateX(var(--drift));
        opacity: 0;
    }
}

@keyframes cloud-travel {
    0% {
        transform: translate3d(-60vw, 0, 0) scale(var(--scale));
    }
    100% {
        transform: translate3d(120vw, 0, 0) scale(var(--scale));
    }
}