/**
 * Styles for the UI/UX design SVG animation
 */

/* Animation initial state */
svg#freepik_stories-ui-ux-design:not(.animated) .animable {
    opacity: 0;
}

/* Animation definitions */
svg#freepik_stories-ui-ux-design.animated #freepik--Floor--inject-285 {
    animation: 0.5s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;
    animation-delay: 0s;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Plants--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp,1.5s Infinite linear wind;
    animation-delay: 0.2s,1.2s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Shadows--inject-285 {
    animation: 1s 1 forwards ease-in fadeIn;
    animation-delay: 1.02s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Gears--inject-285 {
    animation: 0.5s 1 forwards linear slideDown,3s Infinite linear floating;
    animation-delay: 1s,1.5s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--magnifying-glass--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown,1.5s Infinite linear wind;
    animation-delay: 1s,2s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Window--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;
    animation-delay: 0.2s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Colors--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp,6s Infinite linear floating;
    animation-delay: 0.8s,1.8s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--Typography--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;
    animation-delay: 0.6s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--image--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;
    animation-delay: 0.4s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--character-3--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;
    animation-delay: 1s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--character-2--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;
    animation-delay: 1s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--speech-bubble-3--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight,1.5s Infinite linear floating;
    animation-delay: 1.4s,2.4s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--character-1--inject-285 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 1s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--speech-bubble-2--inject-285 {
    animation: 1.5s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp,1.5s Infinite linear floating;
    animation-delay: 1.5s,3s;
    opacity: 0;
}

svg#freepik_stories-ui-ux-design.animated #freepik--speech-bubble-1--inject-285 {
    animation: 1.5s 1 forwards ease-in slideDown,3s Infinite linear floating;
    animation-delay: 1.6s,3.1s;
    opacity: 0;
}

/* Keyframe Animations */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: inherit;
    }
}

@keyframes wind {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1deg);
    }
    75% {
        transform: rotate(-1deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}