/*
 * React Bits Staggered Menu — ported to native CSS for the storefront header.
 */

.ps-staggered-menu {
	--ps-sm-accent: var(--ps-color-cyan);
	--ps-sm-panel-width: clamp(17rem, 38vw, 26.25rem);
	position: relative;
	z-index: 2;
}

.ps-staggered-menu__toggle {
	--ps-hamburger-width: 1.375rem;
	--ps-hamburger-bar: 2px;
	--ps-hamburger-gap: 6px;
	--ps-hamburger-spring: cubic-bezier(.34, 1.45, .64, 1);
	--ps-hamburger-snap: cubic-bezier(.22, 1, .36, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ps-color-paper);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform .22s var(--ps-hamburger-spring),
		color .28s ease,
		background-color .28s ease,
		box-shadow .28s ease;
}

.ps-staggered-menu__toggle:hover {
	transform: scale(1.06);
	background: rgb(255 255 255 / 6%);
}

.ps-staggered-menu__toggle:active {
	transform: scale(.94);
	transition-duration: .12s;
}

.ps-staggered-menu__toggle:focus-visible {
	outline: 3px solid var(--ps-color-lime);
	outline-offset: 4px;
}

.ps-staggered-menu.is-open .ps-staggered-menu__toggle {
	color: var(--ps-sm-accent);
	box-shadow: 0 0 18px rgb(0 229 255 / 22%);
}

.ps-hamburger {
	position: relative;
	display: block;
	width: var(--ps-hamburger-width);
	height: calc((var(--ps-hamburger-bar) * 3) + (var(--ps-hamburger-gap) * 2));
}

.ps-hamburger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--ps-hamburger-bar);
	border-radius: 999px;
	background: currentcolor;
	transform-origin: center;
	will-change: transform, opacity, top, bottom;
}

.ps-hamburger__line--top {
	top: 0;
	transition:
		top .42s var(--ps-hamburger-snap) .08s,
		transform .5s var(--ps-hamburger-spring) .08s;
}

.ps-hamburger__line--mid {
	top: 50%;
	transform: translateY(-50%);
	transition:
		opacity .22s ease .12s,
		transform .34s var(--ps-hamburger-spring) .04s;
}

.ps-hamburger__line--bot {
	bottom: 0;
	transition:
		bottom .42s var(--ps-hamburger-snap) .08s,
		transform .5s var(--ps-hamburger-spring) .08s;
}

.ps-staggered-menu__toggle:hover .ps-hamburger__line--top {
	transform: translateY(-1px);
}

.ps-staggered-menu__toggle:hover .ps-hamburger__line--bot {
	transform: translateY(1px);
}

.ps-staggered-menu__toggle:hover .ps-hamburger__line--mid {
	transform: translateY(-50%) scaleX(.72);
}

.ps-staggered-menu.is-open .ps-hamburger__line--top {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	transition:
		top .38s var(--ps-hamburger-snap),
		transform .52s var(--ps-hamburger-spring) .06s;
}

.ps-staggered-menu.is-open .ps-hamburger__line--mid {
	opacity: 0;
	transform: translateY(-50%) scaleX(0);
	transition:
		opacity .18s ease,
		transform .28s var(--ps-hamburger-spring);
}

.ps-staggered-menu.is-open .ps-hamburger__line--bot {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
	transition:
		bottom .38s var(--ps-hamburger-snap),
		transform .52s var(--ps-hamburger-spring) .06s;
}

.ps-staggered-menu__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--ps-z-overlay) - 1);
	background: rgb(5 5 7 / 55%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .32s ease,
		visibility 0s linear .32s;
}

.ps-staggered-menu.is-open .ps-staggered-menu__overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity .32s ease,
		visibility 0s linear 0s;
}

.ps-staggered-menu__prelayers {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--ps-sm-panel-width);
	pointer-events: none;
	z-index: var(--ps-z-overlay);
}

.ps-staggered-menu__prelayer {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}

