/* =========================================================
   Timeline Card Waves
   Version: 3.3
   ---------------------------------------------------------
   Animated SVG wave backgrounds with progressive water
   levels and subtle bubble accents for active timeline cards.

   Designed for GeneratePress Blocks
   Crafted by Sparky and Kernel

   Bee Media
   ========================================================= */

/* =========================================================
   Global tuning variables
   ========================================================= */

:root {
	--timeline-bubble-opacity: 0.94;
	--timeline-bubble-border: 1.5px;

	--timeline-bubble-speed-a: 10s;
	--timeline-bubble-speed-b: 10.8s;
	--timeline-bubble-speed-c: 9.6s;
	--timeline-bubble-speed-d: 11.2s;

	--timeline-bubble-stroke: rgba(255,255,255,0.98);
	--timeline-bubble-blend: screen;

	/* Negative delays keep the loop already in motion on page load */
	--timeline-bubble-delay-a: 0s;
	--timeline-bubble-delay-b: -2.5s;
	--timeline-bubble-delay-c: -5s;
	--timeline-bubble-delay-d: -7.5s;
}

/* =========================================================
   Timeline wave layers
   ========================================================= */

.gp-timeline-active,
.gp-timeline-inactive {
	position: relative;
	overflow: visible;
	isolation: isolate;
	background-repeat: no-repeat;
	background-size: 100% var(--timeline-wave-height);
	background-position: center bottom;
}

/* Content above decorative layers */
.gp-timeline-active > *,
.gp-timeline-inactive > * {
	position: relative;
	z-index: 5;
}

/* Active card uses layered wave so bubbles can sit above it */
.gp-timeline-active {
	background-image: none;
}

/* Active wave */
.gp-timeline-active::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--timeline-wave-height);
	pointer-events: none;
	z-index: 1;

	background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20262%20200%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2022%20C30%2010%2064%2010%2096%2022%20C128%2034%20160%2034%20192%2022%20C222%2011%20246%2012%20262%2019%20L262%20200%20L0%20200%20Z%27%20fill%3D%27%23dee4f4%27/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center bottom;
}

/* Inactive wave */
.gp-timeline-inactive {
	background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20262%20200%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2022%20C30%2010%2064%2010%2096%2022%20C128%2034%20160%2034%20192%2022%20C222%2011%20246%2012%20262%2019%20L262%20200%20L0%20200%20Z%27%20fill%3D%27%23e9ebef%27/%3E%3C/svg%3E");
}

/* Progressive water level */
.gbp-section__inner > :nth-child(1) {
	--timeline-wave-height: 24%;
}

.gbp-section__inner > :nth-child(2) {
	--timeline-wave-height: 38%;
}

.gbp-section__inner > :nth-child(3) {
	--timeline-wave-height: 52%;
}

.gbp-section__inner > :nth-child(4) {
	--timeline-wave-height: 66%;
}

.gbp-section__inner > :nth-child(5) {
	--timeline-wave-height: 90%;
}

/* =========================================================
   Active bubble accents
   ========================================================= */

/* Bubble base, active only */
.timeline-bubble {
	display: none;
}

