/**
 * Zezuru Elements — Motion
 *
 * Styles for the "Zezuru: Motion" panel available on every block.
 * Loaded only on pages that use motion (see Zezel_Assets).
 *
 * Design notes
 * - Entrance animations use `transform`, parallax uses the independent
 *   `translate` property and ambient loops use `translate` / `scale` /
 *   `rotate`, so effects can be combined without overwriting each other.
 * - Hidden "before" states only apply when <html> has .zezel-js (added by a
 *   tiny inline script), so content is never hidden without JavaScript.
 * - Everything is switched off under prefers-reduced-motion.
 * - 3.0.0: micro-interactions (150–300 ms), masked / line / 3D text splits
 *   with a stagger direction, layered depth, five more scroll-linked
 *   effects and an image shimmer skeleton. UI hover timings tightened to
 *   300 ms (Standard §7: 150–400 ms for UI).
 *
 * @package Zezuru_Elements
 * @since   2.6.0
 */

/* ---------------------------------------------------------------------
 * Defaults
 * ------------------------------------------------------------------ */
.zezel-motion {
	--zezel-dur: 800ms;
	--zezel-delay: 0ms;
	--zezel-dist: 40px;
	--zezel-ease: cubic-bezier(.16, 1, .3, 1);
	--zezel-step: 90ms;
	--zezel-hl: #6c5ce7;
	--zezel-hl2: #00b894;
}

/* ---------------------------------------------------------------------
 * Entrance: "from" state per type, expressed as custom properties so the
 * same values drive the block itself or (with stagger) its children.
 * ------------------------------------------------------------------ */
[data-zezel-in="fade"]        { --zezel-t: none; }
[data-zezel-in="fade-up"]     { --zezel-t: translate3d(0, var(--zezel-dist), 0); }
[data-zezel-in="fade-down"]   { --zezel-t: translate3d(0, calc(var(--zezel-dist) * -1), 0); }
[data-zezel-in="fade-left"]   { --zezel-t: translate3d(var(--zezel-dist), 0, 0); }
[data-zezel-in="fade-right"]  { --zezel-t: translate3d(calc(var(--zezel-dist) * -1), 0, 0); }
[data-zezel-in="zoom-in"]     { --zezel-t: scale(.86); }
[data-zezel-in="zoom-out"]    { --zezel-t: scale(1.14); }
[data-zezel-in="blur-in"]     { --zezel-t: scale(1.04); --zezel-f: blur(14px); }
[data-zezel-in="flip-up"]     { --zezel-t: perspective(900px) rotateX(28deg) translate3d(0, calc(var(--zezel-dist) * .5), 0); }
[data-zezel-in="flip-left"]   { --zezel-t: perspective(900px) rotateY(-28deg); }
[data-zezel-in="rotate-in"]   { --zezel-t: rotate(-6deg) translate3d(0, var(--zezel-dist), 0); }
[data-zezel-in="skew-up"]     { --zezel-t: skewY(5deg) translate3d(0, var(--zezel-dist), 0); }
[data-zezel-in="pop"]         { --zezel-t: scale(.7); --zezel-ease: cubic-bezier(.34, 1.56, .64, 1); }
[data-zezel-in="reveal-up"]   { --zezel-t: translate3d(0, 14px, 0); --zezel-o: 1; --zezel-c: inset(100% 0 0 0); --zezel-c-to: inset(0 0 0 0); }
[data-zezel-in="reveal-left"] { --zezel-t: none; --zezel-o: 1; --zezel-c: inset(0 100% 0 0); --zezel-c-to: inset(0 0 0 0); }

/* Animated properties while entering (removed once .is-done so hover
 * effects get their own snappy timing). */
[data-zezel-in]:not([data-zezel-stagger]):not(.is-done),
[data-zezel-stagger]:not(.is-done) > * {
	transition-property: opacity, transform, filter, clip-path;
	transition-duration: var(--zezel-dur);
	transition-timing-function: var(--zezel-ease);
	transition-delay: var(--zezel-delay);
}
[data-zezel-stagger]:not(.is-done) > * {
	transition-delay: calc(var(--zezel-delay) + var(--zezel-i, 0) * var(--zezel-step));
}

