.hero{
	position: relative;
	z-index: 3;
	overflow: hidden;
	&.full-screen{
		min-height: 82vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.rich-text{
			*{
				color: var(--coyote-button-text);
			}
		}
		a.btn-{
			color: var(--coyote-button-text);
			padding-left: 0;
			padding-right: 0;
		}
		&.video{
			&.layout1{
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: var(--coyote-accent);
					z-index: -1;
				}
				.overlay{
					background:
						radial-gradient(circle at top, rgba(255,255,255,.15), transparent 45%),
						linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.82));
				}
				iframe{
					position: absolute;
					width: 160%;
					left: 50%;
					height: 160%;
					top: 50%;
					transform: translate(-50%, -50%);
					object-fit: cover;
					z-index: -1;
					animation: fade-in 1s ease both;
					animation-delay: 1s;
					@media screen and (max-width: 991px){
						height: 300vw;
						width: 400vw;
					}
				}
			}
			&.layout2{
				.hero-lead{
					padding-right: 5rem;
					.rich-text{
						*{
							color: var(--coyote-text-color);
						}
					}
				}
				& > div:first-child{
					position: absolute;
					top: 0;
					right: 0;
					width: 50vw;
					height: 100%;
					overflow: hidden;
					iframe{
						position: absolute;
						top: -8%;
						left: -30%;
						height: 116%;
						width: 160%;
						pointer-events: none;
						user-select: none;
					}
				}
			}
		}
		svg{
			width:1972px;
			height:297px;
			min-width: 100vw;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			pointer-events: none;
			path{
				fill: var(--coyote-background);
			}
			.hero-wave-shadow{
				fill: var(--coyote-border-color);
			}
			.hero-wave-shadow-alt{
				fill: var(--coyote-surface-background);
			}
			.hero-wave-main{
				fill: var(--coyote-background);
			}
			@media screen and (min-width: 1850px){
				min-width: 110vw !important;	
				width: unset;
				height: unset;
				bottom: -1px !important;
			}
		}
	}
	.background-image{
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background:
			radial-gradient(circle at top, rgba(255,255,255,.12), transparent 45%),
			linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.82));
		animation: overlay 2s cubic-bezier(.3,1,.3,1) both;
	}
	&:not(.content){
		.hero-lead{
			padding-top: ($cy-spacer * 5);
			padding-bottom: ($cy-spacer * 4);
		}
		&.has-wave{
			.hero-lead{
				padding-top: ($cy-spacer * 4);
				padding-bottom: ($cy-spacer * 5);
			}
		}
	}		
	.hero-lead{
		position: relative;
		z-index: 2;
		.rich-text, .buttons-wrapper{
			animation: fade-up .5s ease both;
		}
		.rich-text{
			animation-delay: .2s;
			> * + *{
				margin-top: 1.25rem;
			}
			h1, h2{
				font-weight: 700;
				line-height: 1.05;
				margin-bottom: 0;
				max-width: 12ch;
			}
			p{
				font-size: 1.1rem;
				max-width: 56ch;
				opacity: .9;
			}
		}
		.buttons-wrapper{
			animation-delay: .6s;
			a.btn-{
				color: var(--coyote-button-text);
			}
		}
		h2{
			@media screen and (max-width: 991px){
				font-size: 3rem;
			}
		}
		@media screen and (max-width: 991px){
			padding-top: ($cy-spacer * 3.5);
			padding-bottom: ($cy-spacer * 3);
			.rich-text{
				h1, h2{
					max-width: 100%;
					font-size: clamp(2.2rem, 8vw, 3.6rem);
				}
				p{
					font-size: 1rem;
					max-width: 100%;
				}
			}
		}
	}
	&.content{
		background:
			radial-gradient(circle at top left, color-mix(in srgb, var(--coyote-accent) 8%, transparent), transparent 45%),
			var(--coyote-surface-background);
		padding-top: ($cy-spacer * 3.5);
		padding-bottom: ($cy-spacer * 3);
		.hero-lead{
			.rich-text h1,
			.rich-text h2{
				max-width: 11ch;
			}
		}
		.img-fluid{
			display: block;
			width: 100%;
			border-radius: calc(var(--coyote-border-radius) * 1.4);
			box-shadow: var(--coyote-shadow-strong);
			object-fit: cover;
		}
		@media screen and (max-width: 991px){
			.img-fluid{
				margin-top: 1.5rem;
			}
		}
	}
}

@supports selector(body:has(.coyote-outer .hero--transparent-header)){
	body:has(.coyote-outer .hero--transparent-header){
		header{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: transparent;
			z-index: 9999;
			nav.navbar{
				background: transparent;
			}
		}
	}
}

@supports selector(body:has(.coyote-outer .hero--inverse-header)){
	body:has(.coyote-outer .hero--inverse-header){
		header{
			.navbar-brand{
				filter: brightness(0) invert(1);
			}
			.header-inner{
				.menu-bar{
					> ul > .nav-item > .nav-link,
					.nav-item .nav-link{
						color: var(--coyote-button-text);
					}
				}
				.nav-icon{
					color: var(--coyote-button-text);
				}
			}
		}
	}
}
