/* ── CAHOPE Button ───────────────────────────────────────────────────── */

:root {
	--cb-bg:          #e8446f;
	--cb-bg-hover:    #c4284f;
	--cb-color:       #ffffff;
	--cb-color-hover: #ffffff;
	--cb-border:      transparent;
	--cb-border-hover:transparent;
	--cb-icon-gap:    8px;
}

.cb-outer {
	display: flex;
}

.cb-wrap {
	display: inline-block;
}

/* ── Base Button ─────────────────────────────────────────────────────── */

.cb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--cb-icon-gap, 8px);
	padding: 14px 32px;
	background: var(--cb-bg);
	color: var(--cb-color);
	border: 2px solid var(--cb-border);
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.cb-label {
	position: relative;
	z-index: 1;
}

.cb-icon-wrap {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
}

.cb-icon {
	display: block;
	transition: transform 0.3s ease;
}

/* ── Effect layer (shared by fill & ripple) ──────────────────────────── */

.cb-effect {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   1. SHIMMER SWEEP
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="shimmer"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="shimmer"] .cb-btn::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,0.45) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	z-index: 1;
	pointer-events: none;
}

[data-anim="shimmer"] .cb-btn:hover {
	background: var(--cb-bg-hover);
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
}

[data-anim="shimmer"] .cb-btn:hover::after {
	left: 140%;
}

/* ════════════════════════════════════════════════════════════════════════
   2. FILL FROM LEFT
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="fill-left"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="fill-left"] .cb-effect {
	background: var(--cb-bg-hover);
	transform: scaleX(0);
	transform-origin: left center;
}

[data-anim="fill-left"] .cb-btn:hover {
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
}

[data-anim="fill-left"] .cb-btn:hover .cb-effect {
	transform: scaleX(1);
}

/* ════════════════════════════════════════════════════════════════════════
   3. FILL FROM RIGHT
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="fill-right"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="fill-right"] .cb-effect {
	background: var(--cb-bg-hover);
	transform: scaleX(0);
	transform-origin: right center;
}

[data-anim="fill-right"] .cb-btn:hover {
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
}

[data-anim="fill-right"] .cb-btn:hover .cb-effect {
	transform: scaleX(1);
}

/* ════════════════════════════════════════════════════════════════════════
   4. FILL FROM BOTTOM
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="fill-up"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="fill-up"] .cb-effect {
	background: var(--cb-bg-hover);
	transform: scaleY(0);
	transform-origin: bottom center;
}

[data-anim="fill-up"] .cb-btn:hover {
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
}

[data-anim="fill-up"] .cb-btn:hover .cb-effect {
	transform: scaleY(1);
}

/* ════════════════════════════════════════════════════════════════════════
   5. RIPPLE
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="ripple"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="ripple"] .cb-effect {
	border-radius: 50%;
	background: var(--cb-bg-hover);
	width: 0; height: 0;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0.6;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, width 0s, height 0s;
}

[data-anim="ripple"] .cb-btn:hover {
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
}

[data-anim="ripple"] .cb-btn:hover .cb-effect {
	width: 250%; height: 250%;
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   6. BOUNCE UP
   ════════════════════════════════════════════════════════════════════════ */

[data-anim="bounce"] .cb-btn {
	background: var(--cb-bg);
}

[data-anim="bounce"] .cb-btn:hover {
	background: var(--cb-bg-hover);
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
	transform: translateY(-5px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

[data-anim="bounce"] .cb-btn:active {
	transform: translateY(-2px);
}

[data-anim="bounce"] .cb-btn:hover .cb-icon {
	transform: translateX(4px);
}

/* ════════════════════════════════════════════════════════════════════════
   7. PULSE GLOW
   ════════════════════════════════════════════════════════════════════════ */

@keyframes cb-pulse-ring {
	0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--cb-bg) 70%, transparent); }
	70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--cb-bg) 0%, transparent); }
	100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--cb-bg) 0%, transparent); }
}

[data-anim="pulse"] .cb-btn {
	background: var(--cb-bg);
	animation: cb-pulse-ring 2s ease-out infinite;
}

[data-anim="pulse"] .cb-btn:hover {
	background: var(--cb-bg-hover);
	color: var(--cb-color-hover);
	border-color: var(--cb-border-hover);
	animation: none;
	box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

/* ── Icon direction nudge on hover (bounce + shimmer) ────────────────── */

[data-anim="shimmer"] .cb-btn:hover .cb-icon-wrap--right .cb-icon,
[data-anim="fill-left"] .cb-btn:hover .cb-icon-wrap--right .cb-icon,
[data-anim="fill-right"] .cb-btn:hover .cb-icon-wrap--right .cb-icon {
	transform: translateX(3px);
}

[data-anim="shimmer"] .cb-btn:hover .cb-icon-wrap--left .cb-icon,
[data-anim="fill-left"] .cb-btn:hover .cb-icon-wrap--left .cb-icon,
[data-anim="fill-right"] .cb-btn:hover .cb-icon-wrap--left .cb-icon {
	transform: translateX(-3px);
}

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cb-btn,
	.cb-btn::after,
	.cb-effect,
	.cb-icon { transition: none !important; animation: none !important; }
}