/* 4D Button Pro. Everything is driven by CSS variables: presets set them, the Style tab overrides them. */

@property --bp-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.bp-3230 {
	--bp-bg: #15151b;
	--bp-ink: #fff;
	--bp-border: #15151b;
	--bp-bg-h: #e4572e;
	--bp-ink-h: #fff;
	--bp-border-h: #e4572e;
	--bp-accent: #ffd166;
	--bp-accent2: #ff5c8a;
	--bp-focus: #0a84ff;
	--bp-radius: 8px;
	--bp-bw: 2px;
	--bp-h: 52px;
	--bp-pad-x: 30px;
	--bp-speed: 450ms;
	--bp-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--bp-icon: 1.1em;
	--bp-gap: 0.6em;
	--bp-depth: 5px;
	--bp-badge: #ff3b30;
	--bp-badge-ink: #fff;
	--bp-every: 5s;
	--bp-shadow: none;
	--bp-tt: none;
	--bp-ls: 0.02em;
	--bp-weight: 600;
	display: flex;
	justify-content: center;
}

/* Presets */
.bp-3230--p-outline { --bp-bg: transparent; --bp-ink: #15151b; --bp-border: #15151b; --bp-bg-h: #15151b; --bp-ink-h: #fff; --bp-border-h: #15151b; --bp-accent: #15151b; }
.bp-3230--p-ghost { --bp-bg: transparent; --bp-ink: #15151b; --bp-border: transparent; --bp-bg-h: rgba(21, 21, 27, 0.07); --bp-ink-h: #15151b; --bp-border-h: transparent; --bp-accent: #15151b; }
.bp-3230--p-gradient { --bp-bg: linear-gradient(135deg, #6a5cff, #ff5c8a); --bp-ink: #fff; --bp-border: transparent; --bp-bg-h: linear-gradient(135deg, #ff5c8a, #6a5cff); --bp-ink-h: #fff; --bp-border-h: transparent; --bp-radius: 999px; --bp-shadow: 0 10px 24px -8px rgba(106, 92, 255, 0.6); --bp-accent: #fff; --bp-accent2: #ffd166; }
.bp-3230--p-neon { --bp-bg: #0b0f14; --bp-ink: #22d3ee; --bp-border: #22d3ee; --bp-bg-h: #22d3ee; --bp-ink-h: #0b0f14; --bp-border-h: #22d3ee; --bp-accent: #22d3ee; --bp-accent2: #a855f7; --bp-shadow: 0 0 10px rgba(34, 211, 238, 0.35), inset 0 0 10px rgba(34, 211, 238, 0.15); --bp-tt: uppercase; --bp-ls: 0.12em; }
.bp-3230--p-glass { --bp-bg: rgba(255, 255, 255, 0.14); --bp-ink: #fff; --bp-border: rgba(255, 255, 255, 0.4); --bp-bg-h: rgba(255, 255, 255, 0.28); --bp-ink-h: #fff; --bp-border-h: rgba(255, 255, 255, 0.7); --bp-radius: 14px; --bp-bw: 1px; --bp-accent: #fff; --bp-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.bp-3230--p-brutalist { --bp-bg: #ffde59; --bp-ink: #111; --bp-border: #111; --bp-bg-h: #ffcf1a; --bp-ink-h: #111; --bp-border-h: #111; --bp-bw: 3px; --bp-radius: 0px; --bp-shadow: 5px 5px 0 #111; --bp-accent: #111; --bp-weight: 800; --bp-tt: uppercase; }
.bp-3230--p-luxe { --bp-bg: #111; --bp-ink: #d4af37; --bp-border: #d4af37; --bp-bg-h: #d4af37; --bp-ink-h: #111; --bp-border-h: #d4af37; --bp-radius: 0px; --bp-bw: 1px; --bp-accent: #d4af37; --bp-accent2: #f5e7a8; --bp-tt: uppercase; --bp-ls: 0.22em; --bp-weight: 500; }
.bp-3230--p-neumorphic { --bp-bg: #e6e9ef; --bp-ink: #4a5568; --bp-border: transparent; --bp-bg-h: #e6e9ef; --bp-ink-h: #2d3748; --bp-border-h: transparent; --bp-radius: 16px; --bp-shadow: 6px 6px 14px #c5c9d1, -6px -6px 14px #fff; --bp-accent: #6a5cff; }
.bp-3230--p-cyberpunk { --bp-bg: #fcee0a; --bp-ink: #111; --bp-border: transparent; --bp-bg-h: #00f0ff; --bp-ink-h: #111; --bp-border-h: transparent; --bp-radius: 0px; --bp-accent: #ff003c; --bp-accent2: #00f0ff; --bp-tt: uppercase; --bp-weight: 800; --bp-ls: 0.08em; }
.bp-3230--p-flip4d { --bp-bg: #323237; --bp-ink: #adadaf; --bp-border: #323237; --bp-bg-h: #adadaf; --bp-ink-h: #323237; --bp-border-h: #adadaf; --bp-radius: 0px; --bp-bw: 0px; --bp-tt: uppercase; --bp-ls: 1px; --bp-h: 44px; --bp-accent: #adadaf; }

/* Structure */
.bp-3230__wrap {
	position: relative;
	display: inline-flex;
	width: var(--bp-w, auto);
	max-width: 100%;
	vertical-align: middle;
}

.bp-3230 .bp-3230__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--bp-h);
	margin: 0;
	padding: 0.55em var(--bp-pad-x);
	border: var(--bp-bw) solid var(--bp-border);
	border-radius: var(--bp-radius);
	background: var(--bp-bg);
	color: var(--bp-ink);
	box-shadow: var(--bp-shadow);
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--bp-weight);
	line-height: 1.2;
	letter-spacing: var(--bp-ls);
	text-transform: var(--bp-tt);
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--bp-speed) var(--bp-ease),
		background var(--bp-speed) var(--bp-ease),
		border-color var(--bp-speed) var(--bp-ease),
		box-shadow var(--bp-speed) var(--bp-ease),
		transform var(--bp-speed) var(--bp-ease),
		letter-spacing var(--bp-speed) var(--bp-ease);
}

.bp-3230 .bp-3230__btn:is(:hover, :focus-visible) {
	color: var(--bp-ink-h);
	border-color: var(--bp-border-h);
	text-decoration: none;
}

.bp-3230:not(.bp-3230--fill) .bp-3230__btn:is(:hover, :focus-visible) {
	background: var(--bp-bg-h);
}

.bp-3230.bp-3230--fill .bp-3230__btn:is(:hover, :focus-visible) {
	background: var(--bp-bg);
}

.bp-3230 .bp-3230__btn:focus-visible {
	outline: 2px solid var(--bp-focus);
	outline-offset: 3px;
}

.bp-3230__clip {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.bp-3230__bg {
	position: absolute;
	inset: 0;
	background: var(--bp-bg-h);
	opacity: 0;
}

.bp-3230__inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bp-gap);
	min-width: 0;
}

.bp-3230__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.bp-3230__label,
.bp-3230__word {
	position: relative;
	display: block;
}

.bp-3230__sub {
	display: block;
	margin-top: 2px;
	font-size: 0.72em;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.75;
}

.bp-3230__icon {
	display: inline-flex;
	flex: none;
	font-size: var(--bp-icon);
	line-height: 1;
	transition: transform var(--bp-speed) var(--bp-ease), max-width var(--bp-speed) var(--bp-ease), opacity var(--bp-speed) var(--bp-ease), margin var(--bp-speed) var(--bp-ease);
}

.bp-3230__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.bp-3230__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--bp-badge);
	color: var(--bp-badge-ink);
	font: 700 11px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transform: translate(35%, -45%);
}

.bp-3230--p-glass .bp-3230__btn {
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
}

.bp-3230.bp-3230--p-neumorphic .bp-3230__btn:is(:hover, :focus-visible) {
	box-shadow: inset 4px 4px 10px #c5c9d1, inset -4px -4px 10px #fff;
}

.bp-3230--p-cyberpunk .bp-3230__btn {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* ---------- Background fills ---------- */
.bp-3230--fill .bp-3230__bg {
	opacity: 1;
	transition: transform var(--bp-speed) var(--bp-ease), clip-path var(--bp-speed) var(--bp-ease), top calc(var(--bp-speed) * 1.6) ease;
}

.bp-3230--fx-fill-left .bp-3230__bg { transform: scaleX(0); transform-origin: left center; }
.bp-3230--fx-fill-right .bp-3230__bg { transform: scaleX(0); transform-origin: right center; }
.bp-3230--fx-fill-up .bp-3230__bg { transform: scaleY(0); transform-origin: center bottom; }
.bp-3230--fx-fill-down .bp-3230__bg { transform: scaleY(0); transform-origin: center top; }
.bp-3230--fx-shutter-h .bp-3230__bg { transform: scaleX(0); }
.bp-3230--fx-shutter-v .bp-3230__bg { transform: scaleY(0); }

.bp-3230:is(.bp-3230--fx-fill-left, .bp-3230--fx-fill-right, .bp-3230--fx-fill-up, .bp-3230--fx-fill-down, .bp-3230--fx-shutter-h, .bp-3230--fx-shutter-v) .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg {
	transform: none;
}

.bp-3230--fx-fill-center .bp-3230__bg { clip-path: circle(0% at 50% 50%); }
.bp-3230--fx-fill-center .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg { clip-path: circle(75% at 50% 50%); }

.bp-3230--fx-cursor .bp-3230__bg { clip-path: circle(0% at var(--bp-x, 50%) var(--bp-y, 50%)); }
.bp-3230--fx-cursor .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg { clip-path: circle(150% at var(--bp-x, 50%) var(--bp-y, 50%)); }

.bp-3230--fx-diagonal .bp-3230__bg { inset: 0 -40%; transform: translateX(-110%) skewX(-30deg); }
.bp-3230--fx-diagonal .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg { transform: translateX(0) skewX(-30deg); }

.bp-3230--fx-curtain .bp-3230__bg { background: none; }
.bp-3230--fx-curtain .bp-3230__bg::before,
.bp-3230--fx-curtain .bp-3230__bg::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51%;
	background: var(--bp-bg-h);
	transition: transform var(--bp-speed) var(--bp-ease);
}
.bp-3230--fx-curtain .bp-3230__bg::before { left: 0; transform: translateX(-100%); }
.bp-3230--fx-curtain .bp-3230__bg::after { right: 0; transform: translateX(100%); }
.bp-3230--fx-curtain .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg::before,
.bp-3230--fx-curtain .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg::after { transform: none; }

.bp-3230--fx-liquid .bp-3230__bg {
	inset: auto;
	top: 110%;
	left: 50%;
	width: 260%;
	aspect-ratio: 1;
	border-radius: 42%;
	transform: translateX(-50%);
	animation: bp-3230-spin 6s linear infinite;
}
.bp-3230--fx-liquid .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__bg { top: -400%; }

.bp-3230.bp-3230--fx-outline-fill .bp-3230__btn:is(:hover, :focus-visible) {
	background: var(--bp-bg);
	box-shadow: inset 0 0 0 3em var(--bp-bg-h);
}

/* ---------- Your 4D buttons ---------- */

/* Button 1: 3D flip */
.bp-3230.bp-3230--fx-flip .bp-3230__btn {
	display: grid;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	perspective: 700px;
}
.bp-3230.bp-3230--fx-flip .bp-3230__btn:is(:hover, :focus-visible) { background: transparent; }
.bp-3230__face {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--bp-h);
	padding: 0.55em var(--bp-pad-x);
	border: var(--bp-bw) solid var(--bp-border);
	border-radius: var(--bp-radius);
	background: var(--bp-bg);
	color: var(--bp-ink);
	box-shadow: var(--bp-shadow);
	backface-visibility: hidden;
	transition: transform var(--bp-speed) ease, opacity var(--bp-speed) ease;
}
.bp-3230__face--back {
	border-color: var(--bp-border-h);
	background: var(--bp-bg-h);
	color: var(--bp-ink-h);
	opacity: 0;
}
.bp-3230--flip-up .bp-3230__face--back { transform: translateY(-50%) rotateX(90deg); }
.bp-3230--flip-up .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__face--front { opacity: 0; transform: translateY(50%) rotateX(90deg); }
.bp-3230--flip-down .bp-3230__face--back { transform: translateY(50%) rotateX(-90deg); }
.bp-3230--flip-down .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__face--front { opacity: 0; transform: translateY(-50%) rotateX(-90deg); }
.bp-3230--flip-left .bp-3230__face--back { transform: translateX(50%) rotateY(90deg); }
.bp-3230--flip-left .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__face--front { opacity: 0; transform: translateX(-50%) rotateY(-90deg); }
.bp-3230--flip-right .bp-3230__face--back { transform: translateX(-50%) rotateY(-90deg); }
.bp-3230--flip-right .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__face--front { opacity: 0; transform: translateX(50%) rotateY(90deg); }
.bp-3230--fx-flip .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__face--back { opacity: 1; transform: none; }

/* Buttons 2 and 3: SVG border line */
.bp-3230__svg {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.bp-3230__svg rect {
	x: 1px;
	y: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	rx: var(--bp-radius);
	fill: none;
	stroke: var(--bp-accent);
	stroke-width: 2px;
}
.bp-3230--fx-trace .bp-3230__svg rect {
	stroke-dasharray: 0 100;
	stroke-dashoffset: 0;
	transition: stroke-dasharray calc(var(--bp-speed) * 1.2) ease, stroke-dashoffset calc(var(--bp-speed) * 2.4) ease-in-out;
}
.bp-3230--fx-trace .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__svg rect {
	stroke-dasharray: 24 76;
	stroke-dashoffset: -100;
}
.bp-3230.bp-3230--fx-collapse .bp-3230__btn { border-color: transparent; }
.bp-3230--fx-collapse .bp-3230__svg rect {
	stroke: var(--bp-border);
	stroke-dasharray: 100 0;
	stroke-dashoffset: 0;
	transition: all calc(var(--bp-speed) * 0.8) linear;
}
.bp-3230--fx-collapse .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__svg rect {
	stroke: var(--bp-accent);
	stroke-width: 4px;
	stroke-dasharray: 7 43;
	stroke-dashoffset: 3.5;
	transition: all calc(var(--bp-speed) * 3) cubic-bezier(0.19, 1, 0.22, 1);
}
.bp-3230--fx-collapse .bp-3230__btn:is(:hover, :focus-visible) { font-weight: 900; letter-spacing: calc(var(--bp-ls) + 1px); }

/* Button 4: spaced lines */
.bp-3230--fx-spaced .bp-3230__btn::before,
.bp-3230--fx-spaced .bp-3230__btn::after {
	content: "";
	position: absolute;
	left: 50%;
	z-index: 2;
	width: 0;
	border-top: 1px solid var(--bp-accent);
	transform: translateX(-50%);
	transition: width var(--bp-speed) ease-in-out;
}
.bp-3230--fx-spaced .bp-3230__btn::before { top: 6px; }
.bp-3230--fx-spaced .bp-3230__btn::after { bottom: 6px; }
.bp-3230--fx-spaced .bp-3230__btn:is(:hover, :focus-visible) { letter-spacing: calc(var(--bp-ls) + 0.3em); }
.bp-3230--fx-spaced .bp-3230__btn:is(:hover, :focus-visible)::before,
.bp-3230--fx-spaced .bp-3230__btn:is(:hover, :focus-visible)::after { width: 70%; }

/* Button 5: 3D press */
.bp-3230.bp-3230--fx-press .bp-3230__btn {
	box-shadow: 0 var(--bp-depth) 0 color-mix(in srgb, var(--bp-border) 55%, #000), 0 calc(var(--bp-depth) + 4px) 10px rgba(0, 0, 0, 0.28);
	transition-duration: 160ms;
}
.bp-3230.bp-3230--fx-press .bp-3230__btn:is(:hover, :focus-visible) {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-border) 55%, #000), 0 2px 4px rgba(0, 0, 0, 0.22);
	transform: translateY(calc(var(--bp-depth) - 1px));
}
.bp-3230.bp-3230--fx-press .bp-3230__btn:active {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
	transform: translateY(var(--bp-depth));
}

/* Button 7: outline ripple */
.bp-3230--fx-ripple-out .bp-3230__btn::after {
	content: "";
	position: absolute;
	inset: calc(var(--bp-bw) * -1);
	border: 1px solid var(--bp-accent);
	border-radius: inherit;
	opacity: 0.6;
	pointer-events: none;
	transition: inset 1250ms cubic-bezier(0.19, 1, 0.22, 1), opacity 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.bp-3230--fx-ripple-out .bp-3230__btn:is(:hover, :focus-visible)::after { inset: -16px; opacity: 0; }
.bp-3230.bp-3230--fx-ripple-out .bp-3230__btn:is(:hover, :focus-visible) {
	box-shadow: inset 0 0 20px color-mix(in srgb, var(--bp-accent) 45%, transparent), 0 0 20px color-mix(in srgb, var(--bp-accent) 25%, transparent);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	transition-duration: 1250ms;
}

/* Button 8: slice */
.bp-3230--fx-slice .bp-3230__word { color: transparent; }
.bp-3230--fx-slice .bp-3230__word::before,
.bp-3230--fx-slice .bp-3230__word::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--bp-ink);
	transition: transform 300ms cubic-bezier(1, -0.055, 0.025, 1.04) 0.35s, color var(--bp-speed) ease;
}
.bp-3230--fx-slice .bp-3230__word::before { clip-path: inset(0 0 50% 0); }
.bp-3230--fx-slice .bp-3230__word::after { clip-path: inset(50% 0 0 0); }
.bp-3230--fx-slice .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word::before { color: var(--bp-ink-h); transform: translateY(-0.3em); }
.bp-3230--fx-slice .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word::after { color: var(--bp-ink-h); transform: translateY(0.3em); }
.bp-3230--fx-slice .bp-3230__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -35px;
	z-index: 2;
	width: 60px;
	height: 1px;
	background: var(--bp-accent);
	transition: width 1000ms cubic-bezier(0.89, -0.17, 0.14, 1.225);
}
.bp-3230--fx-slice .bp-3230__btn:is(:hover, :focus-visible)::before { width: 130%; }
.bp-3230--fx-slice .bp-3230__btn:is(:hover, :focus-visible) { transform: translateX(10px); transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.89, -0.17, 0.14, 1.225); }

