/* Scroll motion. Only transform and opacity change, so nothing reflows. Everything is off for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html.olfx-motion [data-olfx-reveal] {
		transition: opacity .55s cubic-bezier(.2, .7, .2, 1) var(--olfx-d, 0ms), transform .55s cubic-bezier(.2, .7, .2, 1) var(--olfx-d, 0ms);
	}
	html.olfx-motion [data-olfx-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }
	html.olfx-motion [data-olfx-reveal].is-in { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
	.olfx-tabbar { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
	.olfx-tabbar.is-away, html.has-modal-open .olfx-tabbar, body:has(.wp-block-navigation__responsive-container.is-menu-open) .olfx-tabbar { transform: translateY(100%); } /* also out of the way while the menu panel is open */
}
@media (max-width: 899px) {
	.olfx-fab { transition: opacity .2s ease, transform .2s ease; }
	html.has-modal-open .olfx-fab, body:has(.wp-block-navigation__responsive-container.is-menu-open) .olfx-fab { opacity: 0; transform: scale(.8); pointer-events: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .olfx-tabbar, .olfx-fab { transition: none; } }
@media print { [data-olfx-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------- Smooth page changes, hover, press and open/close ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Soft fade and lift between pages (browsers that support cross-document view transitions; the rest load normally). */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: olfx-vt-out .16s ease both; }
	::view-transition-new(root) { animation: olfx-vt-in .34s cubic-bezier(.2, .7, .2, 1) both; }
	.olfx-tabbar { view-transition-name: olfx-tabbar; } /* the tab bar stays put while the page changes */

	html { scroll-behavior: smooth; }

	:where(a, button, summary, input, select, textarea) {
		transition-property: color, background-color, border-color, box-shadow, opacity, transform;
		transition-duration: .18s;
		transition-timing-function: ease;
	}
	.olfx-btn:active, .olfx-sidenav a:active, .olfx-trendchip:active { transform: scale(.97); }

	/* Opening and closing <details> (FAQ, resend form) where the browser supports animating to auto height. */
	:root { interpolate-size: allow-keywords; }
	details::details-content { block-size: 0; overflow: clip; transition: block-size .28s ease, content-visibility .28s allow-discrete; }
	details[open]::details-content { block-size: auto; }
}
@keyframes olfx-vt-out { to { opacity: 0; } }
@keyframes olfx-vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.olfx-course-card, .olfx-tool-card, .olfx-ingredient-card, .olfx-member-card, .olfx-help-topic { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease; }
	.olfx-course-card:hover, .olfx-tool-card:hover, .olfx-ingredient-card:hover, .olfx-member-card:hover, .olfx-help-topic:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 35, 40, .09); }
}