/**
 * mb-2026.css — the 2026 quality bar (Sprint "2026 Polish", ticket A1.3).
 * Deploys to: wp-content/themes/momboss-sparkle/assets/css/mb-2026.css
 *
 * Two things live here:
 *   1. SCROLL CHOREOGRAPHY — staggered fade/rise reveals driven by mb-motion.js.
 *   2. MICRO-INTERACTIONS — the card lift / shadow-bloom / focus rings that were
 *      silently dead sitewide (a wp-custom-css kill switch,
 *      `.mb-product-card{opacity:1!important;transform:none!important}`, beat every
 *      non-important :hover transform in the theme). That kill switch is removed;
 *      these rules are the intended behaviour, restored and tightened.
 *
 * LIGHT token system only: bg #FFF5F7 · ink #212121 · Playfair + Poppins ·
 * pink #E91E63 · gold var(--mb-rose-gold,#B76E79). transform/opacity only. Reduced-motion honoured.
 * Served raw (data-no-optimize) + ?v=filemtime so LiteSpeed can't stale-cache it.
 */

/* ==========================================================================
   0. THE LIVING SLIM BAND (A1.2)
   The search bar is the hero; the band breathes around it. ~108px desktop.

   Architecture notes (these are load-bearing, not decoration):
   - CLIP INVERSION: <section class="mb-hero"> keeps `overflow:visible`, because
     the category dropdown MENU escapes the band and wp-custom-css already hangs
     decorative radials off .mb-hero::before/::after. ALL clipping happens on the
     injected .mb-band child instead. Never put overflow:hidden on the section.
   - OCCLUSION: .mb-hero__content sits at z-index 3 and the search pill is forced
     opaque white, so no drifting particle can ever cross the search field.
     Legibility is not left to chance.
   - DEFERENCE: when the pill takes focus, the band calms itself (:has()).
   - Mobile KEEPS the motion. Killing the fx layer under 600px would delete the
     wow on the device that matters most; we reduce particle count instead.
   ========================================================================== */

.mb-hero.mb-hero--food,
.mb-hero.mb-hero--events,
.mb-hero.mb-hero--services,
.mb-hero.mb-hero--style,
.mb-hero.mb-hero--ambition {
	/* Beats wp-custom-css `.mb-hero{padding:40px 0 30px!important}` (0,2,0 + important). */
	padding: 16px 0 14px !important;
	position: relative;
	background: #FFF5F7;

	/* STACKING — load-bearing, do not "simplify".
	   The category dropdown MENU (z-index:10002) lives inside this section and
	   must paint OVER the page sections below it. .mb-hero is already a stacking
	   context (wp-custom-css sets isolation:isolate on it), so the menu's z-index
	   is resolved INSIDE this band and can never escape on its own — verified in
	   the live DOM: elementFromPoint over the open menu returned .mb-fb-stories-zone,
	   i.e. the section below was painting on top of it.
	   Four competing .mb-hero z-index rules exist (100 / 200 / 9000 / 100 across
	   the theme + Customizer) and resolved to 1 in practice, so this is pinned
	   with !important rather than left to the cascade. */
	z-index: 9000 !important;
}

/* Search bar on top, category bullet BELOW it — founder ruling 16 Jul:
   "i do not want the search bar or the category bullet to be next to each other
   ... the bullet like it renders on the food court is the design".
   An earlier one-row flex version won ~44px of height but was rejected. The
   stacked layout costs height, so the gap is tightened instead of the layout
   being changed. */
.mb-hero--food .mb-hero__content,
.mb-hero--events .mb-hero__content,
.mb-hero--services .mb-hero__content,
.mb-hero--style .mb-hero__content,
.mb-hero--ambition .mb-hero__content {
	position: relative;
	z-index: 3;
	text-align: center;
}

.mb-hero--food .mb-hero__search,
.mb-hero--events .mb-hero__search,
.mb-hero--services .mb-hero__search,
.mb-hero--style .mb-hero__search,
.mb-hero--ambition .mb-hero__search {
	margin-bottom: 10px !important;   /* was 32 — the band's whole height budget */
	background: #fff;                 /* OCCLUSION: opaque, never translucent */
	box-shadow: 0 6px 22px rgba(33, 33, 33, 0.10);
}