/* ---------- Text ---------- */
.bp-3230--fx-roll .bp-3230__label { overflow: hidden; }
.bp-3230--fx-roll .bp-3230__word { transition: transform var(--bp-speed) var(--bp-ease); }
.bp-3230--fx-roll .bp-3230__word::after {
	content: attr(data-text);
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}
.bp-3230--fx-roll .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word { transform: translateY(-100%); }

.bp-3230__ch {
	display: inline-block;
	white-space: pre;
}
.bp-3230--fx-wave .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__ch {
	animation: bp-3230-wave 0.55s ease calc(var(--i) * 35ms) both;
}

.bp-3230--fx-glitch .bp-3230__word::before,
.bp-3230--fx-glitch .bp-3230__word::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.bp-3230--fx-glitch .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word::before {
	color: var(--bp-accent);
	opacity: 0.85;
	animation: bp-3230-glitch-a 0.45s steps(2, end) infinite;
}
.bp-3230--fx-glitch .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word::after {
	color: var(--bp-accent2);
	opacity: 0.85;
	animation: bp-3230-glitch-b 0.5s steps(2, end) infinite;
}

.bp-3230--fx-underline .bp-3230__word::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: var(--bp-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--bp-speed) var(--bp-ease);
}
.bp-3230--fx-underline .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.bp-3230--fx-gradient-text .bp-3230__word {
	background-image: linear-gradient(90deg, var(--bp-accent) 0%, var(--bp-accent2) 50%, var(--bp-ink) 50%, var(--bp-ink) 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position calc(var(--bp-speed) * 1.4) var(--bp-ease);
}
.bp-3230--fx-gradient-text .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__word { background-position: 0 0; }

/* ---------- Borders & light ---------- */
.bp-3230--fx-shine .bp-3230__clip::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	transition: left calc(var(--bp-speed) * 1.6) ease;
}
.bp-3230--fx-shine .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__clip::after { left: 130%; }

