/* ==========================================================================
   Botulax — motion and interaction

   One rule: motion explains something. A product photo carries over to its
   page, products settle onto the shelf, a chart draws its data, the carton
   lines ripple under the pointer. Nothing keeps moving once it has settled,
   and nothing animates for people who ask their device for reduced motion.

   Reveal states only apply when site.js is running (html.bx-js), so the page
   is complete without JavaScript; html.bx-no-reveal is the safety net if the
   script fails to load.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page to page: a fade-through. The page fades out, then the next one fades
   in and settles a few pixels; the two never overlap, so text never ghosts.
   The header and the top strip hold still. Product photos travel between the
   product shelf and the product page.
   -------------------------------------------------------------------------- */

@keyframes bx-page-out {
	to {
		opacity: 0;
	}
}

@keyframes bx-page-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: bx-page-out 0.12s cubic-bezier(0.4, 0, 1, 1) both;
	}

	::view-transition-new(root) {
		animation: bx-page-in 0.26s cubic-bezier(0, 0, 0.2, 1) 0.13s both;
	}

	/* Browsers without page transitions: the same fade-in when arriving from another page of the site. */
	.bx-page-enter .bx-main,
	.bx-page-enter .bx-footer-part {
		animation: bx-page-in 0.26s cubic-bezier(0, 0, 0.2, 1) backwards;
	}

	::view-transition-group(*) {
		animation-duration: 0.5s;
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* The header and the top strip hold still between pages. */
	::view-transition-group(bx-header),
	::view-transition-new(bx-header),
	::view-transition-group(bx-utility),
	::view-transition-new(bx-utility) {
		animation: none;
	}

	::view-transition-old(bx-header),
	::view-transition-old(bx-utility) {
		display: none;
	}

	/* Product photos have white studio backdrops; let them drop out over the frost panel mid-flight. */
	::view-transition-group(bx-product) {
		mix-blend-mode: multiply;
	}
}

.bx-header-part {
	view-transition-name: bx-header;
}

.bx-utility-part {
	view-transition-name: bx-utility;
}

/* The product photo's name (bx-product) is set by script, and only on a photo that is on
   screen on both pages, so nothing flies in from off screen. */

/* --------------------------------------------------------------------------
   Navigation feedback: a thin bar along the top while the next page loads.
   It runs out quickly, then slows, and never claims to finish; the next page
   replacing this one is the finish.
   -------------------------------------------------------------------------- */

@keyframes bx-progress {
	from {
		transform: scaleX(0);
	}
	12% {
		transform: scaleX(0.4);
	}
	to {
		transform: scaleX(0.94);
	}
}

.bx-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 60;
	height: 3px;
	background: #2f9bd7; /* the carton blue: reads on the dark top strip and on white */
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--ease);
}

.bx-loading .bx-progress {
	opacity: 1;
	animation: bx-progress 10s cubic-bezier(0.1, 0.7, 0.15, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
	.bx-loading .bx-progress {
		animation: none;
		transform: scaleX(0.6);
	}
}

/* --------------------------------------------------------------------------
   Header: tucks away while reading down, comes back on the way up.
   -------------------------------------------------------------------------- */

.bx-header-part {
	transition: transform 0.35s var(--ease), border-color 0.3s var(--ease);
}

.bx-scroll-down .bx-header-part {
	transform: translateY(-100%);
}

/* Focus returning to a header control (e.g. after closing the mobile menu) must not scroll the page:
   the header is always on screen, so cancel the scroll-padding offset for its contents. */
.bx-header-part * {
	scroll-margin-top: calc(-1 * (var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem));
}

.bx-has-subnav .bx-header-part * {
	scroll-margin-top: calc(-1 * (var(--header-h) + 52px + var(--wp-admin--admin-bar--height, 0px) + 1rem));
}

/* Current page in the menu. */
.bx-nav .current-menu-item > .wp-block-navigation-item__content,
.bx-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.bx-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--frost);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   In-page bar (product pages, Clinical Studies)
   -------------------------------------------------------------------------- */

.bx-subnav {
	--subnav-h: 52px;
	position: fixed;
	top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
	left: 0;
	right: 0;
	z-index: 40;
	border-bottom: 1px solid var(--rule);
	background: rgb(255 255 255 / 0.96);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.35s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.35s;
}

