/* Animations */

/* Animated Backgrounds */

.has-animation {
	position: relative;
}

.animated-background {
	 z-index: -1;
	 width: 80vw !important;
	 max-width: unset !important;
	 position: absolute;
}

.animated-background svg {
	overflow: visible;
}

.has-animation .path {
	stroke-width: 2px;
	stroke-dasharray: 1% 2%;
	stroke-linecap: round;
	fill: none;
}

.has-animation.rotate .animated-background {
	transform: rotate(90deg);
}

/* Bee Position and Stroke Colour */

.has-animation.bee .animated-background {
	top: var(--spacer-height);
	right: 0;
}

.has-animation.bee .path {
	stroke: var(--wp--preset--color--custom-gumnut-blossom);
}

/* Bee Left Position and Stroke Colour */

.has-animation.beeLeft .animated-background {
	top: var(--spacer-height);
	left: 0;
}

.has-animation.beeLeft .path {
	stroke: var(--wp--preset--color--custom-gumnut-blossom);
}

.has-animation.beeLeft .animated-background {
    z-index: -1;
    width: 250px !important;
    max-width: unset !important;
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% - var(--half-of-wide-size) - 125px));
}

/* Bee Right Position and Stroke Colour */

.has-animation.beeRight .animated-background {
	top: var(--spacer-height);
	left: 0;
}

.has-animation.beeRight .path {
	stroke: var(--wp--preset--color--custom-gumnut-blossom);
}

.has-animation.beeRight .animated-background {
    z-index: -1;
    width: 250px !important;
    max-width: unset !important;
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + var(--half-of-wide-size) + 125px));
}

/* Butterfly Position and Stroke Colour */

.has-animation.butterfly .animated-background {
	top: calc(var(--spacer-height) * 1.5);
	left: 0;
	width: 90vw !important;
}

.has-animation.butterfly .path {
	stroke: var(--wp--preset--color--custom-ocean-blue);
}

/* Butterflyright Position and Stroke Colour */

.has-animation.butterflyRight .animated-background {
    z-index: -1;
    width: 250px !important;
    max-width: unset !important;
    position: absolute;
    left: 50%;
	top: var(--spacer-height);
    transform: translateX(calc(-50% + var(--half-of-wide-size) + 125px));
}

.has-animation.butterflyRight .path {
	stroke: var(--wp--preset--color--custom-ocean-blue);
}

/* Butterflyleft Position and Stroke Colour */

.has-animation.butterflyLeft .animated-background {
    z-index: -1;
    width: 250px !important;
    max-width: unset !important;
    position: absolute;
    left: 50%;
	top: var(--spacer-height);
    transform: translateX(calc(-50% - var(--half-of-wide-size) - 125px));
}

.has-animation.butterflyLeft .path {
	stroke: var(--wp--preset--color--custom-ocean-blue);
}

/* Bird Position and Stroke Colour */

.has-animation.bird .animated-background {
	top: var(--spacer-height);
	left: 0;
}

.has-animation.bird .path {
	stroke: var(--wp--preset--color--custom-dark-green);
}

/* Slide from top */
:root body .wp-site-blocks .animate-slide-from-top {
    position: relative;
	transform: translateY(-40px);
    opacity: 0;
}
:root body .animate-slide-from-top.animated {
    transform: translateY(0px);
    animation: slideFromTop;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
@keyframes slideFromTop {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Slide from right */
:root body .wp-site-blocks .animate-slide-from-right {
    position: relative;
	transform: translateX(40px);
    opacity: 0;
}
:root body .animate-slide-from-right.animated {
    transform: translateX(0px);
    animation: slideFromRight;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
@keyframes slideFromRight {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* Slide from bottom */
:root body .wp-site-blocks .animate-slide-from-bottom {
    position: relative;
	transform: translateY(40px);
    opacity: 0;
}
:root body .animate-slide-from-bottom.animated {
    transform: translateY(0px);
    animation: slideFromBottom;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}
@keyframes slideFromBottom {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Slide from left */
:root body .wp-site-blocks .animate-slide-from-left {
    position: relative;
	transform: translateX(-40px);
    opacity: 0;
}
:root body .animate-slide-from-left.animated {
    transform: translateX(0px);
    animation: slideFromLeft;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}
@keyframes slideFromLeft {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}