.bp-3230.bp-3230--fx-neon .bp-3230__btn:is(:hover, :focus-visible) {
	box-shadow: 0 0 6px var(--bp-accent), 0 0 22px var(--bp-accent), 0 0 48px var(--bp-accent);
	text-shadow: 0 0 8px var(--bp-accent);
}

.bp-3230.bp-3230--fx-gradient-border .bp-3230__btn { border-color: transparent; }
.bp-3230--fx-gradient-border .bp-3230__btn::before {
	content: "";
	position: absolute;
	inset: calc(var(--bp-bw) * -1);
	z-index: 2;
	padding: max(var(--bp-bw), 2px);
	border-radius: inherit;
	background: conic-gradient(from var(--bp-angle), var(--bp-accent), var(--bp-accent2), var(--bp-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	animation: bp-3230-angle 2.4s linear infinite paused;
}
.bp-3230--fx-gradient-border .bp-3230__btn:is(:hover, :focus-visible)::before { animation-play-state: running; }
.bp-3230.bp-3230--fx-gradient-border .bp-3230__btn:is(:hover, :focus-visible) { box-shadow: 0 0 18px color-mix(in srgb, var(--bp-accent) 45%, transparent); }

.bp-3230--fx-corners .bp-3230__btn::before {
	content: "";
	position: absolute;
	inset: -8px;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(var(--bp-accent), var(--bp-accent)) left top / 14px 2px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) left top / 2px 14px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) right top / 14px 2px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) right top / 2px 14px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) left bottom / 14px 2px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) left bottom / 2px 14px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) right bottom / 14px 2px,
		linear-gradient(var(--bp-accent), var(--bp-accent)) right bottom / 2px 14px;
	background-repeat: no-repeat;
	transition: inset var(--bp-speed) var(--bp-ease);
}
.bp-3230--fx-corners .bp-3230__btn:is(:hover, :focus-visible)::before { inset: -3px; }