.bx-subnav.is-active {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

/* When the header tucks away, the bar takes its place at the top. */
.bx-scroll-down .bx-subnav.is-active {
	transform: translateY(calc(-1 * var(--header-h)));
}

.bx-scroll-down .bx-subnav:not(.is-active) {
	transform: translateY(calc(-1 * var(--header-h) - 100%));
}

.bx-subnav__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	height: var(--subnav-h);
}

.bx-subnav__title {
	flex: none;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.bx-subnav__links {
	position: relative;
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.bx-subnav__links::-webkit-scrollbar {
	display: none;
}

.bx-subnav__links li {
	flex: none;
	margin: 0;
}

.bx-subnav__links a {
	display: block;
	padding: 0.9rem 0 0.8rem;
	border-bottom: 2px solid transparent;
	font-size: 0.9375rem;
	color: var(--steel);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--ease), border-color 0.25s var(--ease);
}

.bx-subnav__links a:hover {
	color: var(--ink);
}

/* On product pages the marker takes the strength colour. */
.bx-subnav__links a.is-current {
	border-bottom-color: var(--c, var(--navy));
	color: var(--ink);
}

.bx-subnav__cta {
	flex: none;
	margin-left: auto;
	padding: 0.6em 1.15em !important;
	border: 1px solid var(--navy);
	font-size: 0.875rem !important;
	text-decoration: none;
	white-space: nowrap;
}

.bx-subnav__cta:hover {
	background-color: var(--ink);
	border-color: var(--ink);
}

.bx-has-subnav {
	scroll-padding-top: calc(var(--header-h) + 52px + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

/* With the header tucked away, anchors land just under whatever is still pinned. */
.bx-scroll-down {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

.bx-has-subnav.bx-scroll-down {
	scroll-padding-top: calc(52px + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

@media (max-width: 640px) {
	/* Phones: section links scroll sideways; the page name gives way to them. */
	.bx-subnav__links + .bx-subnav__cta,
	.bx-subnav__title + .bx-subnav__links {
		margin-left: 0;
	}

	.bx-subnav__title {
		display: none;
	}

	.bx-subnav__inner {
		width: auto;
		margin-inline: 0;
		padding-inline: var(--gutter);
		gap: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Carton lines ripple under the pointer (hero bars, strength switcher).
   The lines are drawn one ripple period longer than shown, so drifting by
   exactly one period loops without a seam.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.bx-range__link .bx-wave > g,
	.bx-strengths__item a .bx-wave > g {
		transition: transform 1.6s var(--ease);
	}

	.bx-range__link:hover .bx-wave > g,
	.bx-range__link:focus-visible .bx-wave > g,
	.bx-strengths__item a:hover .bx-wave > g,
	.bx-strengths__item a:focus-visible .bx-wave > g {
		transform: translateX(-128px);
	}
}

/* --------------------------------------------------------------------------
   Reveals, once, as each piece arrives on screen
   -------------------------------------------------------------------------- */

/* How-to steps: the rule draws left to right. The steps themselves are always readable. */
.bx-steps {
	position: relative;
	border-top: 0 !important;
}

.bx-steps::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ink);
	transform-origin: left center;
}

/* Screen only: printing a page never waits for a scroll. */
@media screen and (prefers-reduced-motion: no-preference) {
	/* Shelf: products settle onto the line, then their strength mark draws in. */
	.bx-shelf__image img {
		transition: transform 0.75s var(--ease), opacity 0.5s var(--ease);
		transition-delay: calc(var(--i, 0) * 80ms);
	}

	.bx-shelf__image::after {
		transform-origin: left center;
		transition: transform 0.5s var(--ease) calc(var(--i, 0) * 80ms + 0.35s);
	}

	/* On the Products page the shelf is the page's main content: never hidden. */
	.bx-js:not(.bx-no-reveal) .bx-shelf:not(.is-revealed):not(.bx-products--index *) .bx-shelf__image img {
		opacity: 0;
		transform: translateY(-18px);
	}

	.bx-js:not(.bx-no-reveal) .bx-shelf:not(.is-revealed):not(.bx-products--index *) .bx-shelf__image::after {
		transform: scaleX(0);
	}

	/* Arriving by page transition: show the shelf at rest so the photo can land in place. */
	.bx-instant .bx-shelf__image img,
	.bx-instant .bx-shelf__image::after {
		transition: none !important;
	}

	/* Clinical charts: bars grow from the baseline, values follow. */
	.bx-chart__bar {
		transform-origin: bottom center;
		transition: transform 0.6s var(--ease);
	}

	.bx-chart__bar--comparator {
		transition-delay: 0.06s;
	}

	.bx-chart__val {
		transition: opacity 0.25s var(--ease) 0.35s;
	}

	.bx-js:not(.bx-no-reveal) .bx-chart__panel:not(.is-revealed) .bx-chart__bar {
		transform: scaleY(0);
	}

	.bx-js:not(.bx-no-reveal) .bx-chart__panel:not(.is-revealed) .bx-chart__val {
		opacity: 0;
	}

	/* Duration of effect: the time axis fills from day 0. */
	.bx-scale__plot {
		transition: clip-path 0.8s var(--ease);
	}

	.bx-js:not(.bx-no-reveal) .bx-scale:not(.is-revealed) .bx-scale__plot {
		clip-path: inset(0 100% 0 0);
	}

	/* Steps: only the rule draws. */
	.bx-steps::before {
		transition: transform 0.6s var(--ease);
	}

	.bx-js:not(.bx-no-reveal) .bx-steps:not(.is-revealed)::before {
		transform: scaleX(0);
	}

	/* Mobile menu: items arrive in reading order. */
	.bx-nav .is-menu-open .wp-block-navigation__container > li {
		animation: bx-menu-item 0.45s var(--ease) both;
		animation-delay: calc(var(--n, 0) * 45ms + 60ms);
	}

	.bx-nav .is-menu-open .wp-block-navigation__container > li:nth-child(2) { --n: 1; }
	.bx-nav .is-menu-open .wp-block-navigation__container > li:nth-child(3) { --n: 2; }
	.bx-nav .is-menu-open .wp-block-navigation__container > li:nth-child(4) { --n: 3; }
	.bx-nav .is-menu-open .wp-block-navigation__container > li:nth-child(5) { --n: 4; }
	.bx-nav .is-menu-open .wp-block-navigation__container > li:nth-child(6) { --n: 5; }

	@keyframes bx-menu-item {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
	}

	/* Form errors appear rather than snap in. */
	.bx-field__error {
		animation: bx-fade-in 0.25s var(--ease);
	}

	@keyframes bx-fade-in {
		from {
			opacity: 0;
			transform: translateY(-3px);
		}
	}
}

/* --------------------------------------------------------------------------
   Feedback on interaction
   -------------------------------------------------------------------------- */

/* Text links firm up their underline on hover. */
.bx-arrow-link a,
.bx-jumplinks a,
.bx-shelf__name a,
.bx-strengths__all,
.wp-block-button.is-style-outline .wp-block-button__link {
	transition: text-decoration-thickness 0.2s var(--ease), color 0.2s var(--ease);
}

.bx-arrow-link a:hover,
.bx-jumplinks a:hover,
.bx-strengths__all:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	text-decoration-thickness: 2px;
}

/* Buttons acknowledge the press. */
.wp-element-button {
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.1s ease;
}

.wp-element-button:active {
	transform: translateY(1px);
}

/* Compare table: the row and the strength column under the pointer are tinted. */
.bx-compare tbody tr td {
	transition: background-color 0.15s ease;
}

.bx-compare tbody tr:hover td {
	background-color: var(--frost);
}

.bx-compare table:has(:is(td, th):nth-child(2):hover) :is(td, th):nth-child(2),
.bx-compare table:has(:is(td, th):nth-child(3):hover) :is(td, th):nth-child(3),
.bx-compare table:has(:is(td, th):nth-child(4):hover) :is(td, th):nth-child(4),
.bx-compare table:has(:is(td, th):nth-child(5):hover) :is(td, th):nth-child(5),
.bx-compare table:has(:is(td, th):nth-child(6):hover) :is(td, th):nth-child(6) {
	background-color: var(--frost);
}

/* Contact form while sending. */
.bx-form__submit[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}

/* Reduced motion: no slide on the header or the in-page bar, they simply appear. */
@media (prefers-reduced-motion: reduce) {
	.bx-header-part,
	.bx-subnav,
	.bx-subnav.is-active {
		transition: none;
	}
}