/**
 * Auto-cycling background/motion effects — see includes/class-msd-item-effects.php.
 *
 * ARCHITECTURE: the effect never touches the content element's own box,
 * width, centering, or ::before/::after — those were already spoken for
 * (Category/Subcategory's own Background-effect-scope option uses its
 * OWN ::before, and colliding with it there was the actual bug behind
 * needing manual CSS like ".msc-fx { left: 20%; }" to re-center a
 * heading). Instead:
 *
 *   <h3 class="... msc-fx-host msc-fx-host--{slug}">
 *     <div class="msc-fx">...</div>   <-- absolutely positioned, inset:0,
 *                                          z-index:0, pointer-events:none —
 *                                          a real, separate DOM layer,
 *                                          not a pseudo-element, so it
 *                                          never fights the host's own
 *                                          background/::before/::after.
 *     <span class="...title-text">Drinks</span>   <-- untouched, z-index:1
 *   </h3>
 *
 * The host only ever gets `position:relative` (so the absolute layer has
 * something to size against) and its own text color swap — every visual
 * "fill/sweep/glow" lives entirely inside the .msc-fx child, sized to
 * exactly match whatever box the host already computed for itself
 * (inset:0 = 100% of the host, however the host's own width/centering/
 * padding CSS decided that), so it can never disagree with the host's
 * own layout.
 *
 * Trigger: .is-active is toggled on the HOST (not the layer) by
 * assets/item-effects-player.js on a real board — a TV has no pointer,
 * so :hover (kept purely as a wp-admin mouse-preview bonus) never fires
 * there.
 *
 * Every effect is driven entirely by these shared custom properties —
 * nothing here is a hardcoded color — so whichever section (Category,
 * Subcategory, Price, Product image, Product custom text) offers a
 * given effect controls it with the exact same field set:
 *   --msc-fx-bg-idle / --msc-fx-bg-active
 *   --msc-fx-text-idle / --msc-fx-text-active
 *   --msc-fx-border-idle / --msc-fx-border-active / --msc-fx-border-width
 *   --msc-fx-radius
 *   --msc-fx-shadow-idle / --msc-fx-shadow-active
 *   --msc-fx-accent-2 / --msc-fx-accent-3   (tier 2 / tier 3 only)
 *   --msc-fx-speed                          (duration multiplier)
 */

