/**
 * JIGUBAP Touch — Frontend Stylesheet
 * Features Circular Crosshairs Cursor, Live Session Click/Touch Counter,
 * 1–5 Photos in Single Line or Grid, Above/Below Text Boxes,
 * 10 At-Rest Effects, and 12 Click/Touch Reaction Animations.
 */

.jbt-showcase,
.jbt-showcase *,
.jbt-showcase *::before,
.jbt-showcase *::after {
	box-sizing: border-box;
}

.jbt-showcase {
	--jbt-amp-scale: 1;
	/* Precision Circular Crosshairs Cursor (36x36, hotspot 18 18) */
	--jbt-cursor-aim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='18' cy='18' r='11' stroke='rgba(15,23,42,0.82)' stroke-width='3.6'/%3E%3Cpath d='M18 2.5v7.5M18 26v7.5M2.5 18h7.5M26 18h7.5' stroke='rgba(15,23,42,0.82)' stroke-width='3.6'/%3E%3Ccircle cx='18' cy='18' r='11' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='M18 2.5v7.5M18 26v7.5M2.5 18h7.5M26 18h7.5' stroke='%23ffffff' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='18' r='2.6' fill='%23f43f5e' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 18 18, crosshair;
	--jbt-cursor-fire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='18' cy='18' r='8.5' stroke='rgba(15,23,42,0.88)' stroke-width='3.6'/%3E%3Cpath d='M18 4.5v6.5M18 25v6.5M4.5 18h6.5M25 18h6.5' stroke='rgba(15,23,42,0.88)' stroke-width='3.6'/%3E%3Ccircle cx='18' cy='18' r='8.5' stroke='%23fde047' stroke-width='2'/%3E%3Cpath d='M18 4.5v6.5M18 25v6.5M4.5 18h6.5M25 18h6.5' stroke='%23ffffff' stroke-width='1.9'/%3E%3Ccircle cx='18' cy='18' r='3.1' fill='%23f59e0b' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 18 18, crosshair;
	position: relative;
	width: 100%;
	margin: 1.5rem 0;
	padding: 18px 8px;
	overflow: visible;
	font-family: inherit;
}

/* Intensity multipliers */
.jbt-showcase.jbt-rest-intensity-subtle {
	--jbt-amp-scale: 0.55;
}
.jbt-showcase.jbt-rest-intensity-medium {
	--jbt-amp-scale: 1;
}
.jbt-showcase.jbt-rest-intensity-strong {
	--jbt-amp-scale: 1.55;
}

.jbt-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ==========================================================================
   1. TRACK LAYOUTS: SINGLE LINE (ROW) & GRID (1–5 PHOTOS)
   ========================================================================== */

.jbt-track {
	position: relative;
	width: 100%;
	gap: var(--jbt-gap, 28px);
}

/* --- Single Line Mode --- */
.jbt-layout-line .jbt-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.jbt-align-left .jbt-track {
	justify-content: flex-start;
}
.jbt-align-center .jbt-track {
	justify-content: center;
}
.jbt-align-right .jbt-track {
	justify-content: flex-end;
}
.jbt-align-space-between .jbt-track {
	justify-content: space-between;
}
.jbt-align-space-evenly .jbt-track {
	justify-content: space-evenly;
}

.jbt-layout-line .jbt-item {
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--jbt-item-max-w, 260px);
}

.jbt-layout-line.jbt-count-1 .jbt-item {
	flex: 0 1 var(--jbt-item-max-w, 320px);
	width: 100%;
}

/* --- Grid Mode (Standard CSS Grid) --- */
.jbt-layout-grid:not(.jbt-grid-center) .jbt-track {
	display: grid;
	grid-template-columns: repeat(var(--jbt-cols-desktop, 3), minmax(0, 1fr));
	align-items: start;
	justify-items: center;
}

.jbt-layout-grid:not(.jbt-grid-center) .jbt-item {
	width: 100%;
	max-width: var(--jbt-item-max-w, none);
}