/* Hidden "before" state (JS on, or an editor preview). */
:is(.zezel-js, .zezel-preview-root) [data-zezel-in]:not([data-zezel-stagger]):not(.is-in),
:is(.zezel-js, .zezel-preview-root) [data-zezel-stagger]:not(.is-in) > *,
.zezel-preview[data-zezel-in]:not([data-zezel-stagger]):not(.is-in),
.zezel-preview[data-zezel-stagger]:not(.is-in) > * {
	opacity: var(--zezel-o, 0);
	transform: var(--zezel-t, none);
	filter: var(--zezel-f, none);
	clip-path: var(--zezel-c, none);
}

/* Visible state. */
[data-zezel-in].is-in:not([data-zezel-stagger]),
[data-zezel-stagger].is-in > * {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: var(--zezel-c-to, none);
}

[data-zezel-in]:not(.is-in) { will-change: opacity, transform; }

/* ---------------------------------------------------------------------
 * Text effects
 * ------------------------------------------------------------------ */

/* Keep split/typed text invisible until motion.js has prepared it. */
.zezel-js [data-zezel-text="typing"]:not(.zezel-ready),
.zezel-js [data-zezel-text*="words"]:not(.zezel-ready),
.zezel-js [data-zezel-text*="letters"]:not(.zezel-ready),
.zezel-js [data-zezel-text="lines-mask"]:not(.zezel-ready),
.zezel-js [data-zezel-text="scramble"]:not(.zezel-ready) {
	visibility: hidden;
}

/* Typing caret */
.zezel-caret {
	display: inline-block;
	width: .08em;
	min-width: 2px;
	height: 1em;
	margin-left: .06em;
	vertical-align: -.12em;
	background: currentColor;
	animation: zezel-blink 1s steps(1) infinite;
}
.zezel-rotator { color: var(--zezel-hl); }

/* Word / letter reveal */
.zezel-split { display: inline-block; white-space: nowrap; }
.zezel-w,
.zezel-l {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, .6em, 0) rotate(2deg);
	filter: blur(6px);
	transition: opacity calc(var(--zezel-dur) * .7) var(--zezel-ease), transform calc(var(--zezel-dur) * .7) var(--zezel-ease), filter calc(var(--zezel-dur) * .7) var(--zezel-ease);
	transition-delay: calc(var(--zezel-delay) + var(--zezel-i, 0) * var(--zezel-tstep, 45ms));
}
:is([data-zezel-text="letters"], [data-zezel-text="letters-mask"], [data-zezel-text="letters-flip"]) .zezel-l { transition-delay: calc(var(--zezel-delay) + var(--zezel-i, 0) * var(--zezel-tstep, 22ms)); }
[data-zezel-text="lines-mask"] .zezel-w { transition-delay: calc(var(--zezel-delay) + var(--zezel-i, 0) * var(--zezel-tstep, 110ms)); }
.zezel-text-in .zezel-w,
.zezel-text-in .zezel-l { opacity: 1; transform: none; filter: none; }

/* 3.0.0 — masked reveals: each word (or letter) slides up from behind its
 * own mask, the classic editorial hero. Lines move together. */
.zezel-wm {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* Room for descenders and accents inside the mask. */
	padding-block: .1em .16em;
	margin-block: -.1em -.16em;
}
:is([data-zezel-text="words-mask"], [data-zezel-text="lines-mask"], [data-zezel-text="letters-mask"]) :is(.zezel-w, .zezel-l) {
	opacity: 1;
	filter: none;
	transform: translate3d(0, 112%, 0);
	transition-duration: calc(var(--zezel-dur) * .9);
}
/* 3D letter flip */
[data-zezel-text="letters-flip"] .zezel-split { perspective: 600px; }
[data-zezel-text="letters-flip"] .zezel-l {
	filter: none;
	transform: rotateX(-90deg);
	transform-origin: 50% 85%;
	backface-visibility: hidden;
}
.zezel-text-in :is(.zezel-w, .zezel-l) { transform: none; }

/* Marker highlight that sweeps in behind the text */
.zezel-hl {
	background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--zezel-hl) 42%, transparent) 58%);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size calc(var(--zezel-dur) * 1.4) var(--zezel-ease) calc(var(--zezel-delay) + 150ms);
}
.zezel-text-in .zezel-hl { background-size: 100% 100%; }

