/**
 * Member range — front-end crossfade.
 *
 * The `hidden` attribute is the source of truth (server-rendered, then
 * bound to the store), but two things stand between it and a plain
 * display:none. First, core's layout classes (.is-layout-flex etc.) are
 * author-level `display` rules that beat the user-agent [hidden] rule,
 * so the hide has to be `!important`. Second, display can't animate on
 * its own; `transition-behavior: allow-discrete` plus @starting-style
 * lets modern browsers fade the group out before it leaves the flow and
 * fade it in when it returns. Older browsers get an instant swap, which
 * is the correct fallback, and reduced-motion turns the fade off.
 *
 * Deliberately not an Ollie Pro animation: those fire on scroll, not on
 * state changes.
 */

.kc-member-range {
	transition: opacity 0.25s ease, display 0.25s allow-discrete;
}

.kc-member-range[hidden] {
	display: none !important;
	opacity: 0;
}

@starting-style {
	.kc-member-range:not([hidden]) {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kc-member-range {
		transition: none;
	}
}