/* ==========================================================================
   Metro Page Builder - motion.css

   Entrance and attention animations (Motion.php) and animated backgrounds
   (Backdrop.php). Loaded only on pages that use one of them.

   THE PAGE IS CORRECT WITHOUT THIS FILE AND WITHOUT motion.js.
   Nothing here hides content on its own. `.mpb-mo-armed` is added by
   motion.js, and only to an element it is about to play. Hover movement and
   hover background fills are in site.css with the rest of the hover
   vocabulary.

   The motions of the entrance and attention animations follow Animate.css
   (https://animate.style), renamed into Metro's namespace:

     Animate.css - Copyright (c) 2020 Daniel Eden
     Permission is hereby granted, free of charge, to any person obtaining a
     copy of this software and associated documentation files (the
     "Software"), to deal in the Software without restriction, including
     without limitation the rights to use, copy, modify, merge, publish,
     distribute, sublicense, and/or sell copies of the Software, and to permit
     persons to whom the Software is furnished to do so, subject to the
     following conditions: The above copyright notice and this permission
     notice shall be included in all copies or substantial portions of the
     Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
   ========================================================================== */

/* ---- playing ------------------------------------------------------------- */

.mpb-mo-armed { opacity: 0; }

.mpb-mo-play {
	animation-name: var(--mpb-mo-name);
	animation-duration: var(--mpb-mo-dur, 1s);
	animation-delay: calc(var(--mpb-mo-delay, 0ms) + var(--mpb-mo-i, 0) * var(--mpb-mo-stagger, 0ms));
	animation-iteration-count: var(--mpb-mo-count, 1);
	animation-fill-mode: both;
}

.mpb-mo--eased.mpb-mo-play,
.mpb-mo--eased .mpb-mo-play { animation-timing-function: var(--mpb-mo-ease); }

/* A loop off screen is battery spent on nothing; motion.js marks it. */
.mpb-mo-play.mpb-mo-paused { animation-play-state: paused; }

/* Flips need their back face while they turn. */
[data-mpb-mo^="flip"] .mpb-mo-play,
[data-mpb-mo^="flip"].mpb-mo-play { -webkit-backface-visibility: visible; backface-visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.mpb-mo-armed { opacity: 1; }
	.mpb-mo-play { animation: none; }
}

@media print {
	.mpb-mo-armed { opacity: 1; }
	.mpb-mo-play { animation: none; }
}

/* ---- attention seekers ------------------------------------------------------ */

@keyframes mpb-a-bounce {
	from, 20%, 53%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translate3d(0, 0, 0); transform-origin: center bottom; }
	40%, 43% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -30px, 0) scaleY(1.1); }
	70% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -15px, 0) scaleY(1.05); }
	80% { transform: translate3d(0, 0, 0) scaleY(.95); }
	90% { transform: translate3d(0, -4px, 0) scaleY(1.02); }
}

@keyframes mpb-a-flash {
	from, 50%, to { opacity: 1; }
	25%, 75% { opacity: 0; }
}

@keyframes mpb-a-pulse {
	from { transform: scale3d(1, 1, 1); animation-timing-function: ease-in-out; }
	50% { transform: scale3d(1.05, 1.05, 1.05); animation-timing-function: ease-in-out; }
	to { transform: scale3d(1, 1, 1); }
}

@keyframes mpb-a-rubber-band {
	from { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, .75, 1); }
	40% { transform: scale3d(.75, 1.25, 1); }
	50% { transform: scale3d(1.15, .85, 1); }
	65% { transform: scale3d(.95, 1.05, 1); }
	75% { transform: scale3d(1.05, .95, 1); }
	to { transform: scale3d(1, 1, 1); }
}