/* --- Grid Mode (Centered Incomplete Rows) --- */
.jbt-layout-grid.jbt-grid-center .jbt-track {
	--jbt-active-cols: var(--jbt-cols-desktop, 3);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.jbt-layout-grid.jbt-grid-center.jbt-align-left .jbt-track {
	justify-content: flex-start;
}
.jbt-layout-grid.jbt-grid-center.jbt-align-right .jbt-track {
	justify-content: flex-end;
}

.jbt-layout-grid.jbt-grid-center .jbt-item {
	flex: 0 0 calc((100% - (var(--jbt-active-cols) - 1) * var(--jbt-gap, 28px)) / var(--jbt-active-cols));
	width: calc((100% - (var(--jbt-active-cols) - 1) * var(--jbt-gap, 28px)) / var(--jbt-active-cols));
	max-width: var(--jbt-item-max-w, none);
}

@media (max-width: 1024px) {
	.jbt-layout-grid:not(.jbt-grid-center) .jbt-track {
		grid-template-columns: repeat(var(--jbt-cols-tablet, 2), minmax(0, 1fr));
	}
	.jbt-layout-grid.jbt-grid-center .jbt-track {
		--jbt-active-cols: var(--jbt-cols-tablet, 2);
	}
}

@media (max-width: 767px) {
	.jbt-layout-grid:not(.jbt-grid-center) .jbt-track {
		grid-template-columns: repeat(var(--jbt-cols-mobile, 1), minmax(0, 1fr));
	}
	.jbt-layout-grid.jbt-grid-center .jbt-track {
		--jbt-active-cols: var(--jbt-cols-mobile, 1);
	}

	.jbt-layout-line.jbt-mobile-wrap .jbt-track {
		flex-wrap: wrap;
	}
	.jbt-layout-line.jbt-mobile-wrap .jbt-item {
		flex: 1 1 calc(50% - var(--jbt-gap, 20px));
		min-width: 145px;
	}

	.jbt-layout-line.jbt-mobile-scroll .jbt-track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 16px 8px 20px;
	}
	.jbt-layout-line.jbt-mobile-scroll .jbt-item {
		flex: 0 0 min(74vw, 240px);
		scroll-snap-align: center;
	}

	.jbt-layout-line.jbt-mobile-shrink .jbt-track {
		flex-wrap: nowrap;
		gap: min(var(--jbt-gap, 16px), 10px);
	}
}

/* ==========================================================================
   2. ITEM CARD, SESSION CLICK COUNTER & ABOVE / BELOW TEXT BOXES
   ========================================================================== */

.jbt-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: var(--jbt-card-bg, transparent);
	padding: var(--jbt-card-pad, 0px);
	border-radius: var(--jbt-card-radius, 24px);
	border: var(--jbt-card-border-w, 0px) solid var(--jbt-card-border-c, transparent);
	transition: z-index 0s;
}

.jbt-item.is-reacting {
	z-index: 30;
}

/* --- Session Click / Touch Counter (Below Image) --- */
.jbt-counter-row {
	position: relative;
	z-index: 8;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 11px;
	pointer-events: none;
}