.bp-3230--fx-double .bp-3230__wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: max(var(--bp-bw), 2px) solid var(--bp-accent);
	border-radius: var(--bp-radius);
	transform: translate(6px, 6px);
	transition: transform var(--bp-speed) var(--bp-ease);
	pointer-events: none;
}
.bp-3230--fx-double .bp-3230__wrap:is(:hover, :focus-within)::before { transform: none; }

.bp-3230.bp-3230--fx-gradient-flow .bp-3230__btn,
.bp-3230.bp-3230--fx-gradient-flow .bp-3230__btn:is(:hover, :focus-visible) {
	border-color: transparent;
	background: linear-gradient(120deg, var(--bp-accent), var(--bp-accent2), var(--bp-accent)) 0 0 / 200% 100%;
	animation: bp-3230-flow 4s linear infinite;
}
.bp-3230.bp-3230--fx-gradient-flow .bp-3230__btn:is(:hover, :focus-visible) { animation-duration: 1.4s; }

.bp-3230__star {
	position: absolute;
	z-index: 3;
	width: 14px;
	height: 14px;
	color: var(--bp-accent);
	pointer-events: none;
	transform: scale(0);
}
.bp-3230__star--1 { top: -8px; left: 12%; }
.bp-3230__star--2 { top: -12px; right: 18%; width: 10px; height: 10px; }
.bp-3230__star--3 { bottom: -10px; left: 30%; width: 10px; height: 10px; }
.bp-3230__star--4 { bottom: -8px; right: 8%; }
.bp-3230--fx-sparkle .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__star { animation: bp-3230-sparkle 1.2s ease-in-out infinite; }
.bp-3230--fx-sparkle .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__star--2 { animation-delay: 0.3s; }
.bp-3230--fx-sparkle .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__star--3 { animation-delay: 0.6s; }
.bp-3230--fx-sparkle .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__star--4 { animation-delay: 0.9s; }