/* Flowing gradient text (pure CSS) */
[data-zezel-text="gradient"] {
	background-image: linear-gradient(100deg, var(--zezel-hl), var(--zezel-hl2), var(--zezel-hl));
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: zezel-flow 6s linear infinite;
}

/* Counter / scramble keep width stable while digits change */
[data-zezel-text="counter"],
[data-zezel-text="scramble"] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
 * Hover effects
 * ------------------------------------------------------------------ */
.zezel-hover-lift,
.zezel-hover-grow,
.zezel-hover-shrink,
.zezel-hover-glow,
.zezel-hover-tilt {
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
}
.zezel-hover-lift:hover   { transform: translate3d(0, -8px, 0); box-shadow: 0 22px 44px -18px rgba(15, 16, 32, .35); }
.zezel-hover-grow:hover   { transform: scale(1.04); }
.zezel-hover-shrink:hover { transform: scale(.97); }
.zezel-hover-glow:hover   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--zezel-hl) 50%, transparent), 0 14px 46px -8px color-mix(in srgb, var(--zezel-hl) 55%, transparent); }
.zezel-hover-tilt         { transform-style: preserve-3d; }
.zezel-hover-tilt.is-tilting { transition-duration: .12s; }

.zezel-hover-shine { position: relative; overflow: hidden; isolation: isolate; }
.zezel-hover-shine::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translate3d(-120%, 0, 0);
	transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.zezel-hover-shine:hover::before { transform: translate3d(120%, 0, 0); }

/* ---------------------------------------------------------------------
 * Ambient loops (independent transform properties; start once visible)
 * ------------------------------------------------------------------ */
:is(.zezel-loop-float, .zezel-loop-pulse, .zezel-loop-breathe, .zezel-loop-swing, .zezel-loop-spin, .zezel-loop-bounce):is(.is-in, .zezel-in-editor, :not([data-zezel-in])) {
	animation-duration: 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.zezel-loop-float:is(.is-in, .zezel-in-editor, :not([data-zezel-in]))   { animation-name: zezel-float; }
.zezel-loop-pulse:is(.is-in, .zezel-in-editor, :not([data-zezel-in]))   { animation-name: zezel-pulse; animation-duration: 2.6s; }
.zezel-loop-breathe:is(.is-in, .zezel-in-editor, :not([data-zezel-in])) { animation-name: zezel-breathe; animation-duration: 4s; }
.zezel-loop-swing:is(.is-in, .zezel-in-editor, :not([data-zezel-in]))   { animation-name: zezel-swing; animation-duration: 4.5s; transform-origin: top center; }
.zezel-loop-spin:is(.is-in, .zezel-in-editor, :not([data-zezel-in]))    { animation-name: zezel-spin; animation-duration: 24s; animation-timing-function: linear; }
.zezel-loop-bounce:is(.is-in, .zezel-in-editor, :not([data-zezel-in]))  { animation-name: zezel-bounce; animation-duration: 2.2s; }

/* ---------------------------------------------------------------------
 * Scroll-linked effects — CSS scroll-driven animations, zero JavaScript.
 * Browsers without support simply show the block normally.
 * ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	[class*="zezel-scroll-"] {
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: view();
	}
	.zezel-scroll-fade-in  { animation-name: zezel-s-fade;  animation-range: entry 0% cover 35%; }
	.zezel-scroll-scale-up { animation-name: zezel-s-scale; animation-range: entry 0% cover 40%; }
	.zezel-scroll-rise     { animation-name: zezel-s-rise;  animation-range: entry 0% cover 40%; }
	.zezel-scroll-fade-out { animation-name: zezel-s-out;   animation-range: exit 0% exit 100%; }
	.zezel-scroll-blur-out { animation-name: zezel-s-blur;  animation-range: exit 0% exit 100%; }
	/* 3.0.0 */
	.zezel-scroll-slide-left   { animation-name: zezel-s-left;   animation-range: entry 0% cover 40%; }
	.zezel-scroll-slide-right  { animation-name: zezel-s-right;  animation-range: entry 0% cover 40%; }
	.zezel-scroll-clip-up      { animation-name: zezel-s-clip;   animation-range: entry 0% cover 45%; }
	.zezel-scroll-zoom-in      { animation-name: zezel-s-zoom;   animation-range: entry 0% cover 50%; }
	.zezel-scroll-shrink-out   { animation-name: zezel-s-shrink; animation-range: exit 0% exit 100%; }
}

