/* btn-mm
   Middle Mann's signature button. Self-contained. Does NOT depend on
   Bootstrap's .btn or Nova theme's .btn-mod. Use the classes below
   directly in markup, never alongside btn / btn-mod / btn-large / btn-round.

   Classes:
     .btn-mm          filled blue, breathes (7s) and shines (11s)
     .btn-mm-ghost    transparent outline, no animation
     .btn-mm-large    size modifier for hero CTAs
     .btn-mm-block    full-width modifier for form submits

   The shine effect requires the companion btn-mm.js to randomize the
   per-instance starting angle and delay; without it the shine still
   runs but every button shines in unison at the same position. */

/* @property registration. Animatable conic-gradient angle requires
   the browser to know --ang is an <angle>, otherwise the keyframe
   interpolates it as a string and the shine stays static. */
@property --ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* Base button. a/button selectors reset link/button user-agent styles
   without needing a .btn wrapper class. */
a.btn-mm,
button.btn-mm,
a.btn-mm-ghost,
button.btn-mm-ghost {
	box-sizing: border-box;
	display: inline-block;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	transition: none;
}

/* Filled variant: brand blue fill, breathing pulse, racing shine. */
a.btn-mm,
button.btn-mm {
	color: #fff;
	background: rgba(0, 180, 255, 0.20);
	border: 1px solid var(--mm-accent, #00B4FF);
	position: relative;
	isolation: isolate;
	animation: mmBtnBreathe 7s ease-in-out infinite;
}

a.btn-mm:hover,
a.btn-mm:focus,
button.btn-mm:hover,
button.btn-mm:focus {
	color: #fff;
	background: rgba(0, 180, 255, 0.35);
	border-color: var(--mm-accent, #00B4FF);
	outline: none;
	animation-play-state: paused;
}

/* Shine layer. Sits on the 1px blue border via inset:-1px + padding:1px
   + mask-composite:exclude to carve out the interior. */
a.btn-mm::after,
button.btn-mm::after {
	content: "";
	position: absolute;
	box-sizing: content-box;
	inset: -1px;
	padding: 1px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	background: conic-gradient(
		from var(--ang, 0deg),
		rgba(255, 255, 255, 0)   0deg,
		rgba(255, 255, 255, 0)   78deg,
		rgba(255, 255, 255, 0.5) 86deg,
		rgba(255, 255, 255, 1)   90deg,
		rgba(255, 255, 255, 0.5) 94deg,
		rgba(255, 255, 255, 0)   102deg,
		rgba(255, 255, 255, 0)   360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
	        drop-shadow(0 0 1px rgba(255, 255, 255, 1));
	animation: mmBtnShine 11s ease-in-out infinite;
}

a.btn-mm:hover::after,
button.btn-mm:hover::after { animation-play-state: paused; }

/* Ghost variant: outline only, no animation. */
a.btn-mm-ghost,
button.btn-mm-ghost {
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
}
a.btn-mm-ghost:hover,
a.btn-mm-ghost:focus,
button.btn-mm-ghost:hover,
button.btn-mm-ghost:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	border-color: #fff;
	outline: none;
}

/* Size modifier: hero CTAs */
a.btn-mm.btn-mm-large,
button.btn-mm.btn-mm-large,
a.btn-mm-ghost.btn-mm-large,
button.btn-mm-ghost.btn-mm-large {
	padding: 18px 36px;
	font-size: 15px;
}

/* Full-width modifier: form submits */
a.btn-mm.btn-mm-block,
button.btn-mm.btn-mm-block,
a.btn-mm-ghost.btn-mm-block,
button.btn-mm-ghost.btn-mm-block {
	display: block;
	width: 100%;
}

/* Breathe: gentle pulse on fill, border, and outer glow. */
@keyframes mmBtnBreathe {
	0%, 100% {
		background-color: rgba(0, 180, 255, 0.18);
		border-color: rgba(0, 180, 255, 0.85);
		box-shadow: 0 0 0 rgba(0, 180, 255, 0);
	}
	50% {
		background-color: rgba(0, 180, 255, 0.30);
		border-color: rgba(0, 180, 255, 1);
		box-shadow: 0 0 16px rgba(0, 180, 255, 0.35);
	}
}

/* Shine: arc invisible 80% of cycle, fades in, races 540deg, fades out.
   The JS rerolls --start-ang each iteration so the arc never lands twice
   in the same spot. */
@keyframes mmBtnShine {
	0%        { opacity: 0; --ang: var(--start-ang, 0deg); }
	8%        { opacity: 1; }
	72%       { opacity: 1; }
	80%, 100% { opacity: 0; --ang: calc(var(--start-ang, 0deg) + 540deg); }
}

@media (prefers-reduced-motion: reduce) {
	a.btn-mm,
	button.btn-mm,
	a.btn-mm::after,
	button.btn-mm::after { animation: none; }
	a.btn-mm::after,
	button.btn-mm::after { opacity: 0; }
}