.axiom-site-footer.wp-block-cover {
	--axiom-footer-lockup-width: min(82vw, 90rem);

	background: var(--wp--preset--color--deep-charcoal, #2a2a2a);
	isolation: isolate;
	min-height: 100svh;
	overflow: clip;
	position: relative;
	view-timeline-axis: block;
	view-timeline-name: --axiom-footer;
}

.axiom-site-footer .wp-block-cover__image-background,
.axiom-site-footer .wp-block-cover__video-background {
	height: 124%;
	inset: -12% 0;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.axiom-site-footer .wp-block-cover__background {
	z-index: 1;
}

.axiom-site-footer .wp-block-cover__inner-container {
	align-self: flex-start;
	position: relative;
	width: 100%;
	z-index: 2;
}

.axiom-site-footer .wp-block-cover__inner-container > .wp-block-group {
	align-items: flex-start;
	margin-inline: auto;
	max-width: none;
	width: min(
		var(--axiom-footer-lockup-width),
		calc(100vw - var(--axiom-gutter) - var(--axiom-gutter))
	);
}

.axiom-site-footer .wp-block-site-title,
.axiom-site-footer .axiom-footer__copyright {
	margin-block: 0;
}

.axiom-site-footer .wp-block-site-title {
	margin-inline: 0 !important;
	text-align: left;
}

.axiom-site-footer .axiom-footer__copyright {
	align-self: flex-start;
	text-align: right;
}

@media (min-width: 1440px) {
	.axiom-site-footer :is(.wp-block-site-title, .axiom-footer__copyright) {
		font-size: clamp(0.85rem, calc(0.2975rem + 0.6375vw), 1.275rem) !important;
	}
}

.axiom-site-footer::before,
.axiom-site-footer::after {
	aspect-ratio: 2113 / 1082;
	bottom: clamp(-8rem, -8vw, -3rem);
	content: "";
	left: 50%;
	-webkit-mask-image: url("../images/logo.svg");
	mask-image: url("../images/logo.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.72;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	width: var(--axiom-footer-lockup-width);
	z-index: 1;
}

.axiom-site-footer::after {
	-webkit-backdrop-filter: blur(20px) saturate(145%);
	backdrop-filter: blur(20px) saturate(145%);
	background: linear-gradient(135deg, rgb(255 255 255 / 32%), rgb(255 255 255 / 7%));
	filter: drop-shadow(0 1.5rem 3rem rgb(0 0 0 / 22%));
	opacity: 0.72;
}

.axiom-site-footer::before {
	background: linear-gradient(
		105deg,
		transparent 18%,
		rgb(255 255 255 / 5%) 35%,
		rgb(255 255 255 / 68%) 49%,
		rgb(255 255 255 / 14%) 58%,
		transparent 78%
	);
	background-position: 140% 50%;
	background-repeat: no-repeat;
	background-size: 220% 100%;
	mix-blend-mode: screen;
	opacity: 0.2;
}

@media (max-width: 900px) {
	.axiom-site-footer .wp-block-cover__inner-container > .wp-block-group {
		align-items: center;
		flex-direction: column;
		gap: 0.75rem;
		justify-content: center;
	}

	.axiom-site-footer .wp-block-site-title,
	.axiom-site-footer .axiom-footer__copyright {
		align-self: center;
		text-align: center;
	}

	.axiom-site-footer .axiom-footer__copyright {
		color: rgb(255 255 255 / 62%);
	}
}

@media (max-width: 700px) {
	.axiom-site-footer.wp-block-cover {
		--axiom-footer-lockup-width: 112vw;
	}

	.axiom-site-footer::before,
	.axiom-site-footer::after {
		bottom: -2rem;
	}
}

@supports (animation-timeline: view()) {
	.axiom-site-footer :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
		animation: axiom-footer-parallax linear both;
		animation-range: entry 0% exit 100%;
		animation-timeline: view();
		will-change: transform;
	}

	.axiom-site-footer::before {
		animation: axiom-footer-glass-reflection linear both;
		animation-range: entry 0% exit 100%;
		animation-timeline: --axiom-footer;
		will-change: background-position, opacity, transform;
	}
}

@keyframes axiom-footer-parallax {
	from {
		transform: translate3d(0, -7%, 0) scale(1.04);
	}

	to {
		transform: translate3d(0, 7%, 0) scale(1.04);
	}
}

@keyframes axiom-footer-glass-reflection {
	from {
		background-position: 140% 50%;
		opacity: 0.12;
		transform: translateX(-50%) translate3d(-1.5%, 0, 0);
	}

	50% {
		opacity: 0.82;
	}

	to {
		background-position: -40% 50%;
		opacity: 0.22;
		transform: translateX(-50%) translate3d(1.5%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.axiom-site-footer :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
		animation: none;
		transform: none;
		will-change: auto;
	}

	.axiom-site-footer::before {
		animation: none;
		background-position: 50% 50%;
		opacity: 0.35;
		transform: translateX(-50%);
		will-change: auto;
	}
}
