/* public/assets/css/animations.css */

/* --- 1. Animation för Footern --- */
.footer {
    position: relative; /* Nödvändigt för att positionera ikonerna */
    overflow: hidden; /* Förhindrar att ikoner syns utanför footern */
}

.footer-nature {
    position: absolute;
    bottom: -50px; /* Startar utanför skärmen */
    font-size: 2rem;
    opacity: 0;
    animation: fly-up 10s infinite linear;
    pointer-events: none; /* Ser till att de inte är klickbara */
    z-index: 0;
}

/* Skapar variation i animationen med olika fördröjningar och positioner */
.footer-nature:nth-child(1) { left: 10%; animation-delay: 0s; font-size: 1.5rem; }
.footer-nature:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 12s; }
.footer-nature:nth-child(3) { left: 30%; animation-delay: 4s; font-size: 1.8rem; }
.footer-nature:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 9s; }
.footer-nature:nth-child(5) { left: 50%; animation-delay: 6s; font-size: 1.2rem; }
.footer-nature:nth-child(6) { left: 60%; animation-delay: 3s; }
.footer-nature:nth-child(7) { left: 70%; animation-delay: 8s; font-size: 1.6rem; animation-duration: 11s; }
.footer-nature:nth-child(8) { left: 80%; animation-delay: 5s; }
.footer-nature:nth-child(9) { left: 90%; animation-delay: 7s; font-size: 1.4rem; }
.footer-nature:nth-child(10) { left: 5%; animation-delay: 9s; animation-duration: 13s; }


@keyframes fly-up {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-200px) translateX(20px) rotate(15deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-400px) translateX(-20px) rotate(-10deg);
        opacity: 0;
    }
}

/* --- 2. Animation för Fjäril i Header --- */
.brand-butterfly {
    display: inline-block; /* Gör det möjligt att transformera */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#siteHeader.scrolled .brand-butterfly {
    animation: flutter 0.8s ease-in-out infinite alternate;
}

@keyframes flutter {
    0% {
        transform: rotate(-10deg) scale(1.1);
    }
    100% {
        transform: rotate(20deg) scale(1.1);
    }
}

/* --- 3. Animation för "Flyg till Varukorg" --- */
.fly-to-cart {
    position: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 1100; /* Ska vara över allt annat */
    transition: all 1s cubic-bezier(0.5, -0.5, 1, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}