/* ---------- "Shade" page transition (Shop Now button) ---------- */
.a5-page-shade {
	position: fixed;
	inset: 0;
	z-index: 20000;
	background-color: #151616;
	transform: translateY(-100%);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}
.a5-page-shade__bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5px;
	background-color: rgba(243, 243, 232, 0.55);
}
.a5-page-shade.is-covering {
	transform: translateY(0);
	pointer-events: all;
}
.a5-page-shade.is-leaving {
	transform: translateY(100%);
}
/* On arrival, the shade must already be covering the page before first
   paint (no transition) -- motion.js re-enables the transition on the next
   frame before sliding it the rest of the way down and off. */
html.a5-shade-active .a5-page-shade {
	transform: translateY(0);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.a5-page-shade {
		display: none !important;
	}
}

/* ---------- Homepage logo intro ----------
   The real logo, tagline, button, and header all stay hidden until the
   clone (below) has held center-stage and slid into the logo's real spot;
   the real logo then crossfades in under the clone rather than popping in,
   while the tagline/button ease in with a slight rise just behind it, and
   the header settles in around the same time -- one continuous materialize
   instead of separate pieces snapping in. */
.a5-intro-pending #a5-header,
.a5-intro-pending .a5-hero-fixed-bg .wp-block-image,
.a5-intro-pending .a5-hero-fixed-bg h1,
.a5-intro-pending .a5-hero-fixed-bg .wp-block-buttons {
	opacity: 0;
}
.a5-intro-pending .a5-hero-fixed-bg h1,
.a5-intro-pending .a5-hero-fixed-bg .wp-block-buttons {
	transform: translateY(18px);
}
#a5-header {
	transition: opacity 0.9s ease-out;
}
.a5-hero-fixed-bg .wp-block-image {
	transition: opacity 0.5s ease-out;
}
.a5-hero-fixed-bg h1,
.a5-hero-fixed-bg .wp-block-buttons {
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.a5-hero-fixed-bg .wp-block-buttons {
	transition-delay: 0.1s;
}

.a5-intro-logo-clone {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease-out;
}
html.a5-intro-pending .a5-intro-logo-clone {
	display: block;
}
.a5-intro-logo-clone.is-visible {
	opacity: 1;
}
.a5-intro-logo-clone.is-leaving {
	opacity: 0;
	transition: opacity 0.55s ease-out;
}
.a5-intro-logo-clone img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Scroll reveal ---------- */
.a5-reveal {
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--a5-reveal-delay, 0s);
}
.a5-reveal.a5-reveal--pending {
	opacity: 0;
	transform: translateY(28px);
}

/* Divider lines "draw" in from the left instead of fading -- transform-origin
   has to be set on the element itself, since <hr> can't have a pseudo-element
   drawn cleanly across browsers. */
.a5-reveal-line {
	transform-origin: left center;
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
	transition-delay: var(--a5-reveal-delay, 0s);
}
.a5-reveal-line.a5-reveal-line--pending {
	opacity: 0;
	transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
	html.a5-intro-pending #a5-header,
	html.a5-intro-pending .a5-hero-fixed-bg .wp-block-image,
	html.a5-intro-pending .a5-hero-fixed-bg h1,
	html.a5-intro-pending .a5-hero-fixed-bg .wp-block-buttons {
		opacity: 1;
		transform: none;
	}
	.a5-intro-logo-clone {
		display: none !important;
	}
	.a5-reveal,
	.a5-reveal.a5-reveal--pending,
	.a5-reveal-line,
	.a5-reveal-line.a5-reveal-line--pending {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}