/* GODSDOG — clean storefront preloader */
:root {
	scrollbar-gutter: stable;
}

body.godsdog-preloader-active {
	overflow: hidden !important;
}

html.godsdog-preloader-seen .godsdog-preloader {
	display: none !important;
}

html.godsdog-preloader-seen body.godsdog-preloader-active {
	overflow: auto !important;
}

.godsdog-preloader,
.godsdog-preloader * {
	box-sizing: border-box;
}

.godsdog-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	min-width: 100%;
	min-height: 100%;
	min-height: 100dvh;
	padding: 24px;
	color: #111;
	background: #fff;
	cursor: wait;
	transition: opacity .28s ease, visibility .28s linear;
	animation: godsdog-preloader-failsafe .01s linear 8s forwards;
}

.godsdog-preloader__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.2vw, 28px);
	width: 100%;
}

.godsdog-preloader__wordmark {
	position: relative;
	width: clamp(210px, 32vw, 420px);
	aspect-ratio: 224 / 22;
	animation: godsdog-logo-lock .68s cubic-bezier(.16, 1, .3, 1) both;
}

.godsdog-preloader__slice {
	position: absolute;
	inset: 0;
	display: block;
	background: #111;
	-webkit-mask: url('../images/header-logo.svg') center / contain no-repeat;
	mask: url('../images/header-logo.svg') center / contain no-repeat;
	will-change: transform, opacity;
}

.godsdog-preloader__slice--top {
	clip-path: inset(0 0 66% 0);
	animation: godsdog-logo-slice-top .68s cubic-bezier(.16, 1, .3, 1) both;
}

.godsdog-preloader__slice--middle {
	clip-path: inset(32% 0 32% 0);
	animation: godsdog-logo-slice-middle .68s cubic-bezier(.16, 1, .3, 1) both;
}

.godsdog-preloader__slice--bottom {
	clip-path: inset(66% 0 0 0);
	animation: godsdog-logo-slice-bottom .68s cubic-bezier(.16, 1, .3, 1) both;
}

.godsdog-preloader__counter {
	min-width: 4ch;
	color: #111;
	font: 500 clamp(12px, .85vw, 14px)/1 Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	text-align: center;
}

.godsdog-preloader.is-complete {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@keyframes godsdog-preloader-failsafe {
	to { visibility: hidden; pointer-events: none; }
}

@keyframes godsdog-logo-lock {
	0% { transform: scaleX(.9); }
	62% { transform: scaleX(1.025); }
	100% { transform: scaleX(1); }
}

@keyframes godsdog-logo-slice-top {
	0% { opacity: 0; transform: translate3d(-34px, -7px, 0) skewX(-12deg); }
	38% { opacity: 1; }
	68% { transform: translate3d(5px, 0, 0) skewX(2deg); }
	82% { transform: translate3d(-2px, 0, 0) skewX(-1deg); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(0); }
}

@keyframes godsdog-logo-slice-middle {
	0% { opacity: 0; transform: scaleX(.62); }
	32% { opacity: 1; }
	68% { transform: scaleX(1.045); }
	84% { transform: scaleX(.99); }
	100% { opacity: 1; transform: scaleX(1); }
}

@keyframes godsdog-logo-slice-bottom {
	0% { opacity: 0; transform: translate3d(34px, 7px, 0) skewX(12deg); }
	38% { opacity: 1; }
	68% { transform: translate3d(-5px, 0, 0) skewX(-2deg); }
	82% { transform: translate3d(2px, 0, 0) skewX(1deg); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.godsdog-preloader {
		transition-duration: .12s;
	}

	.godsdog-preloader__wordmark,
	.godsdog-preloader__slice {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