.gp-timeline-active > .timeline-bubble {
	display: block;
	position: absolute;
	border: var(--timeline-bubble-border) solid var(--timeline-bubble-stroke);
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: var(--timeline-bubble-blend);
	opacity: 0;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* Bubble personalities */
.gp-timeline-active > .timeline-bubble-a {
	left: 18%;
	bottom: 2%;
	width: 10px;
	height: 10px;
	animation-name: timeline-bubble-a;
	animation-duration: var(--timeline-bubble-speed-a);
	animation-delay: var(--timeline-bubble-delay-a);
}

.gp-timeline-active > .timeline-bubble-b {
	left: 34%;
	bottom: 3%;
	width: 8px;
	height: 8px;
	animation-name: timeline-bubble-b;
	animation-duration: var(--timeline-bubble-speed-b);
	animation-delay: var(--timeline-bubble-delay-b);
}

.gp-timeline-active > .timeline-bubble-c {
	left: 61%;
	bottom: 1%;
	width: 14px;
	height: 14px;
	animation-name: timeline-bubble-c;
	animation-duration: var(--timeline-bubble-speed-c);
	animation-delay: var(--timeline-bubble-delay-c);
}

.gp-timeline-active > .timeline-bubble-d {
	left: 78%;
	bottom: 2%;
	width: 9px;
	height: 9px;
	animation-name: timeline-bubble-d;
	animation-duration: var(--timeline-bubble-speed-d);
	animation-delay: var(--timeline-bubble-delay-d);
}

/* Bubble motion scales to each card's wave height */
@keyframes timeline-bubble-a {
	0% {
		bottom: 2%;
		transform: translateX(0);
		opacity: 0;
	}

	24% {
		bottom: calc(var(--timeline-wave-height) * 0.28);
		transform: translateX(5px);
		opacity: var(--timeline-bubble-opacity);
	}

	52% {
		bottom: calc(var(--timeline-wave-height) * 0.58);
		transform: translateX(10px);
		opacity: var(--timeline-bubble-opacity);
	}

	76% {
		bottom: calc(var(--timeline-wave-height) * 0.78);
		transform: translateX(3px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.72);
	}

	100% {
		bottom: calc(var(--timeline-wave-height) - 14px);
		transform: translateX(-8px);
		opacity: 0;
	}
}

@keyframes timeline-bubble-b {
	0% {
		bottom: 3%;
		transform: translateX(0);
		opacity: 0;
	}

	24% {
		bottom: calc(var(--timeline-wave-height) * 0.3);
		transform: translateX(-4px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.92);
	}

	52% {
		bottom: calc(var(--timeline-wave-height) * 0.62);
		transform: translateX(-9px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.92);
	}

	76% {
		bottom: calc(var(--timeline-wave-height) * 0.82);
		transform: translateX(-3px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.68);
	}

	100% {
		bottom: calc(var(--timeline-wave-height) - 12px);
		transform: translateX(10px);
		opacity: 0;
	}
}

@keyframes timeline-bubble-c {
	0% {
		bottom: 1%;
		transform: translateX(0);
		opacity: 0;
	}

	24% {
		bottom: calc(var(--timeline-wave-height) * 0.24);
		transform: translateX(3px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.88);
	}

	52% {
		bottom: calc(var(--timeline-wave-height) * 0.52);
		transform: translateX(7px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.88);
	}

	76% {
		bottom: calc(var(--timeline-wave-height) * 0.74);
		transform: translateX(2px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.66);
	}

	100% {
		bottom: calc(var(--timeline-wave-height) - 18px);
		transform: translateX(6px);
		opacity: 0;
	}
}

@keyframes timeline-bubble-d {
	0% {
		bottom: 2%;
		transform: translateX(0);
		opacity: 0;
	}

	24% {
		bottom: calc(var(--timeline-wave-height) * 0.26);
		transform: translateX(-5px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.9);
	}

	52% {
		bottom: calc(var(--timeline-wave-height) * 0.56);
		transform: translateX(-11px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.9);
	}

	76% {
		bottom: calc(var(--timeline-wave-height) * 0.8);
		transform: translateX(-5px);
		opacity: calc(var(--timeline-bubble-opacity) * 0.7);
	}

	100% {
		bottom: calc(var(--timeline-wave-height) - 13px);
		transform: translateX(-6px);
		opacity: 0;
	}
}

/* =========================================================
   Active card presentation
   Adjust or expand this section as the active state evolves
   ========================================================= */

.gp-timeline-active {
	background-color: var(--base-3);
	box-shadow: 0px 0px 6px 6px var(--global-color-21), inset 0px 0px 1px 1px var(--global-color-11);
	min-height: 300px;
	position: relative;
	text-align: center;
	border: 3px solid var(--accent);
	border-radius: 3px;
	padding: 7rem 1rem 1rem 1rem;
}