.mb-hero--food .mb-mall-catdrop,
.mb-hero--events .mb-mall-catdrop,
.mb-hero--services .mb-mall-catdrop,
.mb-hero--style .mb-mall-catdrop,
.mb-hero--ambition .mb-mall-catdrop {
	margin: 0 auto !important;        /* was 14px auto 0 */
}

/* ---- The band layer (injected; aria-hidden) ---- */
.mb-band {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;              /* the ONLY clip in the system */
	pointer-events: none;
}

/* Art slot: real photography / design-engine art. */
.mb-band__art {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 55%;
	opacity: 0;                    /* fades up when art actually loads */
	transition: opacity 600ms ease;
	/* MASK FLOOR: art ramps down toward the pill but never to zero (18% floor),
	   so it reads as an authored slice rather than a fade-out. */
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.18) 100%);
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.18) 100%);
}

.mb-band.has-art .mb-band__art { opacity: 1; }

/* Slow Ken-Burns on the art — transform only. */
.mb-band.has-art .mb-band__art {
	animation: mb-band-kb 26s ease-in-out infinite alternate;
}

@keyframes mb-band-kb {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.10) translate3d(-1.2%, 0, 0); }
}

/* Drift: oversized gradient plate, transform-composited (no background-position).
   GEOMETRY IS LOAD-BEARING. Radial positions are percentages of THIS element, not
   of the band, so the overhang must be small and known. At 140% wide / left:-20%
   the visible band maps to element 14%..86%, i.e. band X% ≈ element (20+X)/140.
   An earlier 190%/-30% version pushed the right-hand radial to ~137% of the band
   — entirely off-screen — which is why colour only ever appeared on the left.
   Sizes are explicit ellipses: `closest-side` on a short, wide plate collapses to
   a tiny radius and reads as a smudge. */
.mb-band__drift {
	position: absolute;
	top: -70%;
	left: -20%;
	width: 140%;
	height: 240%;
	animation: mb-band-drift 34s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes mb-band-drift {
	from { transform: translate3d(-3%, 0, 0) rotate(-0.8deg); }
	to   { transform: translate3d(3%, 0, 0) rotate(0.8deg); }
}

/* LEGIBILITY VEIL: a light stationary wash.
   Deliberately gentle. The search pill is OPAQUE white and occluded at z-index 3,
   so legibility is already guaranteed structurally — the veil only has to soften
   art at the band's right edge. An earlier heavy version (0.72 at 42% -> 0.92)
   was verified on-screen to erase the mood gradients entirely: all five bands
   rendered as the same pink smudge, and the art's 18% mask floor was wiped into
   a hard left-edge cut. Do not strengthen this without re-shooting the bands. */
.mb-band__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 245, 247, 0) 0%, rgba(255, 245, 247, 0.22) 52%, rgba(255, 245, 247, 0.52) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.30) 100%);
}

/* ---- Particles: abstract CSS shapes, never emoji ---- */
.mb-band__fx {
	position: absolute;
	inset: 0;
}

.mb-band__fx i {
	position: absolute;
	display: block;
	border-radius: 50%;
	opacity: 0;
	will-change: transform, opacity;
	animation: mb-band-rise 15s linear infinite;
}

.mb-band__fx i:nth-child(1) { left: 8%;  width: 7px;  height: 7px;  animation-delay: 0s;    animation-duration: 15s; }
.mb-band__fx i:nth-child(2) { left: 21%; width: 4px;  height: 4px;  animation-delay: -3.5s; animation-duration: 18s; }
.mb-band__fx i:nth-child(3) { left: 37%; width: 9px;  height: 9px;  animation-delay: -7s;   animation-duration: 13s; }
.mb-band__fx i:nth-child(4) { left: 58%; width: 5px;  height: 5px;  animation-delay: -10s;  animation-duration: 17s; }
.mb-band__fx i:nth-child(5) { left: 74%; width: 6px;  height: 6px;  animation-delay: -5s;   animation-duration: 20s; }
.mb-band__fx i:nth-child(6) { left: 89%; width: 4px;  height: 4px;  animation-delay: -12s;  animation-duration: 16s; }

@keyframes mb-band-rise {
	0%   { transform: translate3d(0, 120%, 0) scale(0.7); opacity: 0; }
	18%  { opacity: 0.65; }
	78%  { opacity: 0.5; }
	100% { transform: translate3d(14px, -60%, 0) scale(1); opacity: 0; }
}