.jbt-counter-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 5px 13px;
	border-radius: 9999px;
	background: var(--jbt-cnt-bg, #eef2ff);
	border: 1px solid var(--jbt-cnt-border, #c7d2fe);
	color: var(--jbt-cnt-color, #1e293b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
	will-change: transform;
	transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jbt-counter-pill.has-clicks {
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.14);
}

.jbt-counter-pill.is-zero-hidden:not(.has-clicks) {
	opacity: 0;
	transform: scale(0.85);
}

.jbt-counter-icon {
	font-size: 13px;
	line-height: 1;
}

.jbt-counter-num-wrap {
	display: inline-flex;
	overflow: hidden;
	align-items: center;
}

.jbt-counter-num {
	display: inline-block;
	font-weight: 800;
	color: var(--jbt-cnt-accent, #4f46e5);
	font-variant-numeric: tabular-nums;
	will-change: transform, opacity;
}

.jbt-counter-label {
	opacity: 0.85;
	font-weight: 600;
}

/* --- Above & Below Text Boxes --- */
.jbt-text-box {
	position: relative;
	z-index: 4;
	width: 100%;
	line-height: 1.45;
	word-break: break-word;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jbt-text-top {
	margin-bottom: var(--jbt-text-gap, 12px);
	text-align: var(--jbt-top-align, center);
	font-size: var(--jbt-top-size, 16px);
	font-weight: var(--jbt-top-weight, 700);
	color: var(--jbt-top-color, #0f172a);
}

.jbt-text-bottom {
	margin-top: var(--jbt-text-gap, 10px);
	text-align: var(--jbt-bottom-align, center);
	font-size: var(--jbt-bottom-size, 14px);
	font-weight: var(--jbt-bottom-weight, 400);
	color: var(--jbt-bottom-color, #475569);
}

.jbt-tb-style-boxed .jbt-text-inner {
	display: block;
	background: var(--jbt-tb-bg, #f8fafc);
	border: 1px solid var(--jbt-tb-border, #e2e8f0);
	padding: var(--jbt-tb-pad-v, 8px) var(--jbt-tb-pad-h, 14px);
	border-radius: var(--jbt-tb-radius, 12px);
}

.jbt-tb-style-pill .jbt-text-inner {
	display: inline-block;
	max-width: 100%;
	background: var(--jbt-tb-bg, #f8fafc);
	border: 1px solid var(--jbt-tb-border, #e2e8f0);
	padding: var(--jbt-tb-pad-v, 6px) calc(var(--jbt-tb-pad-h, 14px) + 4px);
	border-radius: 9999px;
}

.jbt-tb-style-glass .jbt-text-inner {
	display: block;
	background: rgba(255, 255, 255, 0.68);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
	padding: var(--jbt-tb-pad-v, 8px) var(--jbt-tb-pad-h, 14px);
	border-radius: var(--jbt-tb-radius, 12px);
}

.jbt-animate-text .jbt-item.is-text-popping .jbt-text-top {
	transform: translateY(-4px) scale(1.04);
}
.jbt-animate-text .jbt-item.is-text-popping .jbt-text-bottom {
	transform: translateY(4px) scale(1.04);
}

/* ==========================================================================
   3. INTERACTIVE PHOTO STAGE & CIRCULAR CROSSHAIRS CURSOR
   ========================================================================== */

.jbt-stage,
.jbt-stage .jbt-rest-mover,
.jbt-stage .jbt-react-mover,
.jbt-stage .jbt-media-clip {
	cursor: var(--jbt-cursor-aim) !important;
}

.jbt-stage:active,
.jbt-stage:active .jbt-rest-mover,
.jbt-stage:active .jbt-react-mover,
.jbt-stage:active .jbt-media-clip {
	cursor: var(--jbt-cursor-fire) !important;
}

.jbt-stage {
	position: relative;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	perspective: 1100px;
	outline: none;
}

.jbt-stage:focus-visible .jbt-media-clip {
	outline: 3px solid var(--jbt-rest-color, #6366f1);
	outline-offset: 4px;
}

.jbt-rest-mover {
	position: relative;
	z-index: 3;
	width: 100%;
	transform-style: preserve-3d;
	will-change: transform;
}

.jbt-react-mover {
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	will-change: transform;
}

.jbt-media-clip {
	position: relative;
	width: 100%;
	aspect-ratio: var(--jbt-aspect, 1 / 1);
	border-radius: var(--jbt-img-radius, 20px);
	overflow: hidden;
	background: rgba(148, 163, 184, 0.12);
	box-shadow: 0 10px 26px -6px rgba(15, 23, 42, 0.16);
	transform: translateZ(0);
	transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.jbt-stage:hover .jbt-media-clip {
	box-shadow: 0 16px 34px -6px rgba(15, 23, 42, 0.24);
}

.jbt-aspect-auto .jbt-media-clip {
	aspect-ratio: auto;
}

.jbt-photo {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: var(--jbt-fit, cover);
	object-position: center;
	pointer-events: none;
	user-select: none;
}

.jbt-aspect-auto .jbt-photo {
	height: auto !important;
}

/* Over-bleed Canvas Layers */
.jbt-fx-canvas {
	position: absolute;
	left: -110px;
	top: -110px;
	width: calc(100% + 220px);
	height: calc(100% + 220px);
	pointer-events: none;
}

.jbt-fx-canvas-back {
	z-index: 1;
}

.jbt-fx-canvas-front {
	z-index: 6;
}

.jbt-dom-fx-layer {
	position: absolute;
	inset: 0;
	z-index: 7;
	overflow: visible;
	pointer-events: none;
}

.jbt-flash-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--jbt-tap-x, 50%) var(--jbt-tap-y, 50%), rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 68%);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: overlay;
}

.jbt-item.is-flashing .jbt-flash-overlay {
	animation: jbtFlashPop 460ms ease-out forwards;
}

@keyframes jbtFlashPop {
	0% { opacity: 0.9; transform: scale(0.75); }
	100% { opacity: 0; transform: scale(1.35); }
}

/* ==========================================================================
   4. AT-REST (IDLE) AMBIENT EFFECTS (10 MODES)
   ========================================================================== */

.jbt-ambient-back {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--jbt-img-radius, 20px);
	pointer-events: none;
}

.jbt-glow-aura,
.jbt-neon-halo,
.jbt-ripple-ring,
.jbt-shimmer-sweep {
	display: none;
	pointer-events: none;
}

.jbt-pause-on-react .jbt-item.is-reacting .jbt-rest-mover,
.jbt-pause-on-react .jbt-item.is-reacting .jbt-glow-aura,
.jbt-pause-on-react .jbt-item.is-reacting .jbt-ripple-ring,
.jbt-pause-on-react .jbt-item.is-reacting .jbt-shimmer-sweep {
	animation-play-state: paused !important;
}

/* --- 4.1 GLOW --- */
.jbt-rest-glow .jbt-glow-aura {
	display: block;
	position: absolute;
	inset: -6px;
	border-radius: calc(var(--jbt-img-radius, 20px) + 6px);
	background: linear-gradient(135deg, var(--jbt-rest-color, #6366f1), var(--jbt-rest-color-2, #ec4899));
	filter: blur(calc(14px * var(--jbt-amp-scale, 1)));
	opacity: 0.55;
	animation: jbtGlowBreathe var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtGlowBreathe {
	0%, 100% {
		opacity: calc(0.32 * var(--jbt-amp-scale, 1));
		transform: scale(0.96);
	}
	50% {
		opacity: min(0.95, calc(0.72 * var(--jbt-amp-scale, 1)));
		transform: scale(calc(1 + 0.055 * var(--jbt-amp-scale, 1)));
	}
}

/* --- 4.2 FLOAT --- */
.jbt-rest-float .jbt-rest-mover {
	animation: jbtFloatBob var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

.jbt-rest-float .jbt-ambient-back::after {
	content: "";
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: -14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.26) 0%, rgba(15, 23, 42, 0) 72%);
	animation: jbtFloatShadow var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtFloatBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(-11px * var(--jbt-amp-scale, 1))); }
}

@keyframes jbtFloatShadow {
	0%, 100% { transform: scale(1); opacity: 0.65; }
	50% { transform: scale(0.8); opacity: 0.3; }
}

/* --- 4.3 DRIFT --- */
.jbt-rest-drift .jbt-rest-mover {
	animation: jbtOrganicDrift calc(var(--jbt-rest-speed, 3.2s) * 1.35) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtOrganicDrift {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg) rotateY(0deg);
	}
	25% {
		transform: translate3d(calc(5px * var(--jbt-amp-scale, 1)), calc(-7px * var(--jbt-amp-scale, 1)), 0) rotateZ(calc(1.4deg * var(--jbt-amp-scale, 1))) rotateX(3deg) rotateY(-4deg);
	}
	50% {
		transform: translate3d(calc(-4px * var(--jbt-amp-scale, 1)), calc(-10px * var(--jbt-amp-scale, 1)), 0) rotateZ(calc(-1.1deg * var(--jbt-amp-scale, 1))) rotateX(-2deg) rotateY(4deg);
	}
	75% {
		transform: translate3d(calc(-6px * var(--jbt-amp-scale, 1)), calc(-3px * var(--jbt-amp-scale, 1)), 0) rotateZ(calc(0.9deg * var(--jbt-amp-scale, 1))) rotateX(2deg) rotateY(2deg);
	}
}

/* --- 4.4 RIPPLE --- */
.jbt-rest-ripple .jbt-ripple-ring {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: var(--jbt-img-radius, 20px);
	border: 2px solid var(--jbt-rest-color, #6366f1);
	box-shadow: 0 0 10px var(--jbt-rest-color, #6366f1);
	opacity: 0;
	animation: jbtRippleWave var(--jbt-rest-speed, 3.2s) cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}

.jbt-rest-ripple .jbt-ring-1 { animation-delay: 0s; }
.jbt-rest-ripple .jbt-ring-2 { animation-delay: calc(var(--jbt-rest-speed, 3.2s) * 0.33); }
.jbt-rest-ripple .jbt-ring-3 { animation-delay: calc(var(--jbt-rest-speed, 3.2s) * 0.66); }

@keyframes jbtRippleWave {
	0% {
		transform: scale(0.98);
		opacity: min(0.88, calc(0.68 * var(--jbt-amp-scale, 1)));
	}
	100% {
		transform: scale(calc(1 + 0.18 * var(--jbt-amp-scale, 1)));
		opacity: 0;
	}
}

/* --- 4.5 LIQUID --- */
.jbt-rest-liquid .jbt-photo {
	filter: var(--jbt-liquid-url);
	transform: scale(1.06);
}

/* --- 4.6 PULSE --- */
.jbt-rest-pulse .jbt-rest-mover {
	animation: jbtHeartbeatPulse var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtHeartbeatPulse {
	0%, 100% { transform: scale(1); }
	35% { transform: scale(calc(1 + 0.045 * var(--jbt-amp-scale, 1))); }
	55% { transform: scale(calc(1 + 0.015 * var(--jbt-amp-scale, 1))); }
	75% { transform: scale(calc(1 + 0.055 * var(--jbt-amp-scale, 1))); }
}

/* --- 4.7 SHIMMER --- */
.jbt-rest-shimmer .jbt-shimmer-sweep {
	display: block;
	position: absolute;
	top: -50%;
	left: -120%;
	width: 75%;
	height: 200%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.48) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(25deg);
	animation: jbtShimmerSweep var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtShimmerSweep {
	0% { left: -120%; opacity: 0; }
	15% { opacity: 1; }
	55%, 100% { left: 165%; opacity: 0; }
}

/* --- 4.8 WOBBLE --- */
.jbt-rest-wobble .jbt-rest-mover {
	transform-origin: 50% 85%;
	animation: jbtPlayfulWobble var(--jbt-rest-speed, 3.2s) ease-in-out infinite;
	animation-delay: var(--jbt-stagger, 0s);
}

@keyframes jbtPlayfulWobble {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(calc(3.2deg * var(--jbt-amp-scale, 1))); }
	75% { transform: rotate(calc(-3.2deg * var(--jbt-amp-scale, 1))); }
}

/* --- 4.9 NEON HALO --- */
.jbt-rest-neon_halo .jbt-neon-halo {
	display: block;
	position: absolute;
	inset: -4px;
	border-radius: calc(var(--jbt-img-radius, 20px) + 4px);
	overflow: hidden;
	box-shadow: 0 0 18px -2px var(--jbt-rest-color, #6366f1);
}

.jbt-rest-neon_halo .jbt-neon-halo::before {
	content: "";
	position: absolute;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(
		from 0deg,
		var(--jbt-rest-color, #6366f1),
		var(--jbt-rest-color-2, #ec4899),
		#38bdf8,
		#f59e0b,
		var(--jbt-rest-color, #6366f1)
	);
	animation: jbtSpinHalo var(--jbt-rest-speed, 3.2s) linear infinite;
}

@keyframes jbtSpinHalo {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ==========================================================================
   5. CLICK / TOUCH REACTION ACTOR ANIMATIONS
   ========================================================================== */

.jbt-react-mover.jbt-anim-exploding_bg,
.jbt-react-mover.jbt-anim-shockwave,
.jbt-react-mover.jbt-anim-fireworks {
	animation: jbtBlastPunch var(--jbt-click-dur, 900ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes jbtBlastPunch {
	0% { transform: scale(1); }
	14% { transform: scale(0.88); }
	36% { transform: scale(1.1); }
	62% { transform: scale(0.98); }
	100% { transform: scale(1); }
}

.jbt-react-mover.jbt-anim-emoji_burst,
.jbt-react-mover.jbt-anim-confetti,
.jbt-react-mover.jbt-anim-hearts {
	animation: jbtJoyPop var(--jbt-click-dur, 900ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jbtJoyPop {
	0% { transform: scale(1) rotate(0deg); }
	20% { transform: scale(0.92) rotate(-2.5deg); }
	48% { transform: scale(1.09) rotate(2.5deg); }
	74% { transform: scale(0.99) rotate(-1deg); }
	100% { transform: scale(1) rotate(0deg); }
}

.jbt-react-mover.jbt-anim-bounce,
.jbt-react-mover.jbt-anim-combo_party {
	animation: jbtElasticBounce var(--jbt-click-dur, 900ms) ease;
}

@keyframes jbtElasticBounce {
	0%   { transform: translateY(0) scale3d(1, 1, 1); }
	12%  { transform: translateY(6px) scale3d(1.12, 0.86, 1); }
	32%  { transform: translateY(-28px) scale3d(0.93, 1.09, 1); }
	50%  { transform: translateY(0) scale3d(1.08, 0.91, 1); }
	66%  { transform: translateY(-13px) scale3d(0.97, 1.04, 1); }
	82%  { transform: translateY(0) scale3d(1.03, 0.97, 1); }
	92%  { transform: translateY(-4px) scale3d(0.99, 1.01, 1); }
	100% { transform: translateY(0) scale3d(1, 1, 1); }
}

.jbt-react-mover.jbt-anim-spin {
	animation: jbtSmoothSpin var(--jbt-click-dur, 900ms) cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes jbtSmoothSpin {
	0%   { transform: scale(1) rotate(0deg); }
	35%  { transform: scale(1.1) rotate(200deg); }
	100% { transform: scale(1) rotate(360deg); }
}

.jbt-react-mover.jbt-anim-spin_3d {
	animation: jbtCoinFlip3D var(--jbt-click-dur, 900ms) cubic-bezier(0.25, 1, 0.4, 1);
}

@keyframes jbtCoinFlip3D {
	0%   { transform: perspective(1000px) translateZ(0) rotateY(0deg); }
	40%  { transform: perspective(1000px) translateZ(45px) rotateY(380deg); }
	100% { transform: perspective(1000px) translateZ(0) rotateY(720deg); }
}

.jbt-react-mover.jbt-anim-jelly {
	animation: jbtJellySquish var(--jbt-click-dur, 900ms) both;
}

@keyframes jbtJellySquish {
	0%   { transform: scale3d(1, 1, 1); }
	22%  { transform: scale3d(1.24, 0.76, 1); }
	38%  { transform: scale3d(0.78, 1.22, 1); }
	52%  { transform: scale3d(1.14, 0.86, 1); }
	66%  { transform: scale3d(0.93, 1.07, 1); }
	80%  { transform: scale3d(1.04, 0.96, 1); }
	100% { transform: scale3d(1, 1, 1); }
}

.jbt-react-mover.jbt-anim-vortex {
	animation: jbtVortexRoll var(--jbt-click-dur, 900ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes jbtVortexRoll {
	0%   { transform: scale(1) rotate(0deg); }
	22%  { transform: scale(0.76) rotate(-22deg); }
	65%  { transform: scale(1.13) rotate(372deg); }
	100% { transform: scale(1) rotate(360deg); }
}

.jbt-center-pop-badge {
	position: absolute;
	transform: translate(-50%, -50%) scale(0);
	font-size: 46px;
	line-height: 1;
	filter: drop-shadow(0 6px 14px rgba(244, 63, 94, 0.45));
	pointer-events: none;
	animation: jbtCenterBadgePop 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes jbtCenterBadgePop {
	0%   { transform: translate(-50%, -50%) scale(0) rotate(-14deg); opacity: 0; }
	30%  { transform: translate(-50%, -50%) scale(1.25) rotate(8deg); opacity: 1; }
	55%  { transform: translate(-50%, -58%) scale(1) rotate(-4deg); opacity: 1; }
	100% { transform: translate(-50%, -88%) scale(0.8) rotate(0deg); opacity: 0; }
}

.jbt-elementor-notice {
	padding: 18px 20px;
	border: 2px dashed #94a3b8;
	border-radius: 12px;
	background: #f8fafc;
	color: #334155;
	text-align: center;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.jbt-rest-mover,
	.jbt-ripple-ring,
	.jbt-shimmer-sweep,
	.jbt-neon-halo::before {
		animation-duration: 12s !important;
	}
}