.oxyc-fancybtn-root { display: flex; position: relative; justify-content: var(--oxc-justify, flex-start); --oxc-elastic: linear(0,0.5737 7.6%,0.8382 11.87%,0.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,0.9995 46.99%,0.9872 51.63%,0.9842 58.77%,1.0011 81.26%,1); }

/* Shared base for every preset */
.oxyc-fancybtn-root .oxyc-fbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--oxc-font, inherit);
	padding: var(--oxc-pt) var(--oxc-pr) var(--oxc-pb) var(--oxc-pl);
	border-radius: var(--oxc-radius);
	border: var(--oxc-bw) solid var(--oxc-bc);
	background: var(--oxc-bg);
	color: var(--oxc-text);
	font-size: var(--oxc-fs);
	font-weight: var(--oxc-fw);
	letter-spacing: var(--oxc-ls);
	text-transform: var(--oxc-tt, none);
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	box-shadow: var(--oxc-shadow, none);
	isolation: isolate;
	transition: color var(--oxc-dur) ease, background-color var(--oxc-dur) ease, border-color var(--oxc-dur) ease, transform var(--oxc-dur) ease, box-shadow var(--oxc-dur) ease;
	-webkit-tap-highlight-color: transparent;
}
.oxyc-fancybtn-root .oxyc-fbtn:focus-visible { outline: 3px solid var(--oxc-accent); outline-offset: 2px; }
/* A hovered button (and its out-of-box effects like glow/tooltip) sits above
   neighbours so nothing overlaps or steals hover in a tight button grid. */
.oxyc-fancybtn-root:hover { z-index: 3; }

/* Icon + label building blocks */
.oxyc-fancybtn-root .oxyc-fbtn-icon { display: inline-flex; align-items: center; justify-content: center; z-index: 2; color: var(--oxc-icon, inherit); transition: color var(--oxc-dur, .3s) ease; }
/* Library icons (Font Awesome etc.) have NO fill attribute → default black, which
   ignores `color`. Force currentColor on those so icon colour + hover apply. Line
   presets carry fill="none" and are therefore left untouched. */
.oxyc-fancybtn-root .oxyc-fbtn-icon svg:not([fill]) { fill: currentColor; }
.oxyc-fancybtn-root .oxyc-fbtn-icon svg:not([fill]) path:not([fill]) { fill: currentColor; }
/* icon hover colour (falls back to the base icon colour, then text) */
.oxyc-fancybtn-root:hover .oxyc-fbtn-icon { color: var(--oxc-icon-hover, var(--oxc-icon, inherit)); }
.oxyc-fancybtn-root .oxyc-fbtn-icon svg { width: var(--oxc-icon-size, 1.15em); height: var(--oxc-icon-size, 1.15em); display: block; }
.oxyc-fancybtn-root .oxyc-fbtn-label { position: relative; display: inline-flex; align-items: center; z-index: 2; }
.oxyc-fancybtn-root .oxyc-fbtn-text { position: relative; z-index: 2; }

/* Effect layers hidden by default; presets switch them on */
.oxyc-fancybtn-root .oxyc-fbtn-fill,
.oxyc-fancybtn-root .oxyc-fbtn-bubbles,
.oxyc-fancybtn-root .oxyc-fbtn-circle,
.oxyc-fancybtn-root .oxyc-fbtn-text2,
.oxyc-fancybtn-root .oxyc-fbtn-marq { display: none; }

/* ============================================================
   PRESETS — each only overrides what it needs. Colours/size come
   from the controls above, so every preset already looks right in
   your corporate colours and stays fully adjustable.
   ============================================================ */