/* ---------- Motion ---------- */
.bp-3230.bp-3230--fx-magnetic .bp-3230__btn {
	transform: translate(var(--bp-mx, 0px), var(--bp-my, 0px));
	transition-property: color, background, border-color, box-shadow, transform;
	transition-duration: var(--bp-speed), var(--bp-speed), var(--bp-speed), var(--bp-speed), 350ms;
}
.bp-3230--fx-magnetic .bp-3230__inner {
	transform: translate(calc(var(--bp-mx, 0px) * 0.4), calc(var(--bp-my, 0px) * 0.4));
	transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bp-3230--fx-tilt .bp-3230__wrap { perspective: 600px; }
.bp-3230.bp-3230--fx-tilt .bp-3230__btn {
	transform: rotateX(var(--bp-rx, 0deg)) rotateY(var(--bp-ry, 0deg));
	transition-property: color, background, border-color, box-shadow, transform;
	transition-duration: var(--bp-speed), var(--bp-speed), var(--bp-speed), var(--bp-speed), 200ms;
}
.bp-3230--fx-tilt .bp-3230__clip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--bp-x, 50%) var(--bp-y, 50%), rgba(255, 255, 255, 0.4), transparent 60%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.bp-3230--fx-tilt .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__clip::after { opacity: 1; }

