/**
 * Toboo topbar icon hover animations (ghost / dice / wave / box).
 * Missing from the older compiled style.css; restored from source SCSS.
 */

@keyframes wave {
	0% { transform: rotate(0); }
	10% { transform: rotate(40deg); }
	30% { transform: rotate(-20deg); }
	50% { transform: rotate(40deg); }
	70% { transform: rotate(-20deg); }
	100% { transform: rotate(0deg); }
}

@keyframes dice {
	0% { transform: rotate(0deg); transform-origin: bottom left; }
	30% { transform: rotate(-45deg); transform-origin: bottom left; }
	40% { transform: rotate(0deg); transform-origin: bottom left; }
	60% { transform: rotate(20deg); transform-origin: bottom right; }
	80% { transform: rotate(-10deg); transform-origin: bottom left; }
	100% { transform: rotate(0deg) translate(0, 0); transform-origin: bottom right; }
}

@keyframes swirl {
	0% { transform: scale(1) translate(0, 0); transform-origin: bottom center; }
	40% { transform: scale(1.2) translate(0, -10px) rotate(-10deg); transform-origin: bottom center; }
	100% { transform: scale(1) translate(0, 0); transform-origin: bottom center; }
}

@keyframes ghostmouth {
	0% { transform: translateX(-2px) scale(1); }
	10% { transform: translateX(-2px) scale(1); }
	50% { transform: translateX(-2px) scale(2); }
	90% { transform: translateX(-2px) scale(1); }
	100% { transform: translateX(-2px) scale(1); }
}

@keyframes box {
	0% { transform: scale(1, 1) translateY(0); transform-origin: bottom center; }
	20% { transform: scale(1.4, 0.5) translateY(0); transform-origin: bottom center; }
	40% { transform: scale(0.8, 1) translateY(-20px); transform-origin: bottom center; }
	60% { transform: scale(1, 1) translateY(-20px); transform-origin: bottom center; }
	70% { transform: scale(0.8, 1.1) translateY(-10px); transform-origin: bottom center; }
	85% { transform: scale(1.4, 0.5) translateY(5px); transform-origin: bottom center; }
	100% { transform: scale(1, 1) translateY(0); transform-origin: bottom center; }
}

.wave {
	transform: rotate(0);
	transform-origin: bottom right;
}

.dice {
	transform: rotate(0);
	transform-origin: bottom left;
}

.swirl {
	transform: scale(1) translate(0, 0);
	transform-origin: bottom center;
}

.box {
	transform: scale(1, 1) translateY(0);
	transform-origin: bottom center;
}

.top-bar .ghost-mouth {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #000;
	left: 50%;
	transform: translateX(-2px);
	top: 54%;
	border-radius: 50%;
	pointer-events: none;
}

