:root {
	--design-sticky-bg-color:  rgb(34, 136, 150);
	--design-sticky-font-color: rgb(245,245,245);
	--card-height: 500px;
	--progress-bar: 100%;
}
/******************
* Fade in IO animation
*******************/
.outer-group:not(.unanimated), #featured-group .wp-block-column, .fadeIn {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1s ease-in, transform 1s ease-in;
}
.outer-group:not(.unanimated).show, #featured-group .wp-block-column.show, .fadeIn.show {
	opacity: 1;
	transform: translateY(0px);
}
/******************
* Text filling with water 
*******************/
#hero-group:not(.sub-page) h2 {
	font-size:  60px;
	color:  black;
	position: relative;
}
#hero-group:not(.sub-page) h2::after {
	content: 'Get a website that flows';
	font-size: 60px;
	font-family: 'lato';
	font-weight: 700;
	color: black;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-image:  url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/water.png');
	background-clip: text !important;
	background-size: 600px 100px;
	background-position: top;
	background-repeat: repeat-x;
	animation:  flow 30s linear;
}
@media(max-width: 1023px) {
	#hero-group:not(.sub-page) h2, #hero-group:not(.sub-page) h2::after {
		font-size:  36px;
	}
}
@keyframes flow {
	0% {
		background-position: 0px 60px;
		color: transparent;
	}
	33% {
		background-position: 3600px 40px;
	}
	66% {
		background-position: 7200px 20px;
	}
	97% {
		background-position: 10764px 4px;
		color: transparent;
	}
	100% {
		background-position: 10800px 0px;
		color: var(--contrast);
	}
}
/******************
* Hero phone mockup moving on hover
*******************/
#hero-group .mockup-col figure {
  position: absolute;
  top: -10px;
  filter: drop-shadow(50px 10px 10px rgba(0, 0, 0, 0.3));
  transition: all 0.5s linear;
}
@media(max-width:  782px) {
	#hero-group .mockup-col figure {
		position: relative;
	}
}
@media(min-width: 782px) {
	#hero-group .mockup-col figure:hover {
		transform: translateY(-10px);
	}
}
/******************
* Home page services group water background glistening
*******************/
#third-group {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/creek-blue-water-fall.png') no-repeat bottom / 90% 100%;
	min-height: 100vh;
	margin-bottom: -55px;
	position: relative;
	z-index: 2;
}
#third-group::before {
	content: "";
	background: linear-gradient(0deg,  rgba(245,245,245,0.9) 0%, 
										rgba(245,245,245,0.8) 40%, 
										rgba(245,245,245,0.3) 50%, 
										rgba(245,245,245,0.8) 60%, 
										rgba(245,245,245,0.9) 100%) no-repeat bottom / 90% 200%;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	animation: waterGlisten 3.5s ease-out forwards;
}
@keyframes waterGlisten {
	0% {
			background-position: bottom;
	}
	100% {
			background-position: top;
	}
}
/******************
* Services background color glisten
*******************/
#third-group .service-col, .wordpress-cols .wp-block-column:nth-child(2) {
	padding:  2rem;
	box-shadow:  -4px 4px 4px rgba(0,0,0,0.33);
	border-radius:  10px;
	background:	linear-gradient(55deg, rgba(var(--green-rgb), 0.85), rgba(var(--green-rgb), 0.65), rgba(var(--green-rgb), 0.85), rgba(var(--green-rgb), 0.65)),
				linear-gradient(0deg, white, white);
	background-size: 200%, 200%;
	background-position: bottom left;
	transition: background 0.25s linear, opacity 1s ease-in, transform 1s ease-in;
}
.wordpress-cols .wp-block-column:nth-child(2) {
	background: linear-gradient(55deg, rgba(var(--blue-rgb), 0.85), rgba(var(--blue-rgb), 0.65), rgba(var(--blue-rgb), 0.85), rgba(var(--blue-rgb), 0.65)),
				linear-gradient(0deg, white, white);
	background-position: bottom left;
	background-size: 200% 200%;
	padding: 5rem 3rem !important;
	display: inline-flex;
	align-items: center;
}
#third-group .service-col:hover, .wordpress-cols .wp-block-column:nth-child(2):hover {
	background-position: top right;
}
/******************
* Waves in review foreground
*******************/
#reviews-group::after {
	content: "";
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/triple-wave.png');
	background-repeat: repeat-x;
	background-position: 0% calc(100% - 50px);
  background-size: 1200px 30%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: flowSimple 10s linear infinite;
}
@keyframes flowSimple {
	0% {
		background-position: 0px 100%;
	}
	100% {
		background-position: 2400px 100%;
	}
}
/******************
* Bobbing review columns
*******************/
@media(max-width: 782px) {
	#reviews-group .wp-block-columns {
		animation: mobileReviewAnimation 45s ease-in-out 4s infinite alternate;
	}
}
#reviews-group .review-col {
	padding: 2rem 2rem 10rem;
	border-radius:  10px;
	border: 1px solid white;
	background: white;
	box-shadow: -4px 4px 4px rgba(0,0,0,0.33);
	transform: translateY(0px);
	animation: bob 6s linear infinite;
}
#reviews-group .review-col:hover {
	border-color: var(--blue-rgb);
}
#reviews-group .review-col:nth-child(2) {
	animation: bob 6s linear infinite 2s;
}
#reviews-group .review-col:nth-child(3) {
	animation: bob 6s linear infinite 4s;
}
@keyframes bob {	
	0% {
		transform: translateY(0px);
	}
	25% {
		transform: translateY(-25px);
	}
	50% {
		transform: translateY(-50px);
	}
	75% {
		transform: translateY(-25px);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes mobileReviewAnimation {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(calc(-100% - 2rem));
	}
	100% {
		transform: translateX(calc(-200% - 4rem));
	}
}
/******************
* SEO card background updating effect
*******************/
.ppc-cols .wp-block-column, .responsive-little-cols .wp-block-column, .seo-service-row .wp-block-group {
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	text-align: center;
	transition: all 1s ease;
}
.ppc-cols .wp-block-column:hover, .responsive-little-cols .wp-block-column:hover, .seo-service-row .wp-block-group:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.75);
	background: rgba(var(--green-rgb), 0.3);
}
/******************
* Add drop shadow to vector art
*******************/
.animated-dropshadow {
	transition: all 0.25s linear;
}
.animated-dropshadow:hover {
	filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.65));
}
/******************
* Design and Dev. Page background color animation (see custom_js.js as well)
*******************/
#design-all {
	background-color: var(--design-sticky-bg-color);
	transition: background-color 0.5s ease;
	margin: 100px 0 0;
	position: relative;
}
#design-all::before {
	content: "";
	position: absolute;
	top: -100px;
	left: 0;
	width: 100%;
	height: 101px;
  background-image: radial-gradient(110% 100% at bottom, rgba(var(--blue-rgb), 1) 0%, rgba(var(--blue-rgb), 1) 49.5%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%);;
}
#first-card.flow-card {
	height: auto;
}
.flow-card.bordered.other-card {
	height: var(--card-height);
}
.flow-card.process > .wp-block-group__inner-container {
	width: fit-content;
	position: relative;
}
.flow-card.process {
	margin-bottom: 5rem;
}
.flow-card.process h2, .flow-card li {
	color: var(--design-sticky-font-color);
	transition: color 0.5s ease;
}
.flow-card.process > .wp-block-group__inner-container::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 0;
	height: 100%;
	width: 2px;
	background: linear-gradient(180deg, white 45%, black 45%, black 55%, white 55%) 100% var(--progress-bar) / 100% 200%;
}
.flow-card.process ol {
	font-size: 24px;
	font-family: "Kalam", sans-serif;
	font-weight: 300;
}
/******************
* Featured col transform box-shadow animation
*******************/
.featured-col {
	transition: box-shadow 0.5s ease, opacity 1s ease-in-out, transform 0.5s ease !important;
}
.featured-col:hover {
	box-shadow: 0 10px 10px rgba(0,0,0,0.5);
	transform: translateY(-10px) !important;
	cursor: pointer;
}