.msc-fx-host {
	position: relative;
	color: var(--msc-fx-text-idle, inherit) !important;
	transition: color calc(.3s * var(--msc-fx-speed, 1)) ease, transform calc(.3s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host.is-active, .msc-fx-host:hover {
	color: var(--msc-fx-text-active, var(--msc-fx-text-idle, inherit)) !important;
}
.msc-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: var(--msc-fx-radius, inherit);
	background: var(--msc-fx-bg-idle, transparent) !important;
	border: var(--msc-fx-border-width, 0) solid var(--msc-fx-border-idle, transparent) !important;
	box-shadow: var(--msc-fx-shadow-idle, none) !important;
	transition: background calc(.3s * var(--msc-fx-speed, 1)) ease,
		border-color calc(.3s * var(--msc-fx-speed, 1)) ease,
		box-shadow calc(.3s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host.is-active .msc-fx, .msc-fx-host:hover .msc-fx {
	background: var(--msc-fx-bg-active, var(--msc-fx-bg-idle, transparent)) !important;
	border-color: var(--msc-fx-border-active, var(--msc-fx-border-idle, transparent)) !important;
	box-shadow: var(--msc-fx-shadow-active, var(--msc-fx-shadow-idle, none)) !important;
}
/* Real content — whatever the host's own child text/markup already was
   — always wins the stacking order over the effect layer behind it. */
.msc-fx-host > :not(.msc-fx) { position: relative; z-index: 1; }

/* ================= Fill & Sweep ================= */

.msc-fx-host--sweep-diagonal .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--sweep-diagonal .msc-fx:before {
	content: ""; position: absolute; inset: 0;
	background: var(--msc-fx-bg-active, transparent);
	transform: translateX(-100%);
	transition: transform calc(.45s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--sweep-diagonal.is-active .msc-fx:before, .msc-fx-host--sweep-diagonal:hover .msc-fx:before { transform: translateX(0); }

.msc-fx-host--bar-drop .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--bar-drop .msc-fx:before {
	content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0;
	background: var(--msc-fx-bg-active, transparent);
	transition: height calc(.35s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--bar-drop.is-active .msc-fx:before, .msc-fx-host--bar-drop:hover .msc-fx:before { height: 100%; }

.msc-fx-host--corner-triangle .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--corner-triangle .msc-fx:before, .msc-fx-host--corner-triangle .msc-fx:after {
	content: ""; position: absolute; width: 22%; height: 100%; top: 0;
	background: var(--msc-fx-bg-active, transparent);
	transition: transform calc(.4s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--corner-triangle .msc-fx:before { left: 0; transform: translateX(-100%); }
.msc-fx-host--corner-triangle .msc-fx:after { right: 0; transform: translateX(100%); transition-delay: .05s; }
.msc-fx-host--corner-triangle.is-active .msc-fx:before, .msc-fx-host--corner-triangle.is-active .msc-fx:after,
.msc-fx-host--corner-triangle:hover .msc-fx:before, .msc-fx-host--corner-triangle:hover .msc-fx:after { transform: translateX(0); }

.msc-fx-host--split-vh .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--split-vh .msc-fx:before, .msc-fx-host--split-vh .msc-fx:after {
	content: ""; position: absolute; left: 0; width: 100%; height: 50%;
	background: var(--msc-fx-bg-active, transparent);
	transition: transform calc(.32s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--split-vh .msc-fx:before { top: 0; transform: translateY(-100%); }
.msc-fx-host--split-vh .msc-fx:after { bottom: 0; transform: translateY(100%); }
.msc-fx-host--split-vh.is-active .msc-fx:before, .msc-fx-host--split-vh.is-active .msc-fx:after,
.msc-fx-host--split-vh:hover .msc-fx:before, .msc-fx-host--split-vh:hover .msc-fx:after { transform: translateY(0); }

.msc-fx-host--inset-center .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--inset-center.is-active .msc-fx, .msc-fx-host--inset-center:hover .msc-fx {
	box-shadow: inset 0 0 0 2em var(--msc-fx-bg-active, transparent), var(--msc-fx-shadow-idle, none) !important;
}

.msc-fx-host--circles-corners .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--circles-corners.is-active .msc-fx, .msc-fx-host--circles-corners:hover .msc-fx { background: var(--msc-fx-bg-active, transparent) !important; }
.msc-fx-host--circles-corners .msc-fx:before, .msc-fx-host--circles-corners .msc-fx:after {
	content: ""; position: absolute; width: 22%; height: 34%; border-radius: 50%;
	background: var(--msc-fx-accent-2, var(--msc-fx-bg-active, transparent));
	transform: scale(0); transition: transform calc(.7s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--circles-corners .msc-fx:before { top: -6%; left: 6%; }
.msc-fx-host--circles-corners .msc-fx:after { bottom: -6%; right: 10%; }
.msc-fx-host--circles-corners.is-active .msc-fx:before, .msc-fx-host--circles-corners.is-active .msc-fx:after,
.msc-fx-host--circles-corners:hover .msc-fx:before, .msc-fx-host--circles-corners:hover .msc-fx:after { transform: scale(1); }

.msc-fx-host--wedge-slide .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--wedge-slide .msc-fx:before {
	content: ""; position: absolute; inset: 0; right: -30%;
	border-right: 30px solid transparent; border-bottom: 44px solid var(--msc-fx-bg-active, transparent);
	transform: translateX(-100%); transition: transform calc(.4s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--wedge-slide.is-active .msc-fx:before, .msc-fx-host--wedge-slide:hover .msc-fx:before { transform: translateX(0); }

.msc-fx-host--wedge-converge .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--wedge-converge .msc-fx:before, .msc-fx-host--wedge-converge .msc-fx:after {
	content: ""; position: absolute; inset: 0;
	border-top: 22px solid var(--msc-fx-bg-active, transparent); border-bottom: 22px solid var(--msc-fx-bg-active, transparent);
	transition: transform calc(.35s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--wedge-converge .msc-fx:before { border-right: 22px solid transparent; transform: translateX(-100%); }
.msc-fx-host--wedge-converge .msc-fx:after { border-left: 22px solid transparent; transform: translateX(100%); }
.msc-fx-host--wedge-converge.is-active .msc-fx:before, .msc-fx-host--wedge-converge:hover .msc-fx:before { transform: translateX(-32%); }
.msc-fx-host--wedge-converge.is-active .msc-fx:after, .msc-fx-host--wedge-converge:hover .msc-fx:after { transform: translateX(32%); }

.msc-fx-host--four-corners .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--four-corners .msc-fx i {
	position: absolute; width: 50%; height: 50%; background: var(--msc-fx-bg-active, transparent);
	transition: transform calc(.45s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--four-corners .msc-fx-c1 { left: 0; top: 0; transform: translate(-100%, -100%); }
.msc-fx-host--four-corners .msc-fx-c2 { right: 0; top: 0; transform: translate(100%, -100%); }
.msc-fx-host--four-corners .msc-fx-c3 { left: 0; bottom: 0; transform: translate(-100%, 100%); }
.msc-fx-host--four-corners .msc-fx-c4 { right: 0; bottom: 0; transform: translate(100%, 100%); }
.msc-fx-host--four-corners.is-active .msc-fx i, .msc-fx-host--four-corners:hover .msc-fx i { transform: translate(0, 0); }

.msc-fx-host--diagonal-wipe .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--diagonal-wipe .msc-fx:before {
	content: ""; position: absolute; width: 0; height: 0; bottom: 0; left: 0;
	border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent var(--msc-fx-bg-active, transparent) transparent;
	transition: all calc(.5s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--diagonal-wipe.is-active .msc-fx:before, .msc-fx-host--diagonal-wipe:hover .msc-fx:before { border-width: 0 0 200% 200%; }

.msc-fx-host--radial-expand .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--radial-expand .msc-fx:before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%;
	background: var(--msc-fx-bg-active, transparent); transform: translate(-50%, -50%);
	transition: width calc(.4s * var(--msc-fx-speed, 1)) ease-in-out, height calc(.4s * var(--msc-fx-speed, 1)) ease-in-out;
}
.msc-fx-host--radial-expand.is-active .msc-fx:before, .msc-fx-host--radial-expand:hover .msc-fx:before { width: 250%; height: 550%; }

.msc-fx-host--columns-rise .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--columns-rise .msc-fx i {
	position: absolute; bottom: 0; width: 25%; height: 0; background: var(--msc-fx-bg-active, transparent);
	transition: height calc(.4s * var(--msc-fx-speed, 1)) ease-in-out;
}
.msc-fx-host--columns-rise .msc-fx-c1 { left: 0; }
.msc-fx-host--columns-rise .msc-fx-c2 { left: 25%; transition-delay: calc(.05s * var(--msc-fx-speed, 1)); }
.msc-fx-host--columns-rise .msc-fx-c3 { left: 50%; transition-delay: calc(.1s * var(--msc-fx-speed, 1)); }
.msc-fx-host--columns-rise .msc-fx-c4 { left: 75%; transition-delay: calc(.15s * var(--msc-fx-speed, 1)); }
.msc-fx-host--columns-rise.is-active .msc-fx i, .msc-fx-host--columns-rise:hover .msc-fx i { height: 100%; }

.msc-fx-host--staggered-bands .msc-fx { background: var(--msc-fx-bg-idle, transparent) !important; }
.msc-fx-host--staggered-bands .msc-fx i {
	position: absolute; left: 0; width: 100%; height: 0; background: var(--msc-fx-bg-active, transparent); opacity: .5;
	transition: height calc(.4s * var(--msc-fx-speed, 1)) ease-in-out;
}
.msc-fx-host--staggered-bands .msc-fx-b1 { top: 0; }
.msc-fx-host--staggered-bands .msc-fx-b2 { bottom: 0; transition-delay: calc(.4s * var(--msc-fx-speed, 1)); }
.msc-fx-host--staggered-bands.is-active .msc-fx i, .msc-fx-host--staggered-bands:hover .msc-fx i { height: 100%; }

/* ================= Sheen & Glow ================= */

.msc-fx-host--glass-streak .msc-fx:before, .msc-fx-host--glass-streak .msc-fx:after {
	content: ""; position: absolute; top: 0; height: 100%;
	transform: translateX(-140%) skewX(-15deg);
	transition: transform calc(.7s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--glass-streak .msc-fx:before { left: 0; width: 30%; background: var(--msc-fx-accent-2, rgba(255,255,255,.5)); filter: blur(9px); opacity: .55; }
.msc-fx-host--glass-streak .msc-fx:after { left: 16%; width: 14%; background: var(--msc-fx-accent-2, rgba(255,255,255,.25)); filter: blur(3px); opacity: .3; }
.msc-fx-host--glass-streak.is-active .msc-fx:before, .msc-fx-host--glass-streak.is-active .msc-fx:after,
.msc-fx-host--glass-streak:hover .msc-fx:before, .msc-fx-host--glass-streak:hover .msc-fx:after { transform: translateX(220%) skewX(-15deg); }

.msc-fx-host--glow-reveal .msc-fx { background: var(--msc-fx-bg-idle, #111) !important; }
.msc-fx-host--glow-reveal .msc-fx:before {
	content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--msc-fx-radius, 10px) + 2px);
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	background-size: 400%; filter: blur(5px); opacity: 0;
	animation: mscFxGlowShift calc(6s * var(--msc-fx-speed, 1)) linear infinite;
	transition: opacity calc(.3s * var(--msc-fx-speed, 1)) ease-in-out;
}
.msc-fx-host--glow-reveal.is-active .msc-fx:before, .msc-fx-host--glow-reveal:hover .msc-fx:before { opacity: 1; }
@keyframes mscFxGlowShift { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }

.msc-fx-host--neon-rings .msc-fx { overflow: visible; }
.msc-fx-host--neon-rings .msc-fx:before, .msc-fx-host--neon-rings .msc-fx:after {
	content: ""; position: absolute; inset: -4px; border-radius: inherit; opacity: 0;
	border: 1.5px solid var(--msc-fx-accent-2, var(--msc-fx-border-idle, currentColor));
	animation: mscFxRingPulse calc(2s * var(--msc-fx-speed, 1)) ease-out infinite;
}
.msc-fx-host--neon-rings .msc-fx:after { animation-delay: calc(1s * var(--msc-fx-speed, 1)); }
@keyframes mscFxRingPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }

.msc-fx-host--trace-dash .msc-fx { overflow: visible; }
.msc-fx-host--trace-dash .msc-fx:before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background-image:
		linear-gradient(90deg, var(--msc-fx-accent-2, currentColor) 50%, transparent 50%),
		linear-gradient(90deg, var(--msc-fx-accent-2, currentColor) 50%, transparent 50%),
		linear-gradient(0deg, var(--msc-fx-accent-2, currentColor) 50%, transparent 50%),
		linear-gradient(0deg, var(--msc-fx-accent-2, currentColor) 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	animation: mscFxMarch calc(1.2s * var(--msc-fx-speed, 1)) linear infinite;
}
@keyframes mscFxMarch {
	to { background-position: 24px 0, -24px 100%, 0 -24px, 100% 24px; }
}

.msc-fx-host--scan-rain .msc-fx:before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--msc-fx-accent-2, rgba(0,255,0,.35)) 50%, transparent 100%);
	animation: mscFxRainScan calc(1.4s * var(--msc-fx-speed, 1)) linear infinite;
}
@keyframes mscFxRainScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

.msc-fx-host--loading-stripes .msc-fx:before {
	content: ""; position: absolute; inset: 0 0 0 -100%; width: 300%;
	background: var(--msc-fx-bg-idle, transparent) repeating-linear-gradient(60deg, transparent, transparent 10px, var(--msc-fx-accent-2, rgba(0,0,0,.15)) 10px, var(--msc-fx-accent-2, rgba(0,0,0,.15)) 20px);
	animation: mscFxLoadShift calc(1s * var(--msc-fx-speed, 1)) linear infinite;
}
@keyframes mscFxLoadShift { 0% { transform: translateX(25px); } 100% { transform: translateX(-20px); } }

/* ================= Lift & Shadow ================= */

.msc-fx-host--lift-ripple.is-active, .msc-fx-host--lift-ripple:hover { transform: translateY(-3px); }
.msc-fx-host--lift-ripple .msc-fx:after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: var(--msc-fx-bg-idle, transparent);
	transition: all calc(.4s * var(--msc-fx-speed, 1));
}
.msc-fx-host--lift-ripple.is-active .msc-fx:after, .msc-fx-host--lift-ripple:hover .msc-fx:after { transform: scale(1.4, 1.6); opacity: 0; }

.msc-fx-host--idle-pulse-glow .msc-fx {
	background: linear-gradient(90deg, var(--msc-fx-bg-idle, transparent), var(--msc-fx-accent-2, var(--msc-fx-bg-idle, transparent))) !important;
}
.msc-fx-host--idle-pulse-glow .msc-fx:before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	border: 3px solid var(--msc-fx-accent-3, var(--msc-fx-border-active, currentColor));
	box-shadow: 0 0 30px var(--msc-fx-accent-3, transparent);
	opacity: 0; transform: scale(1.08);
	transition: all calc(.3s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--idle-pulse-glow .msc-fx:after {
	content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: -1;
	border: 3px solid var(--msc-fx-accent-3, var(--msc-fx-border-active, currentColor));
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	animation: mscFxIdleRing calc(1.5s * var(--msc-fx-speed, 1)) infinite;
}
.msc-fx-host--idle-pulse-glow.is-active, .msc-fx-host--idle-pulse-glow:hover { transform: translateY(-3px); }
.msc-fx-host--idle-pulse-glow.is-active .msc-fx:before, .msc-fx-host--idle-pulse-glow:hover .msc-fx:before { opacity: 1; transform: scale(1); }
.msc-fx-host--idle-pulse-glow.is-active .msc-fx:after, .msc-fx-host--idle-pulse-glow:hover .msc-fx:after { animation: none; opacity: 0; }
@keyframes mscFxIdleRing { 0% { width: 16px; height: 16px; opacity: 1; } 100% { width: 160px; height: 160px; opacity: 0; } }

/* ================= Outline & Border ================= */

.msc-fx-host--border-draw .msc-fx:before, .msc-fx-host--border-draw .msc-fx:after {
	content: ""; position: absolute; top: 0; left: 0;
	border-color: var(--msc-fx-border-active, var(--msc-fx-border-idle, currentColor)); border-style: solid;
	transition: all calc(.35s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--border-draw .msc-fx:before { width: 0; height: 100%; border-width: 1px 0; }
.msc-fx-host--border-draw .msc-fx:after { width: 100%; height: 0; border-width: 0 1px; }
.msc-fx-host--border-draw.is-active .msc-fx:before, .msc-fx-host--border-draw:hover .msc-fx:before { width: 100%; }
.msc-fx-host--border-draw.is-active .msc-fx:after, .msc-fx-host--border-draw:hover .msc-fx:after { height: 100%; }

.msc-fx-host--corner-brackets .msc-fx { overflow: visible; }
.msc-fx-host--corner-brackets .msc-fx i {
	content: ""; position: absolute; width: 8px; height: 8px;
	border: 2px solid var(--msc-fx-border-active, var(--msc-fx-border-idle, currentColor));
	opacity: 0; transition: all calc(.4s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--corner-brackets .msc-fx-b1 { top: 0; left: 0; border-right: none; border-bottom: none; transform: translate(-8px, -8px); }
.msc-fx-host--corner-brackets .msc-fx-b2 { bottom: 0; left: 0; border-right: none; border-top: none; transform: translate(-8px, 8px); }
.msc-fx-host--corner-brackets .msc-fx-b3 { top: 0; right: 0; border-left: none; border-bottom: none; transform: translate(8px, -8px); }
.msc-fx-host--corner-brackets .msc-fx-b4 { bottom: 0; right: 0; border-left: none; border-top: none; transform: translate(8px, 8px); }
.msc-fx-host--corner-brackets.is-active .msc-fx i, .msc-fx-host--corner-brackets:hover .msc-fx i { opacity: 1; transform: translate(0, 0); }

.msc-fx-host--underline-grow .msc-fx { overflow: visible; }
.msc-fx-host--underline-grow .msc-fx:after {
	content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px;
	background: var(--msc-fx-border-active, var(--msc-fx-border-idle, currentColor));
	transform: translateX(-50%);
	transition: width calc(.3s * var(--msc-fx-speed, 1)) ease;
}
.msc-fx-host--underline-grow.is-active .msc-fx:after, .msc-fx-host--underline-grow:hover .msc-fx:after { width: 70%; }

/* ================= Shape & Motion (whole host moves — no layer needed) ================= */

.msc-fx-host--rotate-3d { transform-style: preserve-3d; }
.msc-fx-host--rotate-3d.is-active, .msc-fx-host--rotate-3d:hover { animation: mscFxRotate3d calc(.7s * var(--msc-fx-speed, 1)); }
@keyframes mscFxRotate3d { 0% { transform: rotateX(0); } 50% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } }

.msc-fx-host--pulse-scale { animation: mscFxPulseScale calc(1.6s * var(--msc-fx-speed, 1)) ease-in-out infinite; }
.msc-fx-host--pulse-scale .msc-fx { display: none; }
@keyframes mscFxPulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.msc-fx-host--wobble.is-active, .msc-fx-host--wobble:hover { animation: mscFxWobble calc(.8s * var(--msc-fx-speed, 1)); }
@keyframes mscFxWobble {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-18%) rotate(-4deg); }
	30% { transform: translateX(14%) rotate(3deg); }
	45% { transform: translateX(-10%) rotate(-2deg); }
	60% { transform: translateX(7%) rotate(1.5deg); }
	75% { transform: translateX(-4%) rotate(-1deg); }
}

.msc-fx-host--liquid-fill {
	background: linear-gradient(var(--msc-fx-bg-active, transparent) 0 0) no-repeat calc(200% - var(--msc-fx-p, 0%)) 100% / 200% var(--msc-fx-p, .2em) !important;
	transition: calc(.3s * var(--msc-fx-speed, 1)) var(--msc-fx-t, 0s), background-position calc(.3s * var(--msc-fx-speed, 1)) calc(.3s * var(--msc-fx-speed, 1) - var(--msc-fx-t, 0s));
}
.msc-fx-host--liquid-fill.is-active, .msc-fx-host--liquid-fill:hover { --msc-fx-p: 100%; --msc-fx-t: .3s; }
.msc-fx-host--liquid-fill .msc-fx { display: none; }

.msc-fx-host--criss-cross-dots .msc-fx { overflow: visible; }
.msc-fx-host--criss-cross-dots .msc-fx i {
	position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
	background: var(--msc-fx-accent-2, var(--msc-fx-border-active, currentColor));
}
.msc-fx-host--criss-cross-dots .msc-fx-d1 { left: -12px; transform: translate(-50%, -50%); }
.msc-fx-host--criss-cross-dots .msc-fx-d2 { right: -12px; transform: translate(50%, -50%); }
.msc-fx-host--criss-cross-dots.is-active .msc-fx-d1, .msc-fx-host--criss-cross-dots:hover .msc-fx-d1 { animation: mscFxCrissLeft calc(.8s * var(--msc-fx-speed, 1)) both; }
.msc-fx-host--criss-cross-dots.is-active .msc-fx-d2, .msc-fx-host--criss-cross-dots:hover .msc-fx-d2 { animation: mscFxCrissRight calc(.8s * var(--msc-fx-speed, 1)) both; }
@keyframes mscFxCrissLeft { 0% { left: -12px; } 100% { left: calc(100% + 12px); } }
@keyframes mscFxCrissRight { 0% { right: -12px; } 100% { right: calc(100% + 12px); } }

/* ================= Press & Tap (auto-cycled here, not click) ================= */

.msc-fx-host--press-3d {
	position: relative; top: 0; transition: top calc(.15s * var(--msc-fx-speed, 1));
}
.msc-fx-host--press-3d .msc-fx { display: none; }
.msc-fx-host--press-3d {
	box-shadow: 0 6px 0 var(--msc-fx-accent-2, rgba(0,0,0,.35)) !important;
}
.msc-fx-host--press-3d.is-active, .msc-fx-host--press-3d:hover {
	top: 4px; box-shadow: 0 2px 0 var(--msc-fx-accent-2, rgba(0,0,0,.35)) !important;
}

.msc-fx-host--bubbly-scale { transition: transform calc(.12s * var(--msc-fx-speed, 1)); }
.msc-fx-host--bubbly-scale .msc-fx { display: none; }
.msc-fx-host--bubbly-scale.is-active, .msc-fx-host--bubbly-scale:hover { transform: scale(.94); }