/* Animations & Motion Graphics */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes float-delay {
    0% {
        transform: translateY(0px) rotate(2deg);
    }

    50% {
        transform: translateY(-15px) rotate(-2deg);
    }

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

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(217, 119, 6, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes drift-x {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes twinkle {

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

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Graphic Container Helpers */
.graphic-wrapper {
    position: relative;
    z-index: 1;
}

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

.floating-element-delayed {
    animation: float-delay 7s ease-in-out infinite;
}

.pulse-element {
    animation: pulse-glow 3s infinite;
}

.sparkle {
    position: absolute;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, var(--accent) 15%, rgba(217, 119, 6, 0.2) 60%, transparent 80%);
    border-radius: 50%;
    animation: twinkle 2s infinite;
    z-index: 10;
    pointer-events: none;
}

/* Background Shapes */
.bg-shape {
    position: absolute;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

/* ... */
/* Floating Icons */
.floating-icon {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.6;
    z-index: 0;
    filter: none;
    animation: float 5s ease-in-out infinite;
    color: var(--primary);
}

@keyframes move-horizontal {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(50px) rotate(5deg);
    }

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

@keyframes move-vertical {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-50px) rotate(-5deg);
    }

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

.anim-left-right {
    animation: move-horizontal 8s ease-in-out infinite;
}

.anim-bottom-top {
    animation: move-vertical 7s ease-in-out infinite;
}