/* ---------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------ */
@keyframes zezel-blink   { 50% { opacity: 0; } }
@keyframes zezel-flow    { to { background-position: -220% 0; } }
@keyframes zezel-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes zezel-pulse   { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes zezel-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes zezel-swing   { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes zezel-spin    { to { rotate: 360deg; } }
@keyframes zezel-bounce  { 0%, 100% { translate: 0 0; } 30% { translate: 0 -14px; } 50% { translate: 0 0; } 65% { translate: 0 -5px; } }
@keyframes zezel-s-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes zezel-s-scale { from { opacity: .3; scale: .88; } to { opacity: 1; scale: 1; } }
@keyframes zezel-s-rise  { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
@keyframes zezel-s-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes zezel-s-blur  { from { opacity: 1; filter: blur(0); } to { opacity: .2; filter: blur(10px); } }
@keyframes zezel-s-left  { from { opacity: 0; translate: 64px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes zezel-s-right { from { opacity: 0; translate: -64px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes zezel-s-clip  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zezel-s-zoom  { from { opacity: .35; scale: 1.16; } to { opacity: 1; scale: 1; } }
@keyframes zezel-s-shrink { from { opacity: 1; scale: 1; } to { opacity: .35; scale: .9; } }

/* ---------------------------------------------------------------------
 * Accessibility: honour reduced-motion preferences completely.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.zezel-motion,
	[data-zezel-stagger] > *,
	.zezel-motion .zezel-w,
	.zezel-motion .zezel-l,
	.zezel-motion .zezel-hl {
		opacity: 1 !important;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		filter: none !important;
		clip-path: none !important;
		animation: none !important;
		transition: none !important;
		visibility: visible !important;
	}
	.zezel-motion .zezel-hl { background-size: 100% 100% !important; }
	.zezel-caret { display: none; }
	.zezel-motion .zezel-wm { overflow: visible; }
}


/* ---------------------------------------------------------------------
 * Background parallax (since 2.8.0)
 *
 * The block's own background picture or video drifts slower than the
 * page. Where the browser supports scroll-driven animations the browser
 * runs it on the compositor with no JavaScript; elsewhere motion.js
 * writes the same `translate` in one requestAnimationFrame. The layer is
 * scaled just enough that its edges never show.
 * ------------------------------------------------------------------ */
[data-zezel-bgpx] { --zezel-bgpx: 40; overflow: hidden; }
[data-zezel-bgpx] > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, img, a > img, .wp-block-media-text__media > img, .wp-block-media-text__media > video),
.zezel-hero[data-zezel-bgpx] .zezel-hero__media {
	scale: calc(1 + var(--zezel-bgpx) * .0026);
	will-change: translate;
}
.wp-block-media-text[data-zezel-bgpx] > .wp-block-media-text__media { overflow: hidden; }

@supports (animation-timeline: view()) {
	[data-zezel-bgpx] { view-timeline: --zezel-bgpx block; }
	[data-zezel-bgpx] > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, img, a > img, .wp-block-media-text__media > img, .wp-block-media-text__media > video),
	.zezel-hero[data-zezel-bgpx] .zezel-hero__media {
		animation: zezel-bgpx linear both;
		animation-timeline: --zezel-bgpx;
		animation-range: cover 0% cover 100%;
	}
}
@keyframes zezel-bgpx {
	from { translate: 0 calc(var(--zezel-bgpx) * -.12%); }
	to { translate: 0 calc(var(--zezel-bgpx) * .12%); }
}

@media (max-width: 781.98px) {
	[data-zezel-bgpx-mobile="0"] > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, img, a > img, .wp-block-media-text__media > img, .wp-block-media-text__media > video),
	.zezel-hero[data-zezel-bgpx-mobile="0"] .zezel-hero__media { animation: none; translate: none; scale: none; }
}
@media (prefers-reduced-motion: reduce) {
	[data-zezel-bgpx] > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, img, a > img, .wp-block-media-text__media > img, .wp-block-media-text__media > video),
	.zezel-hero[data-zezel-bgpx] .zezel-hero__media { animation: none !important; translate: none !important; scale: none !important; }
}


/* =====================================================================
 * 3.0.0 — Micro-interactions
 *
 * Small, fast responses (150–300 ms) to hover, press and click. On the
 * Button and Buttons blocks they act on the button links inside; on any
 * other block, on the block itself. --zezel-mi-c is the effect colour
 * (theme primary by default), --zezel-mi-c2 an optional text colour.
 * ripple, magnetic and confirm get a little help from motion.js; the
 * rest are pure CSS.
 * ===================================================================== */
.zezel-mi {
	--zezel-mi-c: var(--wp--preset--color--primary, #6c5ce7);
	--zezel-mi-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Press: a quick, tactile squeeze. */
:is(.zezel-mi-press:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-press .wp-block-button__link) {
	transition: scale .15s var(--zezel-mi-ease), box-shadow .2s var(--zezel-mi-ease), filter .2s ease;
}
:is(.zezel-mi-press:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-press .wp-block-button__link):hover { filter: brightness(1.05); }
:is(.zezel-mi-press:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-press .wp-block-button__link):active { scale: .96; }

/* Colour shift: background eases to the chosen colour. */
:is(.zezel-mi-shift:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-shift .wp-block-button__link) {
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:is(.zezel-mi-shift:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-shift .wp-block-button__link):is(:hover, :focus-visible) {
	/* !important beats colour-preset classes, which are !important themselves. */
	background-color: var(--zezel-mi-c) !important;
	border-color: var(--zezel-mi-c) !important;
}

/* Fill sweep: colour floods in from the leading edge. */
:is(.zezel-mi-fill:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-fill .wp-block-button__link) {
	box-shadow: inset 0 0 0 0 var(--zezel-mi-c);
	transition: box-shadow .3s var(--zezel-mi-ease), color .3s ease;
}
:is(.zezel-mi-fill:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-fill .wp-block-button__link):is(:hover, :focus-visible) {
	box-shadow: inset 40em 0 0 0 var(--zezel-mi-c);
}
[dir="rtl"] :is(.zezel-mi-fill:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-fill .wp-block-button__link):is(:hover, :focus-visible) {
	box-shadow: inset -40em 0 0 0 var(--zezel-mi-c);
}

/* Optional text colour on hover for shift and fill. */
:is(.zezel-mi-shift, .zezel-mi-fill)[style*="--zezel-mi-c2"]:not(.wp-block-button, .wp-block-buttons):is(:hover, :focus-visible),
:is(.wp-block-button, .wp-block-buttons):is(.zezel-mi-shift, .zezel-mi-fill)[style*="--zezel-mi-c2"] .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--zezel-mi-c2) !important;
}

/* Underline draw: links inside get an underline that draws in. */
:is(.zezel-mi-underline a, a.zezel-mi-underline) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% .075em;
	transition: background-size .3s var(--zezel-mi-ease);
}
[dir="rtl"] :is(.zezel-mi-underline a, a.zezel-mi-underline) { background-position: 100% 100%; }
:is(.zezel-mi-underline a, a.zezel-mi-underline):is(:hover, :focus-visible) { background-size: 100% .075em; }

/* Arrow nudge: a CTA arrow that slides forward on hover. */
:is(.zezel-mi-nudge:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-nudge .wp-block-button__link)::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: .45em;
	transition: translate .25s var(--zezel-mi-ease);
}
[dir="rtl"] :is(.zezel-mi-nudge:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-nudge .wp-block-button__link)::after { content: "\2190"; }
:is(.zezel-mi-nudge:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-nudge .wp-block-button__link):is(:hover, :focus-visible)::after { translate: .3em 0; }
[dir="rtl"] :is(.zezel-mi-nudge:not(.wp-block-button, .wp-block-buttons), :is(.wp-block-button, .wp-block-buttons).zezel-mi-nudge .wp-block-button__link):is(:hover, :focus-visible)::after { translate: -.3em 0; }

/* Ripple (motion.js adds the ink). */
.zezel-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.zezel-ripple {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	background: var(--zezel-mi-c2, currentColor);
	opacity: .28;
	pointer-events: none;
	scale: 0;
	animation: zezel-ripple .55s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes zezel-ripple { to { scale: 1; opacity: 0; } }

/* Magnetic (motion.js writes `translate` while the pointer is near). */
.zezel-magnet { transition: translate .4s cubic-bezier(.34, 1.56, .64, 1); }
.zezel-magnet.is-pulling { transition-duration: .12s; transition-timing-function: ease-out; }

/* Confirm: the label gives way to a drawn checkmark (motion.js). */
.zezel-confirm-host { position: relative; }
.zezel-confirm-host.is-confirmed { color: transparent !important; animation: zezel-confirm-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.zezel-confirm-host.is-confirmed > :not(.zezel-mi-done) { visibility: hidden; }
.zezel-mi-done {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	color: var(--zezel-mi-fg, currentColor);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.zezel-mi-done svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.zezel-mi-done path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.is-confirmed > .zezel-mi-done { opacity: 1; }
.is-confirmed > .zezel-mi-done path { animation: zezel-draw .3s .06s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes zezel-draw { to { stroke-dashoffset: 0; } }
@keyframes zezel-confirm-pop { 40% { scale: .95; } 100% { scale: 1; } }

/* =====================================================================
 * 3.0.0 — Layered depth
 *
 * Direct children drift at different speeds while the block crosses the
 * screen: the first child barely moves (the "back" layer), later ones
 * move more. Scroll-driven in CSS where supported; motion.js writes the
 * same `translate` elsewhere.
 * ===================================================================== */
[data-zezel-depth] { --zezel-depth: 40; }
[data-zezel-depth] > *               { --zezel-k: 1; will-change: translate; }
[data-zezel-depth] > :nth-child(1)  { --zezel-k: 0; }
[data-zezel-depth] > :nth-child(2)  { --zezel-k: .4; }
[data-zezel-depth] > :nth-child(3)  { --zezel-k: .7; }
[data-zezel-depth] > :nth-child(4)  { --zezel-k: .85; }

@supports (animation-timeline: view()) {
	[data-zezel-depth] { view-timeline: --zezel-depth block; }
	[data-zezel-depth] > * {
		animation: zezel-depth linear both;
		animation-timeline: --zezel-depth;
		animation-range: cover 0% cover 100%;
	}
}
@keyframes zezel-depth {
	from { translate: 0 calc(var(--zezel-depth) * var(--zezel-k) * 1.4px); }
	to   { translate: 0 calc(var(--zezel-depth) * var(--zezel-k) * -1.4px); }
}
@media (max-width: 781.98px) {
	[data-zezel-depth-mobile="0"] > * { animation: none; translate: none; }
}

/* =====================================================================
 * 3.0.0 — Image shimmer skeleton
 *
 * While an image inside the block loads, its frame shows a soft shimmer;
 * lazy images then fade in. Only with JavaScript (motion.js marks the
 * images), so nothing is ever hidden without it.
 * ===================================================================== */
.zezel-js [data-zezel-shimmer] :has(> img.zezel-img-wait:not(.zezel-loaded)) {
	background-color: rgba(127, 127, 127, .12);
	background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	background-size: 250% 100%;
	animation: zezel-shimmer 1.3s linear infinite;
}
.zezel-js [data-zezel-shimmer] img.zezel-img-wait:not(.zezel-loaded) { opacity: 0; }
.zezel-js [data-zezel-shimmer] img.zezel-img-wait.zezel-loaded { animation: zezel-img-in .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes zezel-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes zezel-img-in { from { opacity: 0; scale: 1.02; filter: blur(8px); } to { opacity: 1; scale: 1; filter: none; } }

/* Reduced motion: keep the feedback, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.zezel-mi,
	.zezel-mi .wp-block-button__link,
	.zezel-mi a,
	.zezel-mi::after,
	.zezel-mi .wp-block-button__link::after { transition-duration: .01ms !important; scale: none !important; translate: none !important; }
	.zezel-ripple { display: none; }
	.zezel-confirm-host.is-confirmed { animation: none; }
	.is-confirmed > .zezel-mi-done path { animation: none; stroke-dashoffset: 0; }
	[data-zezel-depth] > * { animation: none !important; translate: none !important; }
	.zezel-js [data-zezel-shimmer] :has(> img.zezel-img-wait:not(.zezel-loaded)) { animation: none; }
	.zezel-js [data-zezel-shimmer] img.zezel-img-wait.zezel-loaded { animation: none; }
}