.bp-3230.bp-3230--fx-lift .bp-3230__btn:is(:hover, :focus-visible) {
	transform: translateY(-4px);
	box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.5);
}

.bp-3230--fx-jelly .bp-3230__btn:is(:hover, :focus-visible) { animation: bp-3230-jelly 0.75s both; }
.bp-3230--fx-pulse .bp-3230__btn:is(:hover, :focus-visible) { animation: bp-3230-pulse 1.2s ease-in-out infinite; }

.bp-3230.bp-3230--fx-skew .bp-3230__btn:is(:hover, :focus-visible) { transform: skewX(-10deg); }
.bp-3230--fx-skew .bp-3230__inner { transition: transform var(--bp-speed) var(--bp-ease); }
.bp-3230--fx-skew .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__inner { transform: skewX(10deg); }

.bp-3230--fx-arrow .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__icon { transform: translateX(5px); }
.bp-3230--fx-arrow .bp-3230__inner .bp-3230__icon:first-child { transform: none; }
.bp-3230--fx-arrow .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__inner .bp-3230__icon:first-child { transform: translateX(-5px); }

.bp-3230--fx-icon-in .bp-3230__inner { gap: 0; }
.bp-3230--fx-icon-in .bp-3230__icon {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-8px);
}
.bp-3230--fx-icon-in .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__icon {
	max-width: 2em;
	margin-left: var(--bp-gap);
	opacity: 1;
	transform: none;
}
.bp-3230--fx-icon-in .bp-3230__btn:is(:hover, :focus-visible) .bp-3230__inner .bp-3230__icon:first-child {
	margin-left: 0;
	margin-right: var(--bp-gap);
}