@keyframes mpb-a-shake-x {
	from, to { transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

@keyframes mpb-a-shake-y {
	from, to { transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}

@keyframes mpb-a-head-shake {
	0% { transform: translateX(0); animation-timing-function: ease-in-out; }
	6.5% { transform: translateX(-6px) rotateY(-9deg); }
	18.5% { transform: translateX(5px) rotateY(7deg); }
	31.5% { transform: translateX(-3px) rotateY(-5deg); }
	43.5% { transform: translateX(2px) rotateY(3deg); }
	50% { transform: translateX(0); }
}

@keyframes mpb-a-swing {
	from { transform-origin: top center; }
	20% { transform: rotate3d(0, 0, 1, 15deg); transform-origin: top center; }
	40% { transform: rotate3d(0, 0, 1, -10deg); transform-origin: top center; }
	60% { transform: rotate3d(0, 0, 1, 5deg); transform-origin: top center; }
	80% { transform: rotate3d(0, 0, 1, -5deg); transform-origin: top center; }
	to { transform: rotate3d(0, 0, 1, 0deg); transform-origin: top center; }
}

@keyframes mpb-a-tada {
	from { transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	to { transform: scale3d(1, 1, 1); }
}

@keyframes mpb-a-wobble {
	from { transform: translate3d(0, 0, 0); }
	15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
	30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
	45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
	60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
	75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes mpb-a-jello {
	from, 11.1%, to { transform: translate3d(0, 0, 0); }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
	77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
	88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}

@keyframes mpb-a-heart-beat {
	0% { transform: scale(1); animation-timing-function: ease-in-out; }
	14% { transform: scale(1.3); animation-timing-function: ease-in-out; }
	28% { transform: scale(1); animation-timing-function: ease-in-out; }
	42% { transform: scale(1.3); animation-timing-function: ease-in-out; }
	70% { transform: scale(1); }
}

@keyframes mpb-a-flip {
	from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
	40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
	50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
	80% { transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
	to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
}

/* ---- entrances: every one ends fully visible -------------------------------- */

@keyframes mpb-a-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpb-a-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-down { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-up-big { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-down-big { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-left-big { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-right-big { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-top-left { from { opacity: 0; transform: translate3d(-100%, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-top-right { from { opacity: 0; transform: translate3d(100%, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-bottom-left { from { opacity: 0; transform: translate3d(-100%, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-fade-in-bottom-right { from { opacity: 0; transform: translate3d(100%, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes mpb-a-back-in-up {
	0% { transform: translateY(1200px) scale(.7); opacity: .7; }
	80% { transform: translateY(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mpb-a-back-in-down {
	0% { transform: translateY(-1200px) scale(.7); opacity: .7; }
	80% { transform: translateY(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mpb-a-back-in-left {
	0% { transform: translateX(-2000px) scale(.7); opacity: .7; }
	80% { transform: translateX(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mpb-a-back-in-right {
	0% { transform: translateX(2000px) scale(.7); opacity: .7; }
	80% { transform: translateX(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes mpb-a-bounce-in {
	from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: scale3d(.3, .3, .3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(.9, .9, .9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(.97, .97, .97); }
	to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes mpb-a-bounce-in-up {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	from { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
	60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
	75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
	90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mpb-a-bounce-in-down {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
	60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
	75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
	90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mpb-a-bounce-in-left {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
	60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
	75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
	90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mpb-a-bounce-in-right {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	from { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
	60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
	75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
	90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mpb-a-zoom-in {
	from { opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1; }
	to { opacity: 1; }
}
@keyframes mpb-a-zoom-in-up {
	from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
	to { opacity: 1; }
}
@keyframes mpb-a-zoom-in-down {
	from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
	to { opacity: 1; }
}
@keyframes mpb-a-zoom-in-left {
	from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
	to { opacity: 1; }
}
@keyframes mpb-a-zoom-in-right {
	from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
	to { opacity: 1; }
}

@keyframes mpb-a-slide-in-up { from { opacity: 1; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-slide-in-down { from { opacity: 1; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-slide-in-left { from { opacity: 1; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mpb-a-slide-in-right { from { opacity: 1; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes mpb-a-flip-in-x {
	from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	to { transform: perspective(400px); opacity: 1; }
}
@keyframes mpb-a-flip-in-y {
	from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
	to { transform: perspective(400px); opacity: 1; }
}

@keyframes mpb-a-rotate-in {
	from { transform: rotate3d(0, 0, 1, -200deg); opacity: 0; transform-origin: center; }
	to { transform: translate3d(0, 0, 0); opacity: 1; transform-origin: center; }
}
@keyframes mpb-a-rotate-in-down-left {
	from { transform: rotate3d(0, 0, 1, -45deg); opacity: 0; transform-origin: left bottom; }
	to { transform: translate3d(0, 0, 0); opacity: 1; transform-origin: left bottom; }
}
@keyframes mpb-a-rotate-in-down-right {
	from { transform: rotate3d(0, 0, 1, 45deg); opacity: 0; transform-origin: right bottom; }
	to { transform: translate3d(0, 0, 0); opacity: 1; transform-origin: right bottom; }
}
@keyframes mpb-a-rotate-in-up-left {
	from { transform: rotate3d(0, 0, 1, 45deg); opacity: 0; transform-origin: left bottom; }
	to { transform: translate3d(0, 0, 0); opacity: 1; transform-origin: left bottom; }
}
@keyframes mpb-a-rotate-in-up-right {
	from { transform: rotate3d(0, 0, 1, -90deg); opacity: 0; transform-origin: right bottom; }
	to { transform: translate3d(0, 0, 0); opacity: 1; transform-origin: right bottom; }
}

@keyframes mpb-a-light-speed-in-right {
	from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; animation-timing-function: ease-out; }
	60% { transform: skewX(20deg); opacity: 1; }
	80% { transform: skewX(-5deg); }
	to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes mpb-a-light-speed-in-left {
	from { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; animation-timing-function: ease-out; }
	60% { transform: skewX(-20deg); opacity: 1; }
	80% { transform: skewX(5deg); }
	to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes mpb-a-roll-in {
	from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mpb-a-jack-in-the-box {
	from { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; }
	50% { transform: rotate(-10deg); }
	70% { transform: rotate(3deg); }
	to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Animated backgrounds (.mpb-bga--*), drawn in the node's decorative layer.
   The layer itself (.mpb-lyr) and hover fills are in site.css.

   --mpb-bga-c1 / -c2   colours          --mpb-bga-o  strength (0-1)
   --mpb-bga-s          speed factor     --mpb-bga-z  size factor
   ========================================================================== */

.mpb-bga > .mpb-lyr { container-type: size; }

.mpb-bga > .mpb-lyr > i {
	opacity: var(--mpb-bga-o, .35);
	animation-duration: calc(var(--mpb-bga-d, 12s) * var(--mpb-bga-s, 1));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.mpb-bga--on-hover > .mpb-lyr > i { animation-play-state: paused; }
.mpb-bga--on-hover:is(:hover, :focus-within) > .mpb-lyr > i { animation-play-state: running; }
.mpb-lyr.mpb-is-offscreen > i { animation-play-state: paused !important; }

/* Waves: three layers of one tiling wave, drifting at different speeds. */
.mpb-bga--waves > .mpb-lyr > i,
.mpb-bga--waves-top > .mpb-lyr > i {
	--mpb-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 0 300 60T600 60T900 60T1200 60V120H0Z'/%3E%3C/svg%3E");
	left: 0;
	bottom: 0;
	width: 200%;
	height: calc(110px * var(--mpb-bga-z, 1));
	background: var(--mpb-bga-c1, #0d6efd);
	-webkit-mask: var(--mpb-wave) repeat-x 0 100% / 50% 100%;
	mask: var(--mpb-wave) repeat-x 0 100% / 50% 100%;
	animation-name: mpbBgaWave;
	--mpb-bga-d: 16s;
}
.mpb-bga--waves > .mpb-lyr > i:nth-child(2),
.mpb-bga--waves-top > .mpb-lyr > i:nth-child(2) {
	height: calc(80px * var(--mpb-bga-z, 1));
	background: var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd));
	animation-direction: reverse;
	--mpb-bga-d: 23s;
}
.mpb-bga--waves > .mpb-lyr > i:nth-child(3),
.mpb-bga--waves-top > .mpb-lyr > i:nth-child(3) {
	height: calc(52px * var(--mpb-bga-z, 1));
	animation-delay: -4s;
	--mpb-bga-d: 11s;
}
.mpb-bga--waves-top > .mpb-lyr > i { top: 0; bottom: auto; scale: 1 -1; }

@keyframes mpbBgaWave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Water: blurred light pooling and drifting, as on the floor of a pool. */
.mpb-bga--water > .mpb-lyr > i {
	inset: -50%;
	background-image:
		radial-gradient(circle at 20% 30%, var(--mpb-bga-c1, #0d6efd) 0 7%, transparent 9%),
		radial-gradient(circle at 70% 60%, var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)) 0 5%, transparent 7%),
		radial-gradient(circle at 45% 85%, var(--mpb-bga-c1, #0d6efd) 0 6%, transparent 8%);
	background-size: calc(220px * var(--mpb-bga-z, 1)) calc(220px * var(--mpb-bga-z, 1));
	filter: blur(12px);
	animation-name: mpbBgaWater;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	--mpb-bga-d: 14s;
}
.mpb-bga--water > .mpb-lyr > i:nth-child(2) {
	background-size: calc(300px * var(--mpb-bga-z, 1)) calc(300px * var(--mpb-bga-z, 1));
	animation-direction: alternate-reverse;
	--mpb-bga-d: 19s;
}

@keyframes mpbBgaWater { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-12%, -8%) rotate(8deg); } }

/* Ripples: rings spreading from the middle, one after another. */
.mpb-bga--ripples > .mpb-lyr > i {
	left: 50%;
	top: 50%;
	width: calc(180px * var(--mpb-bga-z, 1));
	height: calc(180px * var(--mpb-bga-z, 1));
	margin: calc(-90px * var(--mpb-bga-z, 1)) 0 0 calc(-90px * var(--mpb-bga-z, 1));
	border: 2px solid var(--mpb-bga-c1, #0d6efd);
	border-radius: 50%;
	animation-name: mpbBgaRipple;
	animation-timing-function: ease-out;
	--mpb-bga-d: 5s;
}
.mpb-bga--ripples > .mpb-lyr > i:nth-child(2) { animation-delay: calc(-1.66s * var(--mpb-bga-s, 1)); border-color: var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)); }
.mpb-bga--ripples > .mpb-lyr > i:nth-child(3) { animation-delay: calc(-3.33s * var(--mpb-bga-s, 1)); }

@keyframes mpbBgaRipple {
	from { transform: scale(.2); opacity: var(--mpb-bga-o, .35); }
	to { transform: scale(5); opacity: 0; }
}

/* Flowing gradient: the two colours slide past each other. */
.mpb-bga--gradient > .mpb-lyr > i {
	top: 0;
	bottom: 0;
	left: 0;
	width: 300%;
	background: linear-gradient(110deg, var(--mpb-bga-c1, #0d6efd), var(--mpb-bga-c2, #6f42c1), var(--mpb-bga-c1, #0d6efd), var(--mpb-bga-c2, #6f42c1));
	animation-name: mpbBgaFlow;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	--mpb-bga-d: 14s;
}

@keyframes mpbBgaFlow { from { transform: translateX(0); } to { transform: translateX(-66.666%); } }

/* Aurora: large soft clouds of colour drifting slowly. */
.mpb-bga--aurora > .mpb-lyr > i {
	width: calc(60% * var(--mpb-bga-z, 1));
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mpb-bga-c1, #0d6efd) 0, transparent 68%);
	animation-name: mpbBgaDriftA;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	--mpb-bga-d: 17s;
}
.mpb-bga--aurora > .mpb-lyr > i:nth-child(1) { left: -10%; top: -30%; }
.mpb-bga--aurora > .mpb-lyr > i:nth-child(2) {
	right: -15%;
	top: 10%;
	background: radial-gradient(circle, var(--mpb-bga-c2, #20c997) 0, transparent 68%);
	animation-name: mpbBgaDriftB;
	--mpb-bga-d: 23s;
}
.mpb-bga--aurora > .mpb-lyr > i:nth-child(3) { left: 25%; bottom: -45%; animation-direction: alternate-reverse; --mpb-bga-d: 20s; }

@keyframes mpbBgaDriftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(35%, 25%) scale(1.25); } }
@keyframes mpbBgaDriftB { from { transform: translate(0, 0) scale(1.15); } to { transform: translate(-40%, 15%) scale(.9); } }

/* Bubbles: rising from below at different sizes and speeds. */
.mpb-bga--bubbles > .mpb-lyr > i {
	bottom: calc(-40px * var(--mpb-bga-z, 1));
	width: calc(18px * var(--mpb-bga-z, 1));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mpb-bga-c1, #0d6efd);
	animation-name: mpbBgaRise;
	animation-timing-function: ease-in;
	--mpb-bga-d: 11s;
}
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(1)  { left: 4%;  animation-delay: -1s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(2)  { left: 14%; width: calc(30px * var(--mpb-bga-z, 1)); animation-delay: -6s; --mpb-bga-d: 15s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(3)  { left: 23%; width: calc(10px * var(--mpb-bga-z, 1)); animation-delay: -3s; --mpb-bga-d: 9s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(4)  { left: 34%; animation-delay: -9s; background: var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)); }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(5)  { left: 45%; width: calc(24px * var(--mpb-bga-z, 1)); animation-delay: -12s; --mpb-bga-d: 14s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(6)  { left: 55%; width: calc(12px * var(--mpb-bga-z, 1)); animation-delay: -5s; --mpb-bga-d: 10s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(7)  { left: 66%; width: calc(34px * var(--mpb-bga-z, 1)); animation-delay: -2s; --mpb-bga-d: 17s; background: var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)); }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(8)  { left: 76%; animation-delay: -8s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(9)  { left: 86%; width: calc(14px * var(--mpb-bga-z, 1)); animation-delay: -4s; --mpb-bga-d: 9s; }
.mpb-bga--bubbles > .mpb-lyr > i:nth-child(10) { left: 94%; width: calc(22px * var(--mpb-bga-z, 1)); animation-delay: -10s; --mpb-bga-d: 13s; }

@keyframes mpbBgaRise {
	0% { transform: translate(0, 0); opacity: 0; }
	15% { opacity: var(--mpb-bga-o, .35); }
	50% { transform: translate(14px, -60vh); transform: translate(14px, -60cqh); }
	85% { opacity: var(--mpb-bga-o, .35); }
	100% { transform: translate(-8px, -125vh); transform: translate(-8px, -125cqh); opacity: 0; }
}

/* Sparkles: points of light fading in and out. */
.mpb-bga--sparkles > .mpb-lyr > i {
	width: calc(5px * var(--mpb-bga-z, 1));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mpb-bga-c1, #0d6efd);
	box-shadow: 0 0 calc(10px * var(--mpb-bga-z, 1)) var(--mpb-bga-c1, #0d6efd);
	animation-name: mpbBgaTwinkle;
	animation-timing-function: ease-in-out;
	--mpb-bga-d: 3s;
}
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(even) { background: var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)); box-shadow: 0 0 calc(10px * var(--mpb-bga-z, 1)) var(--mpb-bga-c2, var(--mpb-bga-c1, #0d6efd)); }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(1)  { left: 8%;  top: 18%; animation-delay: -.4s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(2)  { left: 21%; top: 64%; animation-delay: -1.9s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(3)  { left: 33%; top: 30%; animation-delay: -1.1s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(4)  { left: 44%; top: 80%; animation-delay: -2.6s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(5)  { left: 52%; top: 12%; animation-delay: -.8s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(6)  { left: 61%; top: 46%; animation-delay: -2.2s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(7)  { left: 72%; top: 72%; animation-delay: -1.5s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(8)  { left: 83%; top: 24%; animation-delay: -.2s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(9)  { left: 91%; top: 58%; animation-delay: -2.9s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(10) { left: 14%; top: 88%; animation-delay: -1.3s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(11) { left: 38%; top: 52%; animation-delay: -2.4s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(12) { left: 66%; top: 8%;  animation-delay: -.6s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(13) { left: 78%; top: 90%; animation-delay: -1.7s; }
.mpb-bga--sparkles > .mpb-lyr > i:nth-child(14) { left: 96%; top: 36%; animation-delay: -2s; }

@keyframes mpbBgaTwinkle {
	0%, 100% { transform: scale(.3); opacity: 0; }
	50% { transform: scale(1.2); opacity: var(--mpb-bga-o, .35); }
}

/* Stripes: diagonal bands sliding by exactly one period, so the loop is seamless. */
.mpb-bga--stripes > .mpb-lyr > i {
	top: 0;
	bottom: 0;
	left: calc(-60px * var(--mpb-bga-z, 1));
	right: 0;
	background: repeating-linear-gradient(45deg, var(--mpb-bga-c1, #0d6efd) 0 calc(14px * var(--mpb-bga-z, 1)), transparent 0 calc(28px * var(--mpb-bga-z, 1)));
	animation-name: mpbBgaStripes;
	--mpb-bga-d: 1.6s;
}

@keyframes mpbBgaStripes { from { transform: translateX(0); } to { transform: translateX(calc(39.598px * var(--mpb-bga-z, 1))); } }

/* Glow: a soft light in the middle, breathing. */
.mpb-bga--glow > .mpb-lyr > i {
	left: 50%;
	top: 50%;
	width: calc(70% * var(--mpb-bga-z, 1));
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mpb-bga-c1, #0d6efd) 0, var(--mpb-bga-c2, transparent) 35%, transparent 68%);
	animation-name: mpbBgaBreathe;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	--mpb-bga-d: 5s;
}

@keyframes mpbBgaBreathe { from { transform: scale(.8); } to { transform: scale(1.2); } }

/* Liquid blob: one shape slowly changing its outline and turning. */
.mpb-bga--blob > .mpb-lyr > i {
	left: 50%;
	top: 50%;
	width: calc(42% * var(--mpb-bga-z, 1));
	aspect-ratio: 1;
	margin: calc(-21% * var(--mpb-bga-z, 1)) 0 0 calc(-21% * var(--mpb-bga-z, 1));
	background: linear-gradient(135deg, var(--mpb-bga-c1, #0d6efd), var(--mpb-bga-c2, #6f42c1));
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation-name: mpbBgaBlob;
	animation-timing-function: ease-in-out;
	--mpb-bga-d: 16s;
}

@keyframes mpbBgaBlob {
	0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0deg); }
	33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: rotate(120deg); }
	66% { border-radius: 28% 72% 44% 56% / 49% 40% 60% 51%; transform: rotate(240deg); }
}

/* Grid: lines drifting diagonally by exactly one cell. */
.mpb-bga--grid > .mpb-lyr > i {
	inset: calc(-80px * var(--mpb-bga-z, 1));
	background-image:
		linear-gradient(var(--mpb-bga-c1, #0d6efd) 1px, transparent 1px),
		linear-gradient(90deg, var(--mpb-bga-c1, #0d6efd) 1px, transparent 1px);
	background-size: calc(40px * var(--mpb-bga-z, 1)) calc(40px * var(--mpb-bga-z, 1));
	animation-name: mpbBgaGrid;
	--mpb-bga-d: 4s;
}

@keyframes mpbBgaGrid { from { transform: translate(0, 0); } to { transform: translate(calc(40px * var(--mpb-bga-z, 1)), calc(40px * var(--mpb-bga-z, 1))); } }

@media (prefers-reduced-motion: reduce) {
	.mpb-bga > .mpb-lyr > i { animation: none !important; }
}