/**
 * Hero Large front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */

.hero--large {
	pointer-events: none;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 95vh;
	padding: var(--sp-m-em) var(--sp-gutter-rem) 25vh;
	text-align: center;
}

.hero--large.has-1-2-background-color {
		background-color: transparent !important; /* override gutenberg hard-coded background color */
	}

.hero--large a {
		pointer-events: auto;
	}

.hero--large .wp-block-site-logo {
		margin: var(--sp-xs-rem) auto 1em;
		width: 588px; /* actual image size */
		max-width: 50vw;
	}

@media (max-width: 959px) {

.hero--large .wp-block-site-logo {
			max-width: 65vw
	}
		}

.hero--large .bubble {
		text-shadow: none;
	}

.hero--large .hero__large-swoosh {
		position: absolute;
		inset: 0 0 0 -15em;
		opacity: 0;
	}

.hero--large .hero__large-swoosh::before {
			content: "";
			pointer-events: none;
			position: absolute;
			inset: 0;
			transform: translateX(calc(-50% + 23.8em));
			mask-image: url(../../images/hero-large-swoosh.19bb2a00.svg);
			mask-repeat: no-repeat;
			mask-position: right bottom;
			mask-size: auto 50em;
			background: var(--c-bg);
		}

@media (max-width: 959px) {

.hero--large .hero__large-swoosh::before {
				mask-position: calc(100% + 20vw) calc(100% - 1vh);
				mask-size: 450vw auto;
				transform: none;
				bottom: 10vh
		}
			}

.hero--large .hero__frame {
		position: relative;
	}

.hero--large .hero__down {
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 20vh;
		left: 50%;
		width: 0;
		height: 0;
		color: transparent !important;
	}

/* even if .has-text-color is set */

.hero--large .hero__down::before {
			content: "";
			position: absolute;
			width: 1.8em;
			height: 1.8em;
			border: 0 solid var(--c-1-5);
			border-width: 0 0.7em 0.7em 0;
			opacity: 0;
			transform: rotate(45deg);
		}

/* animations (and delays on default animations to sync things) */

.hero--large .wp-block-site-logo {
		filter: drop-shadow(0 0 0 transparent);
		transition: filter 0.6s 1s;
	}

.hero--large .hero__frame {
		transition: text-shadow 0.6s 1s;
	}

.hero--large .accent--logo::after {
			transition-delay: 0.8s;
		}

.hero--large .bubble {
		transition-delay: 1.5s;
	}

.hero--large .hero__down {
		animation: hero-big-down-arrow 1.2s infinite;
	}

@media (max-width: 479px) {

.hero--large .hero__down {
			display: none
	}
		}

.hero--large .hero__down::before {
			transition: opacity 2s 2.3s;
		}

.hero--large:is(.is-shown) .hero__large-swoosh {
			mask-repeat: no-repeat;
			opacity: 1;
			left: 0;
			transition-duration: 0.6s;
			transition-property: opacity, left;
			transition-delay: 0.3s;
			animation: hero-big-swoosh 1.5s 0.3s;
		}

.hero--large:is(.is-shown) .hero__frame {
			text-shadow: 0 0 2px var(--c-bg);
		}

.hero--large:is(.is-shown) .hero__down::before {
				opacity: 1;
			}

.hero--large:is(.is-shown) .wp-block-site-logo {
			filter: drop-shadow(0 0 5px var(--c-bg));
		}
@keyframes hero-big-down-arrow {
	0%,
	50%,
	100% {
		opacity: 1;
		transform: none;
	}
	20% {
		transform: translateY(0.4em);
	}
}
@keyframes hero-big-swoosh {
	0% {
		mask-image: linear-gradient(133.5deg, tan 50%, transparent 0);
		mask-size: 50% 50%;
	}
	100% {
		mask-image: linear-gradient(133.5deg, tan 50%, transparent 0);
		mask-size: 185% 185%;
	}
}