/**
 * Cinematic Button v1.2.0 — Frontend CSS
 * Mobile-first · Anti-conflict · Scoped
 */

/* ── Custom Properties ─────────────────────── */
.cinematic-button-wrapper {
	--cb-c1:  #e74c3c;
	--cb-c2:  #e67e22;
	--cb-c3:  #f1c40f;
	--cb-c4:  #2ecc71;
	--cb-c5:  #1abc9c;
	--cb-c6:  #3498db;
	--cb-c7:  #9b59b6;
	--cb-c8:  #e91e63;
	--cb-c9:  #ff5722;
	--cb-c10: #00bcd4;
	--cb-dur: 6s;
}

/* ── Reset scoped ──────────────────────────── */
.cinematic-button-wrapper,
.cinematic-button-wrapper * {
	box-sizing: border-box;
}

/* ── Wrapper ───────────────────────────────── */
.cinematic-button-wrapper {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	padding: 8px 0;
}

/* ── Anchor base ───────────────────────────── */
.cinematic-btn {
	position: relative;
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	overflow: hidden;
	padding: 18px 45px;
	min-width: 140px;
	min-height: 52px;
	border: none;
	outline: none;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	/* color cycle */
	background-color: var(--cb-c1);
	-webkit-animation: cbColors var(--cb-dur) infinite ease-in-out;
	animation: cbColors var(--cb-dur) infinite ease-in-out;

	/* shadow */
	box-shadow:
		0 8px 25px rgba(0,0,0,.3),
		0 4px 10px rgba(0,0,0,.2),
		inset 0 1px 0 rgba(255,255,255,.15);

	-webkit-transition: -webkit-transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease;
	transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease;
}

