@charset "UTF-8";
/**
 * IMPERVORA - Motion & micro-interactions (Phase 1, module 3).
 *
 * Adds ONLY what the existing lux layer lacked. It does not restate the
 * page-leave fade, section reveals, sticky-header state, or hover transitions
 * already defined in impervora-lux.css - those keep working untouched.
 *
 * VISIBILITY CONTRACT: no rule in this file hides page content by default.
 * The only pre-animation hidden states are .impervora-motion-pending and
 * .impervora-counter__value.is-counting, both applied exclusively by
 * JavaScript at observe time and both cleared by a failsafe.
 *
 * PERFORMANCE: animation is restricted to transform and opacity so every
 * effect stays on the compositor. No width/height/top/left is animated, so
 * nothing here triggers layout. will-change is applied only while an element
 * is actually animating.
 */

/* --- 1. Navigation loading indicator ---------------------------------- */

.impervora-motion-loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 2px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms linear;
}

.impervora-motion-loader__bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--imp-gold, #c6a667);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Rides the EXISTING imp-leaving class set by impervora-lux.js. */
html.imp-leaving .impervora-motion-loader,
.impervora-motion-loader.is-active {
	opacity: 1;
}

html.imp-leaving .impervora-motion-loader__bar,
.impervora-motion-loader.is-active .impervora-motion-loader__bar {
	animation: impervora-load 900ms cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

@keyframes impervora-load {

	0% {
		transform: scaleX(0);
	}

	60% {
		transform: scaleX(0.7);
	}

	100% {
		transform: scaleX(0.96);
	}
}

/* --- 2. Entrance for trust badges and counters ------------------------- */

.impervora-motion-pending {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}

.impervora-motion-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 620ms var(--imp-ease, ease),
		transform 620ms var(--imp-ease, ease);
	will-change: opacity, transform;
}

/* will-change is dropped once the transition has finished. */
.impervora-motion-done {
	will-change: auto;
}

/* --- 3. Counters ------------------------------------------------------- */

.impervora-counter {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.impervora-counter__value {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--imp-ink, #0e0e0e);
}

.impervora-counter__label {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--imp-charcoal-2, #4a4a4a);
}

/* --- 4. Floating quick actions ---------------------------------------- */

.impervora-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
}

/* Clear the existing sticky add-to-cart bar on product pages. */
.impervora-fab--raised {
	bottom: 88px;
}

.impervora-fab__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: auto;
}

.impervora-fab__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* 44px minimum touch target (WCAG 2.5.5). */
	min-height: 44px;
	padding: 9px 16px;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--imp-ink, #0e0e0e);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--imp-warm-grey, #d8d5d0);
	border-radius: 999px;
	box-shadow: var(--imp-shadow, 0 2px 12px rgba(14, 14, 14, 0.06));
	transition:
		transform 260ms var(--imp-ease, ease),
		border-color 260ms var(--imp-ease, ease);
}

.impervora-fab__item:hover,
.impervora-fab__item:focus-visible {
	color: var(--imp-ink, #0e0e0e);
	border-color: var(--imp-gold, #c6a667);
	transform: translate3d(-2px, 0, 0);
}

.impervora-fab__item:focus-visible,
.impervora-fab__top:focus-visible {
	outline: 2px solid var(--imp-gold, #c6a667);
	outline-offset: 2px;
}

.impervora-fab__glyph {
	font-size: 0.95rem;
	line-height: 1;
}

.impervora-fab__top[hidden] {
	display: none;
}

.impervora-fab__top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum touch target (WCAG 2.5.5). */
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	color: var(--imp-white, #fff);
	background: var(--imp-ink, #0e0e0e);
	border: 1px solid var(--imp-ink, #0e0e0e);
	border-radius: 50%;
	box-shadow: var(--imp-shadow, 0 2px 12px rgba(14, 14, 14, 0.06));
	transition:
		background 260ms var(--imp-ease, ease),
		transform 260ms var(--imp-ease, ease);
}

.impervora-fab__top:hover,
.impervora-fab__top:focus-visible {
	background: var(--imp-gold-deep, #b08f4e);
	border-color: var(--imp-gold-deep, #b08f4e);
	transform: translate3d(0, -2px, 0);
}

/* Collapse to glyph-only on narrow viewports so the cluster never covers
   content or forces a horizontal scroll. */
@media (max-width: 600px) {

	.impervora-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Glyph-only, but still a full 44x44 target. */
	.impervora-fab__item {
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
	}
}

/* --- 5. Loading skeletons --------------------------------------------- */

.impervora-skel {
	position: relative;
	overflow: hidden;
	background: var(--imp-warm-white, #f4f2ef);
	border-radius: var(--imp-radius-sm, 3px);
	/* Reserves its own box, so revealing real content causes no layout shift. */
	min-height: 1em;
}

.impervora-skel::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	transform: translate3d(-100%, 0, 0);
	animation: impervora-skel 1.3s infinite;
}

@keyframes impervora-skel {

	100% {
		transform: translate3d(100%, 0, 0);
	}
}

/* Async busy state shared with the module 2 wishlist. */
.impervora-busy {
	position: relative;
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 200ms linear;
}

/* --- 6. Micro-interactions -------------------------------------------- */

.impervora-fab__item,
.impervora-acc__btn,
.impervora-wish-save {
	-webkit-tap-highlight-color: transparent;
}

.impervora-acc__btn:active,
.impervora-wish-save:active,
.impervora-fab__top:active {
	transform: translate3d(0, 1px, 0);
}

/* Field focus affordance on account and insider forms. */
.impervora-acc-prefs input:focus-visible,
.impervora-acc-prefs select:focus-visible {
	outline: 2px solid var(--imp-gold, #c6a667);
	outline-offset: 1px;
}

/* --- 7. Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.impervora-motion-pending {
		opacity: 1;
		transform: none;
	}

	.impervora-motion-in,
	.impervora-fab__item,
	.impervora-fab__top,
	.impervora-busy {
		transition: none;
	}

	.impervora-motion-loader__bar,
	.impervora-skel::after {
		animation: none;
	}

	.impervora-skel::after {
		display: none;
	}

	.impervora-fab__item:hover,
	.impervora-fab__top:hover,
	.impervora-acc__btn:active {
		transform: none;
	}
}