/* 1) Corporate Solid — clean fill, lift + shadow on hover */
.oxyc-fancybtn-root .oxyc-fbtn-corporate_solid:hover {
	background: var(--oxc-bg-hover);
	color: var(--oxc-text-hover);
	border-color: var(--oxc-bg-hover);
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.oxyc-fancybtn-root .oxyc-fbtn-corporate_solid:active { transform: translateY(0); box-shadow: none; }

/* 2) Neon Sweep — accent layer wipes in from the left.
   FIX: rest position is translateX(-101%) so no accent sliver ever
   peeks at the left edge before hover. */
.oxyc-fancybtn-root .oxyc-fbtn-neon_sweep .oxyc-fbtn-fill {
	display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
	background: var(--oxc-accent);
	transform: translateX(-101%);
	transition: transform var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-neon_sweep:hover .oxyc-fbtn-fill { transform: translate(0,0); }
.oxyc-fancybtn-root .oxyc-fbtn-neon_sweep:hover { color: var(--oxc-text-hover); border-color: var(--oxc-accent); }

/* 3) Icon Slide — icon sits in an accent square that expands on hover.
   FIX: label is left-aligned and the icon square is lifted above it
   (z-index 3), so at rest the text never tucks under or over the icon. */
.oxyc-fancybtn-root .oxyc-fbtn-icon_slide { justify-content: flex-start; padding-right: calc(var(--oxc-pr) + 2.8em); }
.oxyc-fancybtn-root .oxyc-fbtn-icon_slide .oxyc-fbtn-icon-right {
	position: absolute; right: 0.3em; top: 0.3em; bottom: 0.3em;
	width: 2.2em; border-radius: calc(var(--oxc-radius) * 0.7);
	background: var(--oxc-accent); color: var(--oxc-bg); z-index: 3;
	transition: width var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-icon_slide .oxyc-fbtn-icon-right svg { transition: transform var(--oxc-dur) ease; }
.oxyc-fancybtn-root .oxyc-fbtn-icon_slide:hover .oxyc-fbtn-icon-right { width: calc(100% - 0.6em); }
.oxyc-fancybtn-root .oxyc-fbtn-icon_slide:hover .oxyc-fbtn-icon-right svg { transform: translateX(2px); }

/* 4) Bubble Rise — accent circle grows from the centre */
.oxyc-fancybtn-root .oxyc-fbtn-bubble_rise .oxyc-fbtn-fill {
	display: block; position: absolute; z-index: 1;
	width: 0; height: 0; left: 50%; top: 50%; transform: translate(-50%,-50%);
	background: var(--oxc-accent); border-radius: 50%;
	transition: width 0.5s ease, height 0.5s ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-bubble_rise:hover .oxyc-fbtn-fill { width: 250%; height: 600%; }
.oxyc-fancybtn-root .oxyc-fbtn-bubble_rise:hover { color: var(--oxc-text-hover); }

/* 5) Outline Fill — transparent, fills with accent from bottom */
.oxyc-fancybtn-root .oxyc-fbtn-outline_fill {
	background: transparent; color: var(--oxc-bg); border-color: var(--oxc-accent);
}
.oxyc-fancybtn-root .oxyc-fbtn-outline_fill .oxyc-fbtn-fill {
	display: block; position: absolute; inset: -1px; z-index: 1; background: var(--oxc-accent);
	transform: scaleY(0); transform-origin: bottom;
	transition: transform var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-outline_fill:hover .oxyc-fbtn-fill { transform: scale(1,1); }
.oxyc-fancybtn-root .oxyc-fbtn-outline_fill:hover { color: var(--oxc-text-hover); }

/* 6) Skew Split — two skewed halves slide in from both sides */
.oxyc-fancybtn-root .oxyc-fbtn-skew_split .oxyc-fbtn-fill,
.oxyc-fancybtn-root .oxyc-fbtn-skew_split .oxyc-fbtn-bubbles {
	display: block; position: absolute; top: -1px; width: 0; height: calc(100% + 2px);
	transform: skewX(-15deg); z-index: 1;
	background: var(--oxc-accent); transition: width var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-skew_split .oxyc-fbtn-fill { left: -10px; }
.oxyc-fancybtn-root .oxyc-fbtn-skew_split .oxyc-fbtn-bubbles { right: -10px; }
.oxyc-fancybtn-root .oxyc-fbtn-skew_split:hover .oxyc-fbtn-fill,
.oxyc-fancybtn-root .oxyc-fbtn-skew_split:hover .oxyc-fbtn-bubbles { width: 62%; }
.oxyc-fancybtn-root .oxyc-fbtn-skew_split:hover { color: var(--oxc-text-hover); }

/* 7) Marquee — the static label is the resting state; on hover it fades
   and a looping marquee runs across the button. The marquee lives in its
   OWN lane (absolutely positioned) so the button's padding is never touched.
   Default: the lane respects the horizontal padding. "Randlos" widens ONLY
   the lane to the button edges — the button padding stays intact. */
.oxyc-fancybtn-root .oxyc-fbtn-marquee .oxyc-fbtn-text { transition: opacity var(--oxc-dur) ease; }
.oxyc-fancybtn-root .oxyc-fbtn-marquee:hover .oxyc-fbtn-text { opacity: 0; }
.oxyc-fancybtn-root .oxyc-fbtn-marquee .oxyc-fbtn-marq {
	display: flex; align-items: center; position: absolute; top: 0; bottom: 0;
	left: var(--oxc-pl); right: var(--oxc-pr);
	overflow: hidden; opacity: 0; pointer-events: none; z-index: 2;
	transition: opacity var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-marq-inner {
	white-space: nowrap; will-change: transform;
	animation: oxyc-fbtn-marq 6s linear infinite; animation-play-state: paused;
}
.oxyc-fancybtn-root .oxyc-fbtn-marquee:hover .oxyc-fbtn-marq { opacity: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-marquee:hover .oxyc-fbtn-marq-inner { animation-play-state: running; }
@keyframes oxyc-fbtn-marq {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}
.oxyc-fancybtn-root .oxyc-fbtn-marquee:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }

/* 8) Push 3D — hard offset shadow, presses down on click */
.oxyc-fancybtn-root .oxyc-fbtn-push_3d {
	box-shadow: 4px 4px 0 0 var(--oxc-accent);
}
.oxyc-fancybtn-root .oxyc-fbtn-push_3d:hover {
	transform: translate(-2px,-2px);
	box-shadow: 6px 6px 0 0 var(--oxc-accent);
}
.oxyc-fancybtn-root .oxyc-fbtn-push_3d:active {
	transform: translate(2px,2px);
	box-shadow: 0 0 0 0 var(--oxc-accent);
}

/* 9) Jello — glossy inset-lit pill that wobbles on hover */
.oxyc-fancybtn-root .oxyc-fbtn-jello {
	box-shadow: 0 8px 12px -4px var(--oxc-accent) inset,
		0 4px 8px rgba(0,0,0,0.22),
		0 -8px 12px -4px rgba(0,0,0,0.35) inset;
}
.oxyc-fancybtn-root .oxyc-fbtn-jello:hover { animation: oxyc-fbtn-jello 0.9s both; }
@keyframes oxyc-fbtn-jello {
	0% { transform: scale3d(1,1,1); }
	30% { transform: scale3d(1.25,0.75,1); }
	40% { transform: scale3d(0.75,1.25,1); }
	50% { transform: scale3d(1.15,0.85,1); }
	65% { transform: scale3d(0.95,1.05,1); }
	75% { transform: scale3d(1.05,0.95,1); }
	100% { transform: scale3d(1,1,1); }
}

/* 10) Fly Send — the icon lifts off and flies on hover, text nudges aside */
.oxyc-fancybtn-root .oxyc-fbtn-fly_send .oxyc-fbtn-icon svg { transition: transform 0.3s ease-in-out; }
.oxyc-fancybtn-root .oxyc-fbtn-fly_send .oxyc-fbtn-text { transition: transform 0.3s ease-in-out; }
.oxyc-fancybtn-root .oxyc-fbtn-fly_send:hover .oxyc-fbtn-icon { animation: oxyc-fbtn-fly 0.6s ease-in-out infinite alternate; }
.oxyc-fancybtn-root .oxyc-fbtn-fly_send:hover .oxyc-fbtn-icon svg { transform: translateX(0.9em) translateY(-0.3em) rotate(35deg) scale(1.1); }
.oxyc-fancybtn-root .oxyc-fbtn-fly_send:hover .oxyc-fbtn-text { transform: translateX(0.4em); }
.oxyc-fancybtn-root .oxyc-fbtn-fly_send:active { transform: scale(0.96); }
@keyframes oxyc-fbtn-fly {
	from { transform: translateY(0.1em); }
	to { transform: translateY(-0.1em); }
}

/* 11) Expand Pill — an icon-only circle that grows into a pill and
   reveals the label on hover (à la "back to top"). */
.oxyc-fancybtn-root .oxyc-fbtn-expand_pill { gap: 0; }
.oxyc-fancybtn-root .oxyc-fbtn-expand_pill .oxyc-fbtn-text {
	max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
	transition: max-width var(--oxc-dur) ease, opacity var(--oxc-dur) ease, margin-left var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-expand_pill:hover .oxyc-fbtn-text { max-width: 14em; opacity: 1; margin-left: 0.6em; }
.oxyc-fancybtn-root .oxyc-fbtn-expand_pill:hover .oxyc-fbtn-icon svg { transform: translateY(-2px); transition: transform var(--oxc-dur) ease; }

/* 12) Particles — accent bubbles burst above and below on hover.
   The two effect layers hold the particle gradients; empty at rest. */
.oxyc-fancybtn-root .oxyc-fbtn-particles { overflow: visible; }
.oxyc-fancybtn-root .oxyc-fbtn-particles .oxyc-fbtn-fill,
.oxyc-fancybtn-root .oxyc-fbtn-particles .oxyc-fbtn-bubbles {
	display: block; position: absolute; left: 50%; width: 150%; height: 100%;
	transform: translateX(-50%); z-index: 1; pointer-events: none;
	background-repeat: no-repeat;
}
.oxyc-fancybtn-root .oxyc-fbtn-particles:hover .oxyc-fbtn-fill {
	top: -70%;
	background-image:
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, transparent 20%, var(--oxc-accent) 20%, transparent 30%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, transparent 10%, var(--oxc-accent) 15%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
	background-position: 50% 120%;
	animation: oxyc-fbtn-ptop 0.6s ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-particles:hover .oxyc-fbtn-bubbles {
	bottom: -70%;
	background-image:
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, transparent 10%, var(--oxc-accent) 15%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%),
		radial-gradient(circle, var(--oxc-accent) 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
	background-position: 50% 0%;
	animation: oxyc-fbtn-pbot 0.6s ease;
}
@keyframes oxyc-fbtn-ptop {
	0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
	50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
	100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
@keyframes oxyc-fbtn-pbot {
	0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
	50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
	100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* 13) Arrow Swap — a round icon badge whose arrow flies out top-right
   while a copy slides in from bottom-left; badge stays visible. */
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap .oxyc-fbtn-swap {
	position: relative; width: 1.6em; height: 1.6em; border-radius: 50%;
	background: var(--oxc-accent); color: var(--oxc-bg); overflow: hidden; flex: none;
}
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap .oxyc-fbtn-swap svg { position: absolute; top: 50%; left: 50%; width: 0.95em; height: 0.95em; transform: translate(-50%,-50%); transition: transform 0.3s ease-in-out; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap .oxyc-fbtn-swap .oxyc-fbtn-arr-copy { transform: translate(-190%, 90%); }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap:hover .oxyc-fbtn-swap svg:first-child { transform: translate(90%, -190%); }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap:hover .oxyc-fbtn-swap .oxyc-fbtn-arr-copy { transition-delay: 0.1s; transform: translate(-50%,-50%); }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_swap:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }

/* 14) Bell — the icon rings (rotates) on hover */
.oxyc-fancybtn-root .oxyc-fbtn-notify_bell .oxyc-fbtn-icon svg { transition: transform 1.2s ease; transform-origin: top center; }
.oxyc-fancybtn-root .oxyc-fbtn-notify_bell:hover .oxyc-fbtn-icon svg { transform: rotate(250deg); }
.oxyc-fancybtn-root .oxyc-fbtn-notify_bell:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }
.oxyc-fancybtn-root .oxyc-fbtn-notify_bell:active { transform: scale(0.97); }

/* 15) Text Roll — the label rolls up and a copy rolls in from below */
.oxyc-fancybtn-root .oxyc-fbtn-text_roll .oxyc-fbtn-label { overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-text_roll .oxyc-fbtn-text { transition: transform var(--oxc-dur) ease; }
.oxyc-fancybtn-root .oxyc-fbtn-text_roll .oxyc-fbtn-text2 {
	display: block; position: absolute; left: 0; right: 0; text-align: center;
	transform: translateY(1.2em); transition: transform var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-text_roll:hover .oxyc-fbtn-text { transform: translateY(-1.2em); }
.oxyc-fancybtn-root .oxyc-fbtn-text_roll:hover .oxyc-fbtn-text2 { transform: translateY(0); }
.oxyc-fancybtn-root .oxyc-fbtn-text_roll:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }

/* 16) Spin Icon — the icon spins continuously while hovered */
.oxyc-fancybtn-root .oxyc-fbtn-spin_icon:hover .oxyc-fbtn-icon svg { animation: oxyc-fbtn-spin 1s linear infinite; }
.oxyc-fancybtn-root .oxyc-fbtn-spin_icon:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }
.oxyc-fancybtn-root .oxyc-fbtn-spin_icon:active { transform: scale(0.97); }
@keyframes oxyc-fbtn-spin { to { transform: rotate(360deg); } }

/* 17) Arrow Expand — outlined pill; arrows slide across, an accent
   circle blooms from the centre and the corners tighten on hover. */
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand {
	background: transparent; color: var(--oxc-text);
	border-color: transparent; box-shadow: 0 0 0 var(--oxc-bw) var(--oxc-accent);
	border-radius: 100px; padding-left: 2.6em; padding-right: 2.6em;
	transition: color 0.6s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s cubic-bezier(0.23,1,0.32,1), border-radius 0.6s cubic-bezier(0.23,1,0.32,1), transform var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-arr {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	display: inline-flex; color: var(--oxc-accent);
	transition: all 0.8s cubic-bezier(0.23,1,0.32,1);
}
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-arr svg { width: 1.2em; height: 1.2em; display: block; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-arr1 { right: 1em; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-arr2 { left: -25%; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-circle {
	display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 1.2em; height: 1.2em; border-radius: 50%; opacity: 0; z-index: 0;
	background: var(--oxc-accent);
	transition: all 0.8s cubic-bezier(0.23,1,0.32,1);
}
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand .oxyc-fbtn-label { transition: transform 0.8s cubic-bezier(0.23,1,0.32,1); transform: translateX(-0.6em); }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:hover { color: var(--oxc-text-hover); box-shadow: 0 0 0 12px transparent; border-radius: 12px; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:hover .oxyc-fbtn-arr1 { right: -25%; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:hover .oxyc-fbtn-arr2 { left: 1em; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:hover .oxyc-fbtn-label { transform: translateX(0.6em); }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:hover .oxyc-fbtn-circle { width: 18em; height: 18em; opacity: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-arrow_expand:active { transform: scale(0.95); }

/* 18) Glow Border — animated rainbow gradient ring blooms on hover */
.oxyc-fancybtn-root .oxyc-fbtn-glow_border { background: transparent; border-color: transparent; overflow: visible; }
.oxyc-fancybtn-root .oxyc-fbtn-glow_border::before {
	content: ''; position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px);
	border-radius: inherit; z-index: -1; filter: blur(6px); opacity: 0; transition: opacity 0.3s ease;
	background: linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
	background-size: 400%; animation: oxyc-fbtn-glow 20s linear infinite;
}
.oxyc-fancybtn-root .oxyc-fbtn-glow_border::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--oxc-bg); }
.oxyc-fancybtn-root .oxyc-fbtn-glow_border:hover::before { opacity: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-glow_border:active { color: var(--oxc-text-hover); }
@keyframes oxyc-fbtn-glow { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }

/* 19) Snake Border — an accent line chases around the outline on hover;
   frosted-glass body. Uses an SVG rect so the dash animates cleanly. */
.oxyc-fancybtn-root .oxyc-fbtn-snake_border { background: rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: transparent; overflow: visible; }
.oxyc-fancybtn-root .oxyc-fbtn-snake_border:hover { background: rgba(255,255,255,0.16); }
.oxyc-fancybtn-root .oxyc-fbtn-snake { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; overflow: visible; z-index: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-snake rect {
	fill: none; stroke: var(--oxc-accent); stroke-width: 3; stroke-linejoin: round;
	rx: var(--oxc-radius); stroke-dasharray: 185%; stroke-dashoffset: 80; opacity: 0;
	transition: opacity 0.2s ease; animation: oxyc-fbtn-snake 2s linear infinite; animation-play-state: paused;
}
.oxyc-fancybtn-root .oxyc-fbtn-snake_border:hover .oxyc-fbtn-snake rect { opacity: 0.75; animation-play-state: running; }
@keyframes oxyc-fbtn-snake { to { stroke-dashoffset: 370%; } }

/* 20) Letter Rise — the resting cover slides down and the label rises in.
   (Word-level rise; a per-letter stagger would need extra markup.) */
/* 20) Letter Rise — the label slides up and out while the copy rises into
   place from below. Both live in one overflow-clipped label (no absolute
   cover), so the resting state shows exactly one clean line of text. */
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise { overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise .oxyc-fbtn-label { position: relative; overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise .oxyc-fbtn-original,
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise .oxyc-fbtn-rise { display: block; transition: transform var(--oxc-dur) ease; }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise .oxyc-fbtn-rise { position: absolute; left: 0; right: 0; text-align: center; transform: translateY(1.1em); }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise:hover .oxyc-fbtn-original { transform: translateY(-1.1em); }
.oxyc-fancybtn-root .oxyc-fbtn-letter_rise:hover .oxyc-fbtn-rise { transform: translateY(0); }

/* 21) Flip Up — the front text folds up and away while the second text folds
   in from below (real 3D rotateX around the shared edge). */
.oxyc-fancybtn-root .oxyc-fbtn-flip_up { overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up:hover { background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up .oxyc-fbtn-label { position: relative; display: inline-block; perspective: 320px; }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up .oxyc-fbtn-front,
.oxyc-fancybtn-root .oxyc-fbtn-flip_up .oxyc-fbtn-back { display: block; backface-visibility: hidden; transition: transform var(--oxc-dur) ease; }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up .oxyc-fbtn-back { position: absolute; left: 0; right: 0; top: 0; transform: rotateX(-90deg); transform-origin: center top; }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up:hover .oxyc-fbtn-front { transform: rotateX(90deg); transform-origin: center bottom; }
.oxyc-fancybtn-root .oxyc-fbtn-flip_up:hover .oxyc-fbtn-back { transform: rotateX(0deg); }

/* 22) Tooltip Swap — label slides up out, icon rises in, tooltip pops above.
   A wrapper clips the swap; the button itself stays overflow-visible so the
   tooltip can escape above it. */
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap { overflow: visible; }
.oxyc-fancybtn-root .oxyc-fbtn-tt-wrap { position: relative; display: block; width: 100%; height: 1.4em; overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-tt-text,
.oxyc-fancybtn-root .oxyc-fbtn-tt-icon {
	position: absolute; left: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; transition: top var(--oxc-dur) ease;
}
.oxyc-fancybtn-root .oxyc-fbtn-tt-text { top: 0; }
.oxyc-fancybtn-root .oxyc-fbtn-tt-icon { top: 100%; }
.oxyc-fancybtn-root .oxyc-fbtn-tt-icon svg { width: 1.2em; height: 1.2em; display: block; }
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap:hover .oxyc-fbtn-tt-text { top: -100%; }
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap:hover .oxyc-fbtn-tt-icon { top: 0; }
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap::before {
	content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
	background: var(--oxc-accent); color: var(--oxc-bg); font-size: 0.85em; line-height: 1; white-space: nowrap;
	padding: 0.5em 0.8em; border-radius: 0.4em; opacity: 0; visibility: hidden; transition: all 0.35s ease; z-index: 5;
}
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap::after {
	content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
	border: 8px solid transparent; border-top-color: var(--oxc-accent); opacity: 0; visibility: hidden; transition: all 0.35s ease; z-index: 5;
}
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap:hover::before,
.oxyc-fancybtn-root .oxyc-fbtn-tooltip_swap:hover::after { opacity: 1; visibility: visible; }

/* 23) Mask — an accent copy of the label is revealed through a soft round
   mask that follows the cursor (JS sets --x/--y); inner neon glow. */
.oxyc-fancybtn-root .oxyc-fbtn-mask { background: var(--oxc-bg); border-color: rgba(255,255,255,0.06); box-shadow: inset 0 0 12px 1px var(--oxc-accent); overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-mask-back {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3;
	color: var(--oxc-accent); pointer-events: none; font-weight: inherit; letter-spacing: inherit;
	-webkit-mask-image: radial-gradient(circle at var(--x,50%) var(--y,50%), #000 0, #000 2.2em, transparent 4.4em);
	mask-image: radial-gradient(circle at var(--x,50%) var(--y,50%), #000 0, #000 2.2em, transparent 4.4em);
}

/* 24) Cube 3D — the label sits on a cube that tips to reveal the 2nd text.
   Fixed cube size so the faces line up; text should be short. */
/* overflow:hidden clips the cube to its own box so the 3D faces can never
   project onto — and steal the hover of — neighbouring buttons. */
.oxyc-fancybtn-root .oxyc-fbtn-cube_3d { background: transparent; border-color: transparent; padding: 0; overflow: hidden; perspective: 600px; }
.oxyc-fancybtn-root .oxyc-fbtn-cube_3d .oxyc-fbtn-label { display: block; }
.oxyc-fancybtn-root .oxyc-fbtn-cube { position: relative; display: block; width: 9em; height: 3em; transform-style: preserve-3d; transition: transform 0.5s ease; }
.oxyc-fancybtn-root .oxyc-fbtn-cube_3d:hover .oxyc-fbtn-cube { transform: rotateX(-90deg); }
.oxyc-fancybtn-root .oxyc-fbtn-face {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: var(--oxc-bg); color: var(--oxc-text); border: var(--oxc-bw) solid var(--oxc-bc);
	border-radius: var(--oxc-radius); backface-visibility: hidden;
}
.oxyc-fancybtn-root .oxyc-fbtn-face1 { transform: rotateX(0deg) translateZ(1.5em); }
.oxyc-fancybtn-root .oxyc-fbtn-face2 { transform: rotateX(90deg) translateZ(1.5em); background: var(--oxc-bg-hover); color: var(--oxc-text-hover); border-color: var(--oxc-bg-hover); }

/* 25) Arrow Slide (GSAP) — the icon shoots out and re-enters. The motion is
   driven by GSAP; here we just prep the icon and clip it to the button. */
.oxyc-fancybtn-root .oxyc-fbtn-arrow_slide .oxyc-fbtn-icon { will-change: transform; }

/* 26) Circle Fill (GSAP) — a blob grows from the cursor and floods the button.
   GSAP positions/scales .oxyc-fbtn-bg-fill; colours come from the controls. */
.oxyc-fancybtn-root .oxyc-fbtn-circle_fill { background: var(--oxc-bg); color: var(--oxc-text); }
.oxyc-fancybtn-root .oxyc-fbtn-circle_fill .oxyc-fbtn-bg-fill {
	position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; z-index: 0;
	background: var(--oxc-accent); border-radius: 50%; pointer-events: none;
	transform: translate(-50%,-50%) scale(0);
}
.oxyc-fancybtn-root .oxyc-fbtn-circle_fill .oxyc-fbtn-label { z-index: 2; }
.oxyc-fancybtn-root .oxyc-fbtn-circle_fill:hover { color: var(--oxc-text-hover); }

/* 27) Char Stagger (GSAP) — the runtime splits the label into .oxyc-fbtn-char
   spans and ripples them on hover. */
.oxyc-fancybtn-root .oxyc-fbtn-char_stagger .oxyc-fbtn-char { display: inline-block; will-change: transform; }

/* 28) Glass — frosted glassmorphism; blur strength from the control. */
.oxyc-fancybtn-root .oxyc-fbtn-glass {
	background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 6px 24px rgba(0,0,0,0.10); color: var(--oxc-text);
	-webkit-backdrop-filter: blur(var(--oxc-glass-blur,16px)); backdrop-filter: blur(var(--oxc-glass-blur,16px));
}
.oxyc-fancybtn-root .oxyc-fbtn-glass:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); }

@media (prefers-reduced-motion: reduce) {
	.oxyc-fancybtn-root .oxyc-fbtn,
	.oxyc-fancybtn-root .oxyc-fbtn-fill,
	.oxyc-fancybtn-root .oxyc-fbtn-bubbles,
	.oxyc-fancybtn-root .oxyc-fbtn-icon,
	.oxyc-fancybtn-root .oxyc-fbtn-icon svg,
	.oxyc-fancybtn-root .oxyc-fbtn-arr,
	.oxyc-fancybtn-root .oxyc-fbtn-circle,
	.oxyc-fancybtn-root .oxyc-fbtn-text,
	.oxyc-fancybtn-root .oxyc-fbtn-text2,
	.oxyc-fancybtn-root .oxyc-fbtn-cube,
	.oxyc-fancybtn-root .oxyc-fbtn-original,
	.oxyc-fancybtn-root .oxyc-fbtn-rise,
	.oxyc-fancybtn-root .oxyc-fbtn-front,
	.oxyc-fancybtn-root .oxyc-fbtn-back,
	.oxyc-fancybtn-root .oxyc-fbtn-snake rect,
	.oxyc-fancybtn-root .oxyc-fbtn-glow_border::before,
	.oxyc-fancybtn-root .oxyc-fbtn-marq-inner { transition: none !important; animation: none !important; }
}


/* ---- Effect direction (Neon Sweep / Outline Fill) via data-fdir ---- */
.oxyc-fancybtn-root[data-fdir="right"] .oxyc-fbtn-neon_sweep .oxyc-fbtn-fill { transform: translateX(101%); }
.oxyc-fancybtn-root[data-fdir="top"] .oxyc-fbtn-neon_sweep .oxyc-fbtn-fill { transform: translateY(-101%); }
.oxyc-fancybtn-root[data-fdir="bottom"] .oxyc-fbtn-neon_sweep .oxyc-fbtn-fill { transform: translateY(101%); }
.oxyc-fancybtn-root .oxyc-fbtn-neon_sweep:hover .oxyc-fbtn-fill { transform: translate(0,0); }
.oxyc-fancybtn-root[data-fdir="top"] .oxyc-fbtn-outline_fill .oxyc-fbtn-fill { transform: scaleY(0); transform-origin: top; }
.oxyc-fancybtn-root[data-fdir="left"] .oxyc-fbtn-outline_fill .oxyc-fbtn-fill { transform: scaleX(0); transform-origin: left; }
.oxyc-fancybtn-root[data-fdir="right"] .oxyc-fbtn-outline_fill .oxyc-fbtn-fill { transform: scaleX(0); transform-origin: right; }
.oxyc-fancybtn-root .oxyc-fbtn-outline_fill:hover .oxyc-fbtn-fill { transform: scale(1,1); }

/* ---- Marquee edge-to-edge via data-edge ---- */
.oxyc-fancybtn-root[data-edge="1"] .oxyc-fbtn-marquee .oxyc-fbtn-marq { left: 0; right: 0; }


/* ============================================================
   Wheelomat & Color Tennis — rebuilt from the REAL site structure
   (button-wheelomat / button-color-tennis by Eduard Bodak). The rest
   state + eases + sizes are ported 1:1; colours use OxyCloud variables.
   The hover MOTION is a CSS reproduction of the GSAP mechanism
   (Wheelomat: a text drum rotating around the left "line" axle;
   Color Tennis: three staggered colour dots).
   ============================================================ */
/* --- Wheelomat --- */
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat { display: inline-grid; padding: 0; background: var(--oxc-bg); border-radius: var(--oxc-radius); border: none; overflow: clip; box-shadow: none; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-bg { grid-area: 1/1; background: var(--oxc-bg); border-radius: var(--oxc-radius); }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-cont { grid-area: 1/1; display: grid; overflow: clip; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-inner { grid-area: 1/1; display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem 0.875rem 0.75rem; transform-origin: 0% center; transition: rotate 0.5s var(--oxc-elastic), translate 0.5s var(--oxc-elastic); }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-line { flex: none; width: 0.9375rem; height: 0.25rem; border-radius: 0.3125rem; background: var(--oxc-accent); }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-txt { color: var(--oxc-text); white-space: nowrap; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-h1 { rotate: 90deg; translate: -0.25rem; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-h2 { rotate: 180deg; translate: -0.25rem; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat .oxyc-fbtn-wm-inner { transition: rotate 0.5s var(--oxc-elastic), opacity 0.3s ease; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat:hover .oxyc-fbtn-wm-inner { rotate: -90deg; opacity: 0; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat:hover .oxyc-fbtn-wm-h1 { opacity: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat:hover .oxyc-fbtn-wm-h1 { rotate: 0deg; }
.oxyc-fancybtn-root .oxyc-fbtn-wheelomat:hover .oxyc-fbtn-wm-h2 { rotate: 90deg; }

/* --- Color Tennis --- */
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis { display: inline-grid; padding: 0; background: var(--oxc-bg); border-radius: var(--oxc-radius); border: none; overflow: clip; box-shadow: none; --ct-dot: 1.625rem; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-bg { grid-area: 1/1; background: var(--oxc-bg); border-radius: var(--oxc-radius); }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-inner { grid-area: 1/1; display: grid; padding: 0.875rem 1.125rem 0.875rem 2.75rem; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-txt { grid-area: 1/1; z-index: 1; color: var(--oxc-text); white-space: nowrap; will-change: transform; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-dotwrap { grid-area: 1/1; display: grid; align-items: center; justify-items: start; padding-left: 0.625rem; z-index: 2; pointer-events: none; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-dot { width: var(--ct-dot); height: var(--ct-dot); border-radius: 50%; background: var(--oxc-accent); will-change: transform; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-d2 { background: #8000ff; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tennis .oxyc-fbtn-ct-d3 { background: #ff00aa; }


/* ============================================================
   Color Tunes — GSAP-driven. Equalizer bars pop up staggered and
   fill the background; the text recolours. (Motion in runtime.)
   ============================================================ */
.oxyc-fancybtn-root .oxyc-fbtn-color_tunes { position: relative; overflow: hidden; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tunes .oxyc-fbtn-tunes { position: absolute; inset: 0; display: flex; z-index: 1; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tunes .oxyc-fbtn-bar { flex: 1; transform: scaleY(0); transform-origin: bottom; will-change: transform; }
.oxyc-fancybtn-root .oxyc-fbtn-color_tunes .oxyc-fbtn-bar { background: var(--oxc-accent); }
.oxyc-fancybtn-root .oxyc-fbtn-color_tunes .oxyc-fbtn-label { position: relative; z-index: 2; }