/* ── 10-color cycle ────────────────────────── */
@-webkit-keyframes cbColors {
	0%   { background-color: var(--cb-c1);  box-shadow: 0 8px 28px rgba(231,76,60,.55),  0 0 55px rgba(231,76,60,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	10%  { background-color: var(--cb-c2);  box-shadow: 0 8px 28px rgba(230,126,34,.55), 0 0 55px rgba(230,126,34,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	20%  { background-color: var(--cb-c3);  box-shadow: 0 8px 28px rgba(241,196,15,.55), 0 0 55px rgba(241,196,15,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	30%  { background-color: var(--cb-c4);  box-shadow: 0 8px 28px rgba(46,204,113,.55), 0 0 55px rgba(46,204,113,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	40%  { background-color: var(--cb-c5);  box-shadow: 0 8px 28px rgba(26,188,156,.55), 0 0 55px rgba(26,188,156,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	50%  { background-color: var(--cb-c6);  box-shadow: 0 8px 28px rgba(52,152,219,.55), 0 0 55px rgba(52,152,219,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	60%  { background-color: var(--cb-c7);  box-shadow: 0 8px 28px rgba(155,89,182,.55), 0 0 55px rgba(155,89,182,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	70%  { background-color: var(--cb-c8);  box-shadow: 0 8px 28px rgba(233,30,99,.55),  0 0 55px rgba(233,30,99,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	80%  { background-color: var(--cb-c9);  box-shadow: 0 8px 28px rgba(255,87,34,.55),  0 0 55px rgba(255,87,34,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	90%  { background-color: var(--cb-c10); box-shadow: 0 8px 28px rgba(0,188,212,.55),  0 0 55px rgba(0,188,212,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	100% { background-color: var(--cb-c1);  box-shadow: 0 8px 28px rgba(231,76,60,.55),  0 0 55px rgba(231,76,60,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
}
@keyframes cbColors {
	0%   { background-color: var(--cb-c1);  box-shadow: 0 8px 28px rgba(231,76,60,.55),  0 0 55px rgba(231,76,60,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	10%  { background-color: var(--cb-c2);  box-shadow: 0 8px 28px rgba(230,126,34,.55), 0 0 55px rgba(230,126,34,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	20%  { background-color: var(--cb-c3);  box-shadow: 0 8px 28px rgba(241,196,15,.55), 0 0 55px rgba(241,196,15,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	30%  { background-color: var(--cb-c4);  box-shadow: 0 8px 28px rgba(46,204,113,.55), 0 0 55px rgba(46,204,113,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	40%  { background-color: var(--cb-c5);  box-shadow: 0 8px 28px rgba(26,188,156,.55), 0 0 55px rgba(26,188,156,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	50%  { background-color: var(--cb-c6);  box-shadow: 0 8px 28px rgba(52,152,219,.55), 0 0 55px rgba(52,152,219,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	60%  { background-color: var(--cb-c7);  box-shadow: 0 8px 28px rgba(155,89,182,.55), 0 0 55px rgba(155,89,182,.25), inset 0 1px 0 rgba(255,255,255,.15); }
	70%  { background-color: var(--cb-c8);  box-shadow: 0 8px 28px rgba(233,30,99,.55),  0 0 55px rgba(233,30,99,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	80%  { background-color: var(--cb-c9);  box-shadow: 0 8px 28px rgba(255,87,34,.55),  0 0 55px rgba(255,87,34,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	90%  { background-color: var(--cb-c10); box-shadow: 0 8px 28px rgba(0,188,212,.55),  0 0 55px rgba(0,188,212,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
	100% { background-color: var(--cb-c1);  box-shadow: 0 8px 28px rgba(231,76,60,.55),  0 0 55px rgba(231,76,60,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
}

/* ── Hover / Active ────────────────────────── */
.cinematic-btn:hover {
	-webkit-transform: scale(1.06) translateY(-3px);
	transform: scale(1.06) translateY(-3px);
	text-decoration: none !important;
}
.cinematic-btn:active {
	-webkit-transform: scale(.97) translateY(1px);
	transform: scale(.97) translateY(1px);
	-webkit-transition-duration: .08s;
	transition-duration: .08s;
}

/* ── Text ──────────────────────────────────── */
.cinematic-btn__text {
	position: relative;
	z-index: 10;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #fff !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .5px;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	text-shadow:
		0 0 5px rgba(0,0,0,.8),
		0 2px 4px rgba(0,0,0,.5);
	-webkit-transition: letter-spacing .3s ease;
	transition: letter-spacing .3s ease;
}
.cinematic-btn:hover .cinematic-btn__text {
	letter-spacing: 1.5px;
}

/* ── Inner border glow ─────────────────────── */
.cinematic-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,.08),rgba(255,255,255,.45));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
	background-size: 200% 200%;
	-webkit-animation: cbBorder 4s linear infinite;
	animation: cbBorder 4s linear infinite;
}
@-webkit-keyframes cbBorder {
	0%,100% { background-position: 0% 0%; }
	50%      { background-position: 100% 100%; }
}
@keyframes cbBorder {
	0%,100% { background-position: 0% 0%; }
	50%      { background-position: 100% 100%; }
}

/* ── Scanline ──────────────────────────────── */
.cinematic-btn::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);
	z-index: 6;
	pointer-events: none;
	-webkit-animation: cbScan 4s linear infinite;
	animation: cbScan 4s linear infinite;
}
@-webkit-keyframes cbScan {
	0%   { top: -100%; }
	100% { top:  200%; }
}
@keyframes cbScan {
	0%   { top: -100%; }
	100% { top:  200%; }
}

/* ── Shimmer ───────────────────────────────── */
.cinematic-btn.cb-has-shimmer .cinematic-btn__shimmer {
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
	-webkit-transform: skewX(-15deg);
	transform: skewX(-15deg);
	z-index: 5;
	pointer-events: none;
	-webkit-animation: cbShimmer 3s infinite ease-in-out;
	animation: cbShimmer 3s infinite ease-in-out;
}
@-webkit-keyframes cbShimmer {
	0%  { left: -120%; opacity: 0; }
	8%  { opacity: 1; }
	48% { left: 160%; opacity: 1; }
	56% { opacity: 0; }
	100%{ left: 160%; opacity: 0; }
}
@keyframes cbShimmer {
	0%  { left: -120%; opacity: 0; }
	8%  { opacity: 1; }
	48% { left: 160%; opacity: 1; }
	56% { opacity: 0; }
	100%{ left: 160%; opacity: 0; }
}

/* ── Glow ──────────────────────────────────── */
.cinematic-btn.cb-has-glow .cinematic-btn__glow {
	position: absolute;
	inset: -5px;
	border-radius: inherit;
	background: inherit;
	-webkit-filter: blur(14px);
	filter: blur(14px);
	opacity: .3;
	z-index: -1;
	pointer-events: none;
	-webkit-animation: cbGlow 3s ease-in-out infinite;
	animation: cbGlow 3s ease-in-out infinite;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
}
@-webkit-keyframes cbGlow {
	0%,100% { opacity: .25; -webkit-filter: blur(12px); filter: blur(12px); }
	50%      { opacity: .55; -webkit-filter: blur(20px); filter: blur(20px); }
}
@keyframes cbGlow {
	0%,100% { opacity: .25; filter: blur(12px); }
	50%      { opacity: .55; filter: blur(20px); }
}
.cinematic-btn:hover .cinematic-btn__glow {
	opacity: .8;
	-webkit-filter: blur(22px);
	filter: blur(22px);
}

/* ── Ripple ────────────────────────────────── */
.cinematic-btn.cb-has-ripple .cinematic-btn__ripple {
	position: absolute;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.45);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 8;
	pointer-events: none;
	opacity: 0;
}
.cinematic-btn.cb-has-ripple .cinematic-btn__ripple.cb-ripple-go {
	-webkit-animation: cbRipple .7s cubic-bezier(0,.2,.8,1) forwards;
	animation: cbRipple .7s cubic-bezier(0,.2,.8,1) forwards;
}
@-webkit-keyframes cbRipple {
	0%   { width: 0;     height: 0;     opacity: .6; }
	100% { width: 380px; height: 380px; opacity: 0;  }
}
@keyframes cbRipple {
	0%   { width: 0;     height: 0;     opacity: .6; }
	100% { width: 380px; height: 380px; opacity: 0;  }
}

/* ── Particles ─────────────────────────────── */
.cinematic-btn.cb-has-particles .cinematic-btn__particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	z-index: 4;
}
.cinematic-btn.cb-has-particles .cb-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: rgba(255,255,255,.65);
	border-radius: 50%;
	opacity: 0;
	-webkit-animation: cbParticle 4s ease-in-out infinite;
	animation: cbParticle 4s ease-in-out infinite;
}
.cinematic-btn.cb-has-particles .cb-particle:nth-child(1) { left: 12%; bottom: 0; -webkit-animation-delay: 0s;    animation-delay: 0s;    -webkit-animation-duration: 3.5s; animation-duration: 3.5s; }
.cinematic-btn.cb-has-particles .cb-particle:nth-child(2) { left: 30%; bottom: 0; -webkit-animation-delay: .7s;   animation-delay: .7s;   -webkit-animation-duration: 4.2s; animation-duration: 4.2s; width:6px; height:6px; }
.cinematic-btn.cb-has-particles .cb-particle:nth-child(3) { left: 52%; bottom: 0; -webkit-animation-delay: 1.4s;  animation-delay: 1.4s;  -webkit-animation-duration: 3.1s; animation-duration: 3.1s; width:3px; height:3px; }
.cinematic-btn.cb-has-particles .cb-particle:nth-child(4) { left: 72%; bottom: 0; -webkit-animation-delay: 2.1s;  animation-delay: 2.1s;  -webkit-animation-duration: 4.6s; animation-duration: 4.6s; }
.cinematic-btn.cb-has-particles .cb-particle:nth-child(5) { left: 88%; bottom: 0; -webkit-animation-delay: 2.8s;  animation-delay: 2.8s;  -webkit-animation-duration: 3.8s; animation-duration: 3.8s; width:5px; height:5px; }

@-webkit-keyframes cbParticle {
	0%   { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity: 0; }
	10%  { opacity: .9; }
	90%  { opacity: .4; }
	100% { -webkit-transform: translateY(-65px) rotate(360deg); transform: translateY(-65px) rotate(360deg); opacity: 0; }
}
@keyframes cbParticle {
	0%   { transform: translateY(0) rotate(0deg);    opacity: 0; }
	10%  { opacity: .9; }
	90%  { opacity: .4; }
	100% { transform: translateY(-65px) rotate(360deg); opacity: 0; }
}
.cinematic-btn.cb-has-particles .cb-particle.cb-p-boost {
	-webkit-animation-duration: 1.8s !important;
	animation-duration: 1.8s !important;
	opacity: 1 !important;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 575px) {
	.cinematic-btn {
		padding: 15px 28px;
		min-width: 120px;
	}
	.cinematic-btn:hover {
		-webkit-transform: scale(1.03) translateY(-2px);
		transform: scale(1.03) translateY(-2px);
	}
	.cinematic-btn.cb-has-particles .cb-particle:nth-child(4),
	.cinematic-btn.cb-has-particles .cb-particle:nth-child(5) { display: none; }
}
@media (max-width: 360px) {
	.cinematic-btn {
		width: 100% !important;
		padding: 14px 20px;
	}
	.cinematic-btn__text { white-space: normal; text-align: center; }
}

/* ── Reduced motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cinematic-btn,
	.cinematic-btn::before,
	.cinematic-btn::after,
	.cinematic-btn__shimmer,
	.cinematic-btn__glow,
	.cinematic-btn__particles .cb-particle {
		-webkit-animation: none !important;
		animation: none !important;
	}
	.cinematic-btn { background: #3498db !important; }
}

/* ── Focus ─────────────────────────────────── */
.cinematic-btn:focus-visible {
	outline: 3px solid rgba(255,255,255,.85);
	outline-offset: 4px;
}

/* ── Print ─────────────────────────────────── */
@media print {
	.cinematic-btn {
		-webkit-animation: none !important;
		animation: none !important;
		background: #3498db !important;
		box-shadow: none !important;
		color: #fff !important;
	}
	.cinematic-btn__shimmer,
	.cinematic-btn__glow,
	.cinematic-btn__particles { display: none !important; }
}