.ps-staggered-menu.is-open .ps-staggered-menu__prelayer:nth-child(1) {
	transform: translateX(0);
	transition-delay: 0s;
}

.ps-staggered-menu.is-open .ps-staggered-menu__prelayer:nth-child(2) {
	transform: translateX(0);
	transition-delay: .07s;
}

.ps-staggered-menu__panel {
	position: fixed;
	top: 0;
	right: 0;
	width: var(--ps-sm-panel-width);
	height: 100%;
	max-height: 100dvh;
	padding: clamp(5rem, 12vw, 6.5rem) clamp(1.5rem, 4vw, 2rem) 2rem;
	border-left: 1px solid rgb(255 255 255 / 10%);
	background: var(--ps-color-ink);
	overflow-y: auto;
	z-index: calc(var(--ps-z-overlay) + 1);
	transform: translateX(100%);
	transition: transform .65s cubic-bezier(.23, 1, .32, 1);
	transition-delay: .14s;
}

.ps-staggered-menu.is-open .ps-staggered-menu__panel {
	transform: translateX(0);
}

.ps-staggered-menu__list {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-staggered-menu__item {
	overflow: hidden;
}

.ps-staggered-menu__link {
	position: relative;
	display: inline-block;
	padding: .15rem 0;
	color: var(--ps-color-paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 6vw, 3.25rem);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .25s ease;
}

.ps-staggered-menu__link:hover,
.ps-staggered-menu__link:focus-visible {
	color: var(--ps-sm-accent);
}

.ps-staggered-menu__link-label {
	display: inline-block;
	transform: translateY(140%) rotate(10deg);
	opacity: 0;
	transition:
		transform .75s cubic-bezier(.23, 1, .32, 1),
		opacity .55s ease;
	transition-delay: 0s;
}

.ps-staggered-menu.is-open .ps-staggered-menu__link-label {
	transform: translateY(0) rotate(0deg);
	opacity: 1;
}

.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(1) .ps-staggered-menu__link-label { transition-delay: .22s; }
.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(2) .ps-staggered-menu__link-label { transition-delay: .32s; }
.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(3) .ps-staggered-menu__link-label { transition-delay: .42s; }
.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(4) .ps-staggered-menu__link-label { transition-delay: .52s; }
.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(5) .ps-staggered-menu__link-label { transition-delay: .62s; }
.ps-staggered-menu.is-open .ps-staggered-menu__item:nth-child(6) .ps-staggered-menu__link-label { transition-delay: .72s; }

.ps-staggered-menu:not(.is-open) .ps-staggered-menu__link-label {
	transition-delay: 0s;
}

html.ps-staggered-menu-open,
html.ps-staggered-menu-open body {
	overflow: hidden;
}

@media (max-width: 640px) {
	.ps-staggered-menu {
		--ps-sm-panel-width: 100%;
	}

	.ps-staggered-menu__panel {
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-staggered-menu__prelayer,
	.ps-staggered-menu__panel,
	.ps-staggered-menu__overlay,
	.ps-staggered-menu__link-label,
	.ps-hamburger__line {
		transition: none !important;
	}

	.ps-staggered-menu.is-open .ps-hamburger__line--top {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	.ps-staggered-menu.is-open .ps-hamburger__line--mid {
		opacity: 0;
		transform: translateY(-50%) scaleX(0);
	}

	.ps-staggered-menu.is-open .ps-hamburger__line--bot {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg);
	}

	.ps-staggered-menu:not(.is-open) .ps-staggered-menu__panel,
	.ps-staggered-menu:not(.is-open) .ps-staggered-menu__prelayer {
		transform: translateX(100%);
	}

	.ps-staggered-menu.is-open .ps-staggered-menu__panel,
	.ps-staggered-menu.is-open .ps-staggered-menu__prelayer {
		transform: translateX(0);
	}

	.ps-staggered-menu.is-open .ps-staggered-menu__link-label {
		transform: none;
		opacity: 1;
	}
}