/* ---- Mood: FOOD COURT — hunger / warm rising spice motes ---- */
.mb-hero--food .mb-band__drift {
	background:
		radial-gradient(ellipse 34% 130% at 30% 50%, rgba(255, 164, 96, 0.80), transparent 70%),
		radial-gradient(ellipse 30% 120% at 50% 50%, rgba(255, 206, 122, 0.72), transparent 72%),
		radial-gradient(ellipse 34% 125% at 71% 50%, rgba(233, 30, 99, 0.26), transparent 72%);
}
.mb-hero--food .mb-band { background-image: linear-gradient(120deg, #FFE7D3 0%, #FFD2B0 55%, #FBE3B4 100%); } /* fallback: visible until real art lands */
.mb-hero--food .mb-band__fx i { background: radial-gradient(circle, rgba(255, 176, 92, 0.95), rgba(255, 176, 92, 0)); }

/* ---- Mood: EVENTS — celebration / confetti (rect + spin) ---- */
.mb-hero--events .mb-band__drift {
	background:
		radial-gradient(ellipse 32% 130% at 30% 50%, rgba(233, 30, 99, 0.52), transparent 70%),
		radial-gradient(ellipse 30% 120% at 50% 50%, rgba(212, 175, 55, 0.66), transparent 72%),
		radial-gradient(ellipse 34% 125% at 71% 50%, rgba(255, 107, 157, 0.46), transparent 72%);
}
.mb-hero--events .mb-band { background-image: linear-gradient(120deg, #FFE3F1 0%, #FCD9EC 48%, #FBEFD0 100%); } /* fallback: visible until real art lands */
.mb-hero--events .mb-band__fx i {
	border-radius: 1px;
	background: #E91E63;
	animation-name: mb-band-confetti;
}
.mb-hero--events .mb-band__fx i:nth-child(2n) { background: var(--mb-rose-gold,#B76E79); }
.mb-hero--events .mb-band__fx i:nth-child(3n) { background: #FF6B9D; }

@keyframes mb-band-confetti {
	0%   { transform: translate3d(0, 120%, 0) rotate(0deg);      opacity: 0; }
	20%  { opacity: 0.8; }
	80%  { opacity: 0.55; }
	100% { transform: translate3d(18px, -60%, 0) rotate(420deg); opacity: 0; }
}

/* ---- Mood: SERVICES — trust / calm, slower + fewer ---- */
.mb-hero--services .mb-band__drift {
	background:
		radial-gradient(ellipse 34% 130% at 30% 50%, rgba(186, 148, 210, 0.50), transparent 70%),
		radial-gradient(ellipse 30% 120% at 50% 50%, rgba(233, 30, 99, 0.20), transparent 72%),
		radial-gradient(ellipse 34% 125% at 71% 50%, rgba(146, 168, 226, 0.38), transparent 72%);
	animation-duration: 48s; /* calmer than the rest */
}
.mb-hero--services .mb-band { background-image: linear-gradient(120deg, #FFF0F5 0%, #F5E9F5 55%, #EDE7F6 100%); } /* fallback: visible until real art lands */
.mb-hero--services .mb-band__fx i {
	background: radial-gradient(circle, rgba(233, 30, 99, 0.5), rgba(233, 30, 99, 0));
	animation-duration: 24s;
}
.mb-hero--services .mb-band__fx i:nth-child(n+5) { display: none; } /* deliberately sparse */

/* ---- Mood: FASHION & BEAUTY — creativity / drifting petals ---- */
.mb-hero--style .mb-band__drift {
	background:
		radial-gradient(ellipse 32% 130% at 30% 50%, rgba(233, 30, 99, 0.46), transparent 70%),
		radial-gradient(ellipse 30% 120% at 50% 50%, rgba(168, 122, 232, 0.56), transparent 72%),
		radial-gradient(ellipse 34% 125% at 71% 50%, rgba(120, 150, 255, 0.44), transparent 72%);
}
.mb-hero--style .mb-band { background-image: linear-gradient(120deg, #FFE0EC 0%, #F3D9F8 46%, #DCE3FF 100%); } /* fallback: visible until real art lands */
.mb-hero--style .mb-band__fx i {
	border-radius: 60% 5% 60% 5%;
	background: linear-gradient(135deg, rgba(233, 30, 99, 0.55), rgba(255, 107, 157, 0.25));
	animation-name: mb-band-petal;
}

@keyframes mb-band-petal {
	0%   { transform: translate3d(0, 120%, 0) rotate(0deg);     opacity: 0; }
	20%  { opacity: 0.7; }
	80%  { opacity: 0.45; }
	100% { transform: translate3d(-22px, -60%, 0) rotate(180deg); opacity: 0; }
}

/* ---- Mood: AD CENTRE — ambition / commerce (confident pink -> gold) ---- */
.mb-hero--ambition .mb-band__drift {
	background:
		radial-gradient(ellipse 32% 130% at 30% 50%, rgba(233, 30, 99, 0.50), transparent 70%),
		radial-gradient(ellipse 30% 120% at 50% 50%, rgba(212, 175, 55, 0.72), transparent 72%),
		radial-gradient(ellipse 34% 125% at 71% 50%, rgba(255, 150, 90, 0.34), transparent 72%);
	animation-duration: 30s; /* a touch more drive than the rest */
}
.mb-hero--ambition .mb-band { background-image: linear-gradient(120deg, #FFE6EF 0%, #FCDCE8 45%, #F7E7C4 100%); } /* fallback: visible until real art lands */
.mb-hero--ambition .mb-band__fx i {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.85), rgba(233, 30, 99, 0.35));
	animation-name: mb-band-ascend;
}

/* Ambition rises straighter and cleaner than the other moods. */
@keyframes mb-band-ascend {
	0%   { transform: translate3d(0, 120%, 0) scale(0.75); opacity: 0; }
	22%  { opacity: 0.7; }
	80%  { opacity: 0.45; }
	100% { transform: translate3d(4px, -60%, 0) scale(1.05); opacity: 0; }
}

/* ---- ATTENTION DEFERENCE: the band calms when you engage the search. ---- */
@supports selector(:has(*)) {
	.mb-hero--food:has(.mb-hero__search:focus-within) .mb-band__fx,
	.mb-hero--events:has(.mb-hero__search:focus-within) .mb-band__fx,
	.mb-hero--services:has(.mb-hero__search:focus-within) .mb-band__fx,
	.mb-hero--style:has(.mb-hero__search:focus-within) .mb-band__fx,
	.mb-hero--ambition:has(.mb-hero__search:focus-within) .mb-band__fx {
		opacity: 0.25;
		transition: opacity 320ms ease;
	}

	.mb-hero--food:has(.mb-hero__search:focus-within) .mb-band__drift,
	.mb-hero--events:has(.mb-hero__search:focus-within) .mb-band__drift,
	.mb-hero--services:has(.mb-hero__search:focus-within) .mb-band__drift,
	.mb-hero--style:has(.mb-hero__search:focus-within) .mb-band__drift,
	.mb-hero--ambition:has(.mb-hero__search:focus-within) .mb-band__drift {
		animation-play-state: paused;
	}
}

/* ---- Mobile: KEEP the motion, spend less of it. ---- */
@media (max-width: 600px) {
	.mb-hero.mb-hero--food,
	.mb-hero.mb-hero--events,
	.mb-hero.mb-hero--services,
	.mb-hero.mb-hero--style,
	.mb-hero.mb-hero--ambition {
		padding: 12px 0 10px !important;
	}

	.mb-hero--food .mb-hero__search,
	.mb-hero--events .mb-hero__search,
	.mb-hero--services .mb-hero__search,
	.mb-hero--style .mb-hero__search,
	.mb-hero--ambition .mb-hero__search {
		margin-bottom: 8px !important;
	}

	/* Fewer particles, not zero. */
	.mb-band__fx i:nth-child(n+4) { display: none; }

	/* Art leans lighter so the pill always wins on a small screen. */
	.mb-band__veil {
		background:
			linear-gradient(90deg, rgba(255, 245, 247, 0.30) 0%, rgba(255, 245, 247, 0.88) 55%, rgba(255, 245, 247, 0.95) 100%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.7) 100%);
	}
}

/* ==========================================================================
   1. SCROLL CHOREOGRAPHY
   The hidden state is gated behind html.mb-js, which ONLY mb-motion.js sets.
   No JS / no IntersectionObserver / reduced-motion => nothing is ever hidden.
   ========================================================================== */

html.mb-js .mb-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--mb-d, 0ms);
	will-change: transform, opacity;
}

html.mb-js .mb-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Once revealed, stop promoting the layer — keeps long pages cheap. */
html.mb-js .mb-reveal.is-in {
	will-change: auto;
}

/* ==========================================================================
   2. MICRO-INTERACTIONS
   ========================================================================== */

/* --- Cards: lift + shadow-bloom (restored) --- */
.mb-product-card,
.mb-store-card,
.mb-blog-card,
.mb-preview-card,
.mb-universe-card {
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mb-product-card:hover,
.mb-blog-card:hover,
.mb-preview-card:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 10px 28px rgba(233, 30, 99, 0.14);
}

.mb-store-card:hover,
.mb-universe-card:hover {
	transform: translate3d(0, -4px, 0);
	box-shadow: 0 14px 38px rgba(233, 30, 99, 0.16);
}

/* Press feedback: the card acknowledges the tap before navigation. */
.mb-product-card:active,
.mb-store-card:active,
.mb-blog-card:active,
.mb-preview-card:active,
.mb-universe-card:active {
	transform: translate3d(0, -1px, 0) scale(0.995);
	transition-duration: 90ms;
}

/* --- Buttons: press/spring feedback --- */
.mb-hero__search button[type="submit"],
.mb-store-card__cta,
.mb-store-card__btn,
.mb-odo-btn,
.mb-dhero__cta {
	transition:
		transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 160ms ease,
		background-color 160ms ease;
}

.mb-hero__search button[type="submit"]:hover,
.mb-store-card__cta:hover,
.mb-odo-btn:hover {
	transform: translate3d(0, -1px, 0);
}

.mb-hero__search button[type="submit"]:active,
.mb-store-card__cta:active,
.mb-store-card__btn:active,
.mb-odo-btn:active {
	transform: scale(0.96);
	transition-duration: 80ms;
}

/* --- Focus rings: on-brand, keyboard-only, never clipped --- */
.mb-product-card:focus-visible,
.mb-store-card:focus-visible,
.mb-blog-card:focus-visible,
.mb-preview-card:focus-visible,
.mb-universe-card:focus-visible,
.mb-hero__search input[type="search"]:focus-visible,
.mb-hero__search button:focus-visible,
.mb-store-card__cta:focus-visible,
.mb-hp-bar__link:focus-visible {
	outline: 2px solid #E91E63;
	outline-offset: 3px;
	border-radius: 10px;
}

/* The search pill blooms when focused within — the search bar is the hero. */
.mb-hero__search:focus-within {
	box-shadow:
		0 0 0 3px rgba(233, 30, 99, 0.16),
		0 10px 30px rgba(233, 30, 99, 0.18);
	transition: box-shadow 200ms ease;
}

/* --- Media: blur-up / no layout jump --- */
.mb-product-card__image img,
.mb-store-card__banner img {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
	backface-visibility: hidden;
}

.mb-product-card:hover .mb-product-card__image img {
	transform: scale(1.05);
}

/* --- Skeleton shimmer (loading grace) --- */
.mb-skel {
	position: relative;
	overflow: hidden;
	background: #F3E7EC;
	border-radius: 10px;
}

.mb-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translate3d(-100%, 0, 0);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.62) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: mb-skel-sweep 1250ms ease-in-out infinite;
}

@keyframes mb-skel-sweep {
	to { transform: translate3d(100%, 0, 0); }
}

/* ==========================================================================
   3. REDUCED MOTION — kill everything, hide nothing.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.mb-js .mb-reveal,
	html.mb-js .mb-reveal.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* The band stays beautiful, it just stops moving: art + veil + gradient
	   remain, every animation is cancelled and the particles are removed
	   entirely (a frozen particle is just a dot). */
	.mb-band__drift,
	.mb-band__art,
	.mb-band__fx i {
		animation: none !important;
		transform: none !important;
	}

	.mb-band__fx { display: none !important; }

	.mb-product-card,
	.mb-store-card,
	.mb-blog-card,
	.mb-preview-card,
	.mb-universe-card,
	.mb-product-card:hover,
	.mb-store-card:hover,
	.mb-product-card:active,
	.mb-store-card:active {
		transform: none !important;
		transition: none !important;
	}

	.mb-product-card:hover .mb-product-card__image img {
		transform: none !important;
	}

	.mb-skel::after {
		animation: none;
	}
}