/* Motion layer: subtle, decorative only. Everything is visible without JS; reduced-motion users get none of it. */

/* 1. Fly-to-bag: the flying atomizer and the bag «breath» */
.mo-flyer { position: fixed; z-index: 300; width: 22px; height: 30px; pointer-events: none; object-fit: contain; mix-blend-mode: multiply; will-change: transform, opacity; }
.cart-link.mo-bump { animation: mo-bump .5s var(--ease); }
.cart-link.mo-bump .cart-count { animation: mo-pop .5s var(--ease); }
@keyframes mo-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 65% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes mo-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* 2. Headline words and card entrance */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mo-w > span { display: inline-block; transform: translateY(105%); animation: mo-rise .8s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes mo-rise { to { transform: none; } }
.mo-fade { opacity: 0; animation: mo-fade .7s var(--ease) forwards; animation-delay: var(--d, .4s); }
@keyframes mo-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mo-card { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.mo-card.is-in { opacity: 1; transform: none; }

/* 3. Card hover and the sliding size switch */
@media (hover: hover) {
	.pcard__media { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
	.pcard:hover .pcard__media { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); }
}
.pcard__seg.mo-seg { position: relative; isolation: isolate; }
.mo-seg .pcard__size { background: transparent; position: relative; z-index: 1; transition: color .25s; }
.mo-seg .pcard__size.is-on, .mo-seg .pcard__size[aria-pressed="true"] { background: transparent; }
.mo-seg .pcard__size:disabled { background: transparent; }
.mo-seg__thumb {
	position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; background: var(--tint-ink); border-radius: 0;
	transition: transform .35s var(--ease), width .35s var(--ease); pointer-events: none;
}
.mo-seg__thumb[hidden] { display: none; }

/* 4. Mist behind the homepage search */
.home-hero { position: relative; overflow-x: clip; isolation: isolate; }
/* the fade gives the search its own stacking context; keep its dropdown above the tags below */
.home-hero__search { position: relative; z-index: 5; }
.home-hero:focus-within { z-index: 3; }
.home-hero::before, .home-hero::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px);
	background: radial-gradient(closest-side, rgba(140,98,57,.18), rgba(140,98,57,0));
}
.home-hero::before { width: 620px; height: 340px; left: 50%; top: 42%; margin-left: -520px; animation: mo-drift-a 22s ease-in-out infinite alternate; }
.home-hero::after { width: 540px; height: 300px; left: 50%; top: 52%; margin-left: -20px; animation: mo-drift-b 26s ease-in-out infinite alternate; background: radial-gradient(closest-side, rgba(196,164,132,.20), rgba(196,164,132,0)); }
@keyframes mo-drift-a { 0% { transform: translate(-40px, -10px) scale(1); } 50% { transform: translate(60px, 20px) scale(1.15); } 100% { transform: translate(140px, -20px) scale(.95); } }
@keyframes mo-drift-b { 0% { transform: translate(40px, 10px) scale(1.05); } 50% { transform: translate(-80px, -25px) scale(.9); } 100% { transform: translate(-150px, 15px) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
	.mo-w > span, .mo-fade, .mo-card { opacity: 1 !important; transform: none !important; animation: none !important; }
	.home-hero::before, .home-hero::after { animation: none; }
}