.site-header.top-bar .is-icon-animating .wave {
	animation-name: wave;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.site-header.top-bar .is-icon-animating .dice {
	animation-name: dice;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.site-header.top-bar .is-icon-animating .swirl {
	animation-name: swirl;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}

.site-header.top-bar .is-icon-animating .swirl .ghost-mouth {
	animation-name: ghostmouth;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}

.site-header.top-bar .is-icon-animating .box {
	animation-name: box;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

/*
 * Opening a modal covers the header and clears :hover mid-animation.
 * Force rest pose on :active / overlay-open (no mid-keyframe freeze — that
 * made the cart .box squash look like a white flash).
 */
.top-bar a:active .wave,
.top-bar a:active .dice,
.top-bar a:active .swirl,
.top-bar a:active .box,
.top-bar a:active .ghost-mouth,
.top-bar a:active #logo .logo-1,
.top-bar a:active #logo .logo-2,
.top-bar a:active #logo .logo-3,
.top-bar a:active #logo .logo-4,
.top-bar a:active #logo .logo-5,
.top-bar a:active svg.logo .logo-1,
.top-bar a:active svg.logo .logo-2,
.top-bar a:active svg.logo .logo-3,
.top-bar a:active svg.logo .logo-4,
.top-bar a:active svg.logo .logo-5,
body.tw-modal-overlay-open .top-bar .wave,
body.tw-modal-overlay-open .top-bar .dice,
body.tw-modal-overlay-open .top-bar .swirl,
body.tw-modal-overlay-open .top-bar .box,
body.tw-modal-overlay-open .top-bar .ghost-mouth,
body.tw-modal-overlay-open .top-bar #logo .logo-1,
body.tw-modal-overlay-open .top-bar #logo .logo-2,
body.tw-modal-overlay-open .top-bar #logo .logo-3,
body.tw-modal-overlay-open .top-bar #logo .logo-4,
body.tw-modal-overlay-open .top-bar #logo .logo-5,
body.tw-modal-overlay-open .top-bar svg.logo .logo-1,
body.tw-modal-overlay-open .top-bar svg.logo .logo-2,
body.tw-modal-overlay-open .top-bar svg.logo .logo-3,
body.tw-modal-overlay-open .top-bar svg.logo .logo-4,
body.tw-modal-overlay-open .top-bar svg.logo .logo-5,
body.tw-search-overlay-open .top-bar .wave,
body.tw-search-overlay-open .top-bar .dice,
body.tw-search-overlay-open .top-bar .swirl,
body.tw-search-overlay-open .top-bar .box,
body.tw-search-overlay-open .top-bar .ghost-mouth,
body.tw-search-overlay-open .top-bar #logo .logo-1,
body.tw-search-overlay-open .top-bar #logo .logo-2,
body.tw-search-overlay-open .top-bar #logo .logo-3,
body.tw-search-overlay-open .top-bar #logo .logo-4,
body.tw-search-overlay-open .top-bar #logo .logo-5,
body.tw-search-overlay-open .top-bar svg.logo .logo-1,
body.tw-search-overlay-open .top-bar svg.logo .logo-2,
body.tw-search-overlay-open .top-bar svg.logo .logo-3,
body.tw-search-overlay-open .top-bar svg.logo .logo-4,
body.tw-search-overlay-open .top-bar svg.logo .logo-5 {
	animation: none !important;
}

.top-bar a:active .wave,
body.tw-modal-overlay-open .top-bar .wave,
body.tw-search-overlay-open .top-bar .wave {
	transform: rotate(0);
	transform-origin: bottom right;
}

.top-bar a:active .dice,
body.tw-modal-overlay-open .top-bar .dice,
body.tw-search-overlay-open .top-bar .dice {
	transform: rotate(0deg);
	transform-origin: bottom left;
}

.top-bar a:active .swirl,
body.tw-modal-overlay-open .top-bar .swirl,
body.tw-search-overlay-open .top-bar .swirl {
	transform: scale(1) translate(0, 0);
	transform-origin: bottom center;
}

.top-bar a:active .box,
body.tw-modal-overlay-open .top-bar .box,
body.tw-search-overlay-open .top-bar .box {
	transform: scale(1, 1) translateY(0);
	transform-origin: bottom center;
}

.top-bar a:active .ghost-mouth,
body.tw-modal-overlay-open .top-bar .ghost-mouth,
body.tw-search-overlay-open .top-bar .ghost-mouth {
	transform: translateX(-2px) scale(1);
}

.top-bar a:active #logo .logo-1,
.top-bar a:active #logo .logo-2,
.top-bar a:active #logo .logo-3,
.top-bar a:active #logo .logo-4,
.top-bar a:active #logo .logo-5,
.top-bar a:active svg.logo .logo-1,
.top-bar a:active svg.logo .logo-2,
.top-bar a:active svg.logo .logo-3,
.top-bar a:active svg.logo .logo-4,
.top-bar a:active svg.logo .logo-5,
body.tw-modal-overlay-open .top-bar #logo .logo-1,
body.tw-modal-overlay-open .top-bar #logo .logo-2,
body.tw-modal-overlay-open .top-bar #logo .logo-3,
body.tw-modal-overlay-open .top-bar #logo .logo-4,
body.tw-modal-overlay-open .top-bar #logo .logo-5,
body.tw-modal-overlay-open .top-bar svg.logo .logo-1,
body.tw-modal-overlay-open .top-bar svg.logo .logo-2,
body.tw-modal-overlay-open .top-bar svg.logo .logo-3,
body.tw-modal-overlay-open .top-bar svg.logo .logo-4,
body.tw-modal-overlay-open .top-bar svg.logo .logo-5,
body.tw-search-overlay-open .top-bar #logo .logo-1,
body.tw-search-overlay-open .top-bar #logo .logo-2,
body.tw-search-overlay-open .top-bar #logo .logo-3,
body.tw-search-overlay-open .top-bar #logo .logo-4,
body.tw-search-overlay-open .top-bar #logo .logo-5,
body.tw-search-overlay-open .top-bar svg.logo .logo-1,
body.tw-search-overlay-open .top-bar svg.logo .logo-2,
body.tw-search-overlay-open .top-bar svg.logo .logo-3,
body.tw-search-overlay-open .top-bar svg.logo .logo-4,
body.tw-search-overlay-open .top-bar svg.logo .logo-5 {
	transform: scale(1);
}

/* Logo: letters shrink then grow in sequence on hover. */
@keyframes logo-letter {
	0%,
	100% {
		transform: scale(1);
	}
	40% {
		transform: scale(0.45);
	}
	72% {
		transform: scale(1.28);
	}
	88% {
		transform: scale(0.94);
	}
}

/* Allow blob overshoot to paint outside the SVG viewport. */
#logo,
svg.logo,
#logo .logo-main,
svg.logo .logo-main,
a:has(#logo),
a:has(svg.logo),
.custom-logo-link:has(#logo),
.custom-logo-link:has(svg.logo),
.toboo-site-logo,
.toboo-header-logo-col {
	overflow: visible;
}

#logo .logo-1,
#logo .logo-2,
#logo .logo-3,
#logo .logo-4,
#logo .logo-5,
svg.logo .logo-1,
svg.logo .logo-2,
svg.logo .logo-3,
svg.logo .logo-4,
svg.logo .logo-5 {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(1);
	overflow: visible;
}

.site-header.top-bar .is-icon-animating #logo .logo-1,
.site-header.top-bar .is-icon-animating #logo .logo-2,
.site-header.top-bar .is-icon-animating #logo .logo-3,
.site-header.top-bar .is-icon-animating #logo .logo-4,
.site-header.top-bar .is-icon-animating #logo .logo-5,
.site-header.top-bar .is-icon-animating svg.logo .logo-1,
.site-header.top-bar .is-icon-animating svg.logo .logo-2,
.site-header.top-bar .is-icon-animating svg.logo .logo-3,
.site-header.top-bar .is-icon-animating svg.logo .logo-4,
.site-header.top-bar .is-icon-animating svg.logo .logo-5 {
	animation-name: logo-letter;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.site-header.top-bar .is-icon-animating #logo .logo-1,
.site-header.top-bar .is-icon-animating svg.logo .logo-1 {
	animation-delay: 0s;
}

.site-header.top-bar .is-icon-animating #logo .logo-2,
.site-header.top-bar .is-icon-animating svg.logo .logo-2 {
	animation-delay: 0.08s;
}

.site-header.top-bar .is-icon-animating #logo .logo-3,
.site-header.top-bar .is-icon-animating svg.logo .logo-3 {
	animation-delay: 0.16s;
}

.site-header.top-bar .is-icon-animating #logo .logo-4,
.site-header.top-bar .is-icon-animating svg.logo .logo-4 {
	animation-delay: 0.24s;
}

.site-header.top-bar .is-icon-animating #logo .logo-5,
.site-header.top-bar .is-icon-animating svg.logo .logo-5 {
	animation-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
	.site-header.top-bar .is-icon-animating #logo .logo-1,
	.site-header.top-bar .is-icon-animating #logo .logo-2,
	.site-header.top-bar .is-icon-animating #logo .logo-3,
	.site-header.top-bar .is-icon-animating #logo .logo-4,
	.site-header.top-bar .is-icon-animating #logo .logo-5,
	.site-header.top-bar .is-icon-animating svg.logo .logo-1,
	.site-header.top-bar .is-icon-animating svg.logo .logo-2,
	.site-header.top-bar .is-icon-animating svg.logo .logo-3,
	.site-header.top-bar .is-icon-animating svg.logo .logo-4,
	.site-header.top-bar .is-icon-animating svg.logo .logo-5 {
		animation: none;
	}
}


@media (prefers-reduced-motion: reduce) {
	.btn:not(.btn-close):not(.btn-link):not(.btn-text),
	.toboo-product-atc__button,
	.toboo-product-atc__icon-wrap,
	.toboo-product-buy > .ppc-button-wrapper {
		transition: none;
	}

	.btn:not(.btn-close):not(.btn-link):not(.btn-text):hover:not(:disabled):not(.disabled),
	.btn:not(.btn-close):not(.btn-link):not(.btn-text):focus-visible:not(:disabled):not(.disabled),
	.toboo-product-atc__button:hover,
	.toboo-product-atc__button:focus-visible,
	.toboo-product-atc__button:hover .toboo-product-atc__icon-wrap,
	.toboo-product-atc__button:focus-visible .toboo-product-atc__icon-wrap,
	.toboo-product-buy > .ppc-button-wrapper:hover,
	.toboo-product-buy > .ppc-button-wrapper:focus-within {
		transform: none;
		animation: none;
	}
}