/* ---------- Click feedback ---------- */
.bp-3230__ripple {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
}

.bp-3230.is-done .bp-3230__btn,
.bp-3230.is-done .bp-3230__face {
	border-color: #16a34a;
	background: #16a34a;
	color: #fff;
}

.bp-3230__tick {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	vertical-align: -0.12em;
}

.bp-3230__confetti {
	position: fixed;
	z-index: 999999;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	pointer-events: none;
}

/* ---------- Attention loop (pauses on hover) ---------- */
.bp-3230--loop-pulse .bp-3230__wrap { animation: bp-3230-loop-pulse var(--bp-every) ease-in-out infinite; }
.bp-3230--loop-shake .bp-3230__wrap { animation: bp-3230-loop-shake var(--bp-every) ease-in-out infinite; }
.bp-3230--loop-bounce .bp-3230__wrap { animation: bp-3230-loop-bounce var(--bp-every) ease-in-out infinite; }
.bp-3230--loop-wiggle .bp-3230__wrap { animation: bp-3230-loop-wiggle var(--bp-every) ease-in-out infinite; }
.bp-3230__wrap:is(:hover, :focus-within) { animation-play-state: paused; }

.bp-3230__glint {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 35%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-20deg);
	animation: bp-3230-glint var(--bp-every) ease-in-out infinite;
}

/* ---------- Keyframes ---------- */
@keyframes bp-3230-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes bp-3230-angle { to { --bp-angle: 360deg; } }
@keyframes bp-3230-flow { to { background-position: -200% 0; } }
@keyframes bp-3230-wave {
	0%, 100% { transform: none; }
	40% { transform: translateY(-0.4em); }
	70% { transform: translateY(0.08em); }
}
@keyframes bp-3230-glitch-a {
	0% { clip-path: inset(0 0 62% 0); transform: translate(-2px, -1px); }
	50% { clip-path: inset(48% 0 12% 0); transform: translate(2px, 1px); }
	100% { clip-path: inset(18% 0 52% 0); transform: translate(-1px, 0); }
}
@keyframes bp-3230-glitch-b {
	0% { clip-path: inset(58% 0 6% 0); transform: translate(2px, 1px); }
	50% { clip-path: inset(8% 0 70% 0); transform: translate(-2px, -1px); }
	100% { clip-path: inset(34% 0 36% 0); transform: translate(1px, 0); }
}
@keyframes bp-3230-sparkle {
	0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
	50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes bp-3230-jelly {
	0% { transform: scale(1, 1); }
	30% { transform: scale(1.12, 0.88); }
	40% { transform: scale(0.9, 1.1); }
	50% { transform: scale(1.06, 0.94); }
	65% { transform: scale(0.98, 1.02); }
	75% { transform: scale(1.02, 0.98); }
	100% { transform: scale(1, 1); }
}
@keyframes bp-3230-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@keyframes bp-3230-loop-pulse {
	0%, 84%, 100% { transform: scale(1); }
	90% { transform: scale(1.07); }
	95% { transform: scale(0.98); }
}
@keyframes bp-3230-loop-shake {
	0%, 84%, 96%, 100% { transform: translateX(0); }
	86% { transform: translateX(-5px); }
	88% { transform: translateX(5px); }
	90% { transform: translateX(-4px); }
	92% { transform: translateX(4px); }
	94% { transform: translateX(-2px); }
}
@keyframes bp-3230-loop-bounce {
	0%, 84%, 100% { transform: translateY(0); }
	89% { transform: translateY(-9px); }
	93% { transform: translateY(0); }
	96% { transform: translateY(-3px); }
}
@keyframes bp-3230-loop-wiggle {
	0%, 84%, 98%, 100% { transform: rotate(0deg); }
	87% { transform: rotate(-4deg); }
	90% { transform: rotate(4deg); }
	93% { transform: rotate(-3deg); }
	96% { transform: rotate(2deg); }
}
@keyframes bp-3230-glint {
	0%, 80% { left: -60%; }
	96%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-3230 *,
	.bp-3230 *::before,
	.bp-3230 *::after {
		animation: none !important;
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}
}