/*
 * Motion. Content the scripts show (menus, panels, tabs, accordions, dropdowns) eases in instead of
 * popping; sections below the first screen rise in as they scroll into view; press feedback on
 * every control. html.ac-motion is set after the first paint, so nothing animates on page load,
 * and none of it runs with "reduce motion".
 */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* Shown by removing [hidden]: fade + short rise (@starting-style = the style it starts from). */
	html.ac-motion :is(
		.ac-faq__a, .ac-acc__body, .ac-fgroup__body, .ac-sc__coupon-body, .ac-checks__more,
		.ac-finder__pane, .ac-rail[role="tabpanel"], .ac-auth__form, .ac-art-toc ol,
		.ac-co-login, .ac-buy__fits-more
	):not([hidden]) {
		transition: opacity 240ms var(--ac-ease-out), translate 240ms var(--ac-ease-out);
	}
	@starting-style {
		html.ac-motion :is(
			.ac-faq__a, .ac-acc__body, .ac-fgroup__body, .ac-sc__coupon-body, .ac-checks__more,
			.ac-finder__pane, .ac-rail[role="tabpanel"], .ac-auth__form, .ac-art-toc ol,
			.ac-co-login, .ac-buy__fits-more
		):not([hidden]) { opacity: 0; translate: 0 6px; }
	}

	/* Dropdown lists drop from their trigger. */
	html.ac-motion :is(.ac-select__list, [role="listbox"]):not([hidden]) {
		transform-origin: top center;
		transition: opacity 160ms ease-out, scale 160ms var(--ac-ease-out);
	}
	@starting-style {
		html.ac-motion :is(.ac-select__list, [role="listbox"]):not([hidden]) { opacity: 0; scale: 1 .96; }
	}

	/* Desktop catalog drawer: the subcategory panel slides out from the family list. */
	@media (min-width: 1280px) {
		html.ac-motion .ac-drawer.is-open .ac-panel:not([hidden]) {
			transition: opacity 200ms var(--ac-ease-out), translate 200ms var(--ac-ease-out);
		}
		@starting-style {
			html.ac-motion .ac-drawer.is-open .ac-panel:not([hidden]) { opacity: 0; translate: -12px 0; }
		}
		.ac-drawer.is-open .ac-panel .ac-sub { animation: ac-rise 260ms var(--ac-ease-out) both; }
		.ac-drawer.is-open .ac-panel .ac-sub:nth-child(2) { animation-delay: 20ms; }
		.ac-drawer.is-open .ac-panel .ac-sub:nth-child(3) { animation-delay: 40ms; }
		.ac-drawer.is-open .ac-panel .ac-sub:nth-child(4) { animation-delay: 60ms; }
		.ac-drawer.is-open .ac-panel .ac-sub:nth-child(5) { animation-delay: 80ms; }
		.ac-drawer.is-open .ac-panel .ac-sub:nth-child(n+6) { animation-delay: 100ms; }
	}
	/* Family rows: the highlight slides with the pointer instead of jumping. */
	.ac-drawer__family { transition: background-color 120ms ease, color 120ms ease; }
	.ac-drawer__family .ac-drawer__tile { transition: background-color 120ms ease, color 120ms ease, transform 160ms var(--ac-ease-out); }
	.ac-drawer__family.is-active .ac-drawer__tile, .ac-drawer__family:hover .ac-drawer__tile { transform: scale(1.06); }

	/* Sections below the first screen rise in once (shell.js adds .ac-rv / .is-in). */
	.ac-rv { opacity: 0; translate: 0 24px; transition: opacity 600ms var(--ac-ease-out), translate 600ms var(--ac-ease-out); }
	.ac-rv.is-in { opacity: 1; translate: none; }

	/* Press feedback on every control (buttons already scale in base.css). */
	:is(.ac-catbar__item, .ac-catbar__service, .ac-util, .ac-chip, .ac-arrow, .ac-sub, .ac-drawer__family, .ac-offers__tab, .ac-tabs-line [role="tab"], .ac-finder__tab, .ac-faq__q, .ac-acc__head, .ac-service, .ac-kon-quick__item, .ac-brands__item, .ac-cat, .ac-post, .ac-bcard, .ac-acct-nav a, .ac-sc__up-add, .ac-stepper button) {
		transition-property: background-color, border-color, color, box-shadow, transform, opacity;
		transition-duration: 160ms;
		transition-timing-function: ease;
	}
	:is(.ac-catbar__item, .ac-catbar__service, .ac-util, .ac-chip, .ac-offers__tab, .ac-tabs-line [role="tab"], .ac-finder__tab, .ac-sc__up-add, .ac-stepper button):active { transform: scale(.97); }
	:is(.ac-sub, .ac-service, .ac-kon-quick__item, .ac-brands__item, .ac-drawer__family):active { transform: scale(.985); }

	/* Hover lift on content tiles. */
	:is(.ac-cat, .ac-service, .ac-kon-quick__item, .ac-brands__item):hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-lg); }
	.ac-post__media img, .ac-bcard img, .ac-cat__img, .ac-offer__img { transition: transform 500ms var(--ac-ease-out); }
	:is(.ac-post, .ac-bcard):hover img, .ac-cat:hover .ac-cat__img { transform: scale(1.04); }

	/* Chevrons and arrows answer the hover. */
	:is(.ac-pdp__link, .ac-art-read a, .ac-kon-answers a, .ac-service, .ac-kon-quick__item) .ac-icon:last-child { transition: transform 160ms ease; }
	:is(.ac-pdp__link, .ac-art-read a, .ac-kon-answers a, .ac-service, .ac-kon-quick__item):hover .ac-icon:last-child { transform: translateX(3px); }
	.ac-faq__q .ac-icon, .ac-acc__head .ac-icon, .ac-fgroup__head .ac-icon { transition: transform 200ms var(--ac-ease-out); }

	/* Images fade in as they load (lazy ones scrolled into view). */
	html.ac-motion img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
	html.ac-motion img[loading="lazy"] { transition: opacity 300ms ease; }
}

@keyframes ac-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }