/**
 * Umeed Mega Mall — motion layer.
 *
 * base.css owns the three primitives ([data-umm-reveal], [data-umm-stagger]
 * and the .umm-motion-* intensity switch). This file does two further jobs:
 *
 *   1. Auto-motion. Templates that WooCommerce renders — shop, product, cart,
 *      checkout, account — are not ours to add attributes to, and hand-adding
 *      them to every partial drifts out of date. Instead the structures are
 *      named once here as a selector list, and theme.js observes the same list.
 *      The two lists MUST stay identical; check-theme.js enforces it.
 *
 *   2. Continuous polish — hover, focus and load transitions that make the
 *      catalogue feel handled rather than merely displayed.
 *
 * Everything animates transform / opacity / clip-path only, so it all stays on
 * the compositor. Every start state is gated behind .umm-js, which the head
 * boot script sets before first paint: if JavaScript never runs, nothing is
 * ever hidden and the page degrades to plain content.
 */

/* ================================================================ 1. Auto-motion
 *
 * Keep in sync with AUTO_REVEAL / AUTO_STAGGER in assets/js/theme.js.
 * ---------------------------------------------------------------------- */

/* umm-auto-motion:reveal */
.umm-js :is(
	.umm-page-header,
	.umm-shop-header,
	.umm-product__gallery,
	.umm-product__summary,
	.umm-cart__list,
	.umm-cart__summary,
	.umm-checkout__panel,
	.umm-checkout__summary,
	.umm-account-hero,
	.umm-post__media,
	.umm-post__body,
	.umm-story__body,
	.umm-contact,
	.woocommerce-tabs
) {
	opacity: 0;
	transform: translateY(var(--umm-rise));
	transition: opacity var(--umm-dur-entrance) var(--umm-ease-entrance),
		transform var(--umm-dur-entrance) var(--umm-ease-entrance);
}
/* /umm-auto-motion:reveal */

.umm-js :is(
	.umm-page-header,
	.umm-shop-header,
	.umm-product__gallery,
	.umm-product__summary,
	.umm-cart__list,
	.umm-cart__summary,
	.umm-checkout__panel,
	.umm-checkout__summary,
	.umm-account-hero,
	.umm-post__media,
	.umm-post__body,
	.umm-story__body,
	.umm-contact,
	.woocommerce-tabs
).is-revealed {
	opacity: 1;
	transform: none;
}

/* umm-auto-motion:stagger */
.umm-js :is(
	.umm-footer__grid,
	.umm-footer__menu,
	.umm-account-nav__list,
	.umm-filters__list,
	.umm-payments__list,
	.umm-product__trust,
	.umm-active-filters__list,
	.umm-brands__index
) > * {
	opacity: 0;
	transform: translateY(calc(var(--umm-rise) * 0.7));
	transition: opacity var(--umm-dur-entrance) var(--umm-ease-entrance),
		transform var(--umm-dur-entrance) var(--umm-ease-entrance);
	transition-delay: calc(var(--umm-i, 0) * var(--umm-stagger));
}
/* /umm-auto-motion:stagger */

.umm-js :is(
	.umm-footer__grid,
	.umm-footer__menu,
	.umm-account-nav__list,
	.umm-filters__list,
	.umm-payments__list,
	.umm-product__trust,
	.umm-active-filters__list,
	.umm-brands__index
).is-revealed > * {
	opacity: 1;
	transform: none;
}

/* The instant failsafe in theme.js must be able to end every one of the above
   with no transition, exactly as it can for the attribute-driven primitives. */
.umm-js .is-instant,
.umm-js .is-instant > * {
	transition: none !important;
}

/* The primitives in base.css start at opacity 0 unconditionally, so a
   JavaScript failure — a blocked bundle, a minifier that mangles it, a console
   error thrown earlier in the file — would leave the page blank. The head boot
   script sets .umm-js before first paint, so its absence is a reliable signal
   that nothing will ever arrive to reveal this content. Show it instead. */
html:not(.umm-js) [data-umm-reveal],
html:not(.umm-js) [data-umm-stagger] > * {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}

html:not(.umm-js) :is( [data-umm-reveal], [data-umm-stagger] ) .umm-section__title {
	clip-path: none !important;
}

html:not(.umm-js) :is( [data-umm-reveal], [data-umm-stagger] ) .umm-section__title::after {
	transform: none !important;
}

/* ================================================================ 2. Reveal variants
 *
 * Opt-in directions for places where a rise is the wrong gesture — a split
 * hero, a two-column story, an aside that belongs to one edge of the page.
 * ---------------------------------------------------------------------- */

[data-umm-reveal="left"] {
	transform: translateX(calc(var(--umm-rise) * -1.6));
}

[data-umm-reveal="right"] {
	transform: translateX(calc(var(--umm-rise) * 1.6));
}

[data-umm-reveal="scale"] {
	transform: translateY(calc(var(--umm-rise) * 0.6)) scale(0.965);
}

[data-umm-reveal="blur"] {
	filter: blur(9px);
	transition: opacity var(--umm-dur-entrance) var(--umm-ease-entrance),
		transform var(--umm-dur-entrance) var(--umm-ease-entrance),
		filter var(--umm-dur-entrance) var(--umm-ease-entrance);
}

[data-umm-reveal="fade"] {
	transform: none;
}

:is(
	[data-umm-reveal="left"],
	[data-umm-reveal="right"],
	[data-umm-reveal="scale"],
	[data-umm-reveal="blur"]
).is-revealed {
	transform: none;
	filter: none;
}

/* Horizontal reveals must never widen the page while they are off to one
   side, or a phone gets a stray sideways scroll. */
:is( [data-umm-reveal="left"], [data-umm-reveal="right"] ) {
	will-change: transform, opacity;
}

/* ================================================================ 3. Cards
 *
 * The lift is on a wrapper transform and the zoom on the media inside it, so
 * hovering never triggers layout — only the compositor.
 * ---------------------------------------------------------------------- */

.umm-card,
.umm-brand-tile,
.umm-cat {
	transition: transform var(--umm-dur-slow, 0.42s) var(--umm-ease-entrance),
		box-shadow var(--umm-dur-slow, 0.42s) var(--umm-ease-entrance),
		border-color var(--umm-dur-slow, 0.42s) var(--umm-ease-entrance);
}

@media ( hover: hover ) {
	.umm-card:hover,
	.umm-brand-tile:hover,
	.umm-cat:hover {
		transform: translateY(-6px);
	}

	/* Ken-burns on the product photo. Scoped to the media box, which already
	   clips its overflow, so nothing escapes the card. */
	.umm-card__media img,
	.umm-cat__media img,
	.umm-brand-tile__media img {
		transition: transform 0.9s var(--umm-ease-entrance);
	}

	.umm-card:hover .umm-card__media img,
	.umm-cat:hover .umm-cat__media img,
	.umm-brand-tile:hover .umm-brand-tile__media img {
		transform: scale(1.06);
	}
}

/* Keyboard users get the same affordance as the mouse. */
.umm-card:focus-within,
.umm-brand-tile:focus-within,
.umm-cat:focus-within {
	transform: translateY(-6px);
}

/* ================================================================ 4. Buttons and links
 * ---------------------------------------------------------------------- */

.umm-btn {
	position: relative;
	overflow: hidden;
	transition: transform var(--umm-dur-fast) var(--umm-ease-entrance),
		background-color var(--umm-dur-fast) linear,
		color var(--umm-dur-fast) linear,
		border-color var(--umm-dur-fast) linear;
}

.umm-btn:active {
	transform: translateY(1px);
}

/* A single sheen crossing the button on hover. ::after is used because the
   themed buttons already spend ::before on their fill. */
.umm-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		transparent 35%,
		rgb(255 255 255 / 0.28) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	transition: transform 0.75s var(--umm-ease-entrance);
}

@media ( hover: hover ) {
	.umm-btn:hover::after {
		transform: translateX(120%);
	}
}

/* Navigation links draw their own underline out from the centre. */
.umm-nav__link,
.umm-topbar__link,
.umm-footer__menu a {
	position: relative;
}

.umm-nav__link::after,
.umm-footer__menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.34s var(--umm-ease-entrance);
}

.umm-nav__link:hover::after,
.umm-nav__link:focus-visible::after,
.umm-nav__link[aria-current]::after,
.umm-footer__menu a:hover::after,
.umm-footer__menu a:focus-visible::after {
	transform: scaleX(1);
}

/* ================================================================ 5. Scroll progress
 *
 * A hairline of gold across the top of the viewport. Width is driven by a
 * custom property that theme.js writes inside rAF.
 * ---------------------------------------------------------------------- */

.umm-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 999;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--umm-gold, #c8a24a),
		var(--umm-gold-soft, #e2c988)
	);
	transform: scaleX(var(--umm-progress, 0));
	transform-origin: left center;
	opacity: 0;
	transition: opacity 0.3s linear;
}

.umm-progress.is-active {
	opacity: 1;
}

/* ================================================================ 6. Images
 *
 * Catalogue photography arrives over the network at unpredictable moments;
 * fading each one in on decode stops the grid from popping as it fills.
 * ---------------------------------------------------------------------- */

.umm-js img[data-umm-fade] {
	opacity: 0;
	transition: opacity 0.55s var(--umm-ease-entrance);
}

.umm-js img[data-umm-fade].is-loaded {
	opacity: 1;
}

/* ================================================================ 7. Intensity and preference
 *
 * Everything above answers to the same two switches base.css already defines,
 * plus the OS-level reduced-motion request, which always wins.
 * ---------------------------------------------------------------------- */

.umm-motion-subtle :is(
	.umm-page-header, .umm-shop-header, .umm-product__gallery,
	.umm-product__summary, .umm-cart__list, .umm-cart__summary,
	.umm-checkout__panel, .umm-checkout__summary, .umm-account-hero,
	.umm-post__media, .umm-post__body, .umm-story__body, .umm-contact,
	.woocommerce-tabs
),
.umm-motion-subtle :is(
	.umm-footer__grid, .umm-footer__menu, .umm-account-nav__list,
	.umm-filters__list, .umm-payments__list, .umm-product__trust,
	.umm-active-filters__list, .umm-brands__index
) > * {
	transform: translateY(8px);
}

.umm-motion-subtle .umm-card:hover,
.umm-motion-subtle .umm-brand-tile:hover,
.umm-motion-subtle .umm-cat:hover {
	transform: translateY(-3px);
}

.umm-motion-subtle .umm-btn::after {
	display: none;
}

.umm-motion-off :is(
	.umm-page-header, .umm-shop-header, .umm-product__gallery,
	.umm-product__summary, .umm-cart__list, .umm-cart__summary,
	.umm-checkout__panel, .umm-checkout__summary, .umm-account-hero,
	.umm-post__media, .umm-post__body, .umm-story__body, .umm-contact,
	.woocommerce-tabs
),
.umm-motion-off :is(
	.umm-footer__grid, .umm-footer__menu, .umm-account-nav__list,
	.umm-filters__list, .umm-payments__list, .umm-product__trust,
	.umm-active-filters__list, .umm-brands__index
) > * {
	opacity: 1;
	transform: none;
	transition: none;
}

.umm-motion-off .umm-card,
.umm-motion-off .umm-brand-tile,
.umm-motion-off .umm-cat,
.umm-motion-off .umm-btn::after,
.umm-motion-off .umm-progress {
	transition: none;
}

.umm-motion-off .umm-card:hover,
.umm-motion-off .umm-brand-tile:hover,
.umm-motion-off .umm-cat:hover {
	transform: none;
}

.umm-motion-off .umm-progress {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.umm-js :is(
		.umm-page-header, .umm-shop-header, .umm-product__gallery,
		.umm-product__summary, .umm-cart__list, .umm-cart__summary,
		.umm-checkout__panel, .umm-checkout__summary, .umm-account-hero,
		.umm-post__media, .umm-post__body, .umm-story__body, .umm-contact,
		.woocommerce-tabs
	),
	.umm-js :is(
		.umm-footer__grid, .umm-footer__menu, .umm-account-nav__list,
		.umm-filters__list, .umm-payments__list, .umm-product__trust,
		.umm-active-filters__list, .umm-brands__index
	) > *,
	.umm-js img[data-umm-fade] {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.umm-card,
	.umm-brand-tile,
	.umm-cat,
	.umm-btn,
	.umm-btn::after,
	.umm-nav__link::after,
	.umm-footer__menu a::after {
		transition: none;
	}

	.umm-card:hover,
	.umm-brand-tile:hover,
	.umm-cat:hover,
	.umm-card:focus-within,
	.umm-brand-tile:focus-within,
	.umm-cat:focus-within {
		transform: none;
	}

	.umm-progress {
		display: none;
	}
}