/**
 * MGID Ad URL Viewer - Inline Ad Pill Buttons
 * Version: 3.1.0
 *
 * Pill-style inline ad buttons injected into article paragraphs.
 * All visual properties driven by CSS custom properties set from JS settings.
 * Includes high-CTR animations: pulse glow, hover effects,
 * entry animations, and shimmer shine effect.
 */

/* --------------------------------------------------------
 *  CSS Custom Properties (defaults, overridden by JS)
 * ------------------------------------------------------- */
:root {
	--mgid-font-size: 14px;
	--mgid-padding-v: 8px;
	--mgid-padding-h: 18px;
	--mgid-border-radius: 20px;
	--mgid-bg-color: #007BFF;
	--mgid-text-color: #ffffff;
	--mgid-hover-bg-color: #0056b3;
	--mgid-gradient-color2: #0056b3;
	--mgid-pulse-color: rgba(0, 123, 255, 0.4);
	--mgid-pulse-interval: 3.5s;
	--mgid-shimmer-interval: 5.5s;
	--mgid-hover-scale: 1.08;
	--mgid-bg: linear-gradient(135deg, var(--mgid-bg-color) 0%, var(--mgid-gradient-color2) 100%);
}

/* --------------------------------------------------------
 *  Keyframe Animations
 * ------------------------------------------------------- */

/* Subtle breathing pulse glow */
@keyframes mgidPulseGlow {
	0%, 100% {
		box-shadow: 0 2px 8px var(--mgid-pulse-color);
	}
	50% {
		box-shadow: 0 2px 16px var(--mgid-pulse-color), 0 0 24px var(--mgid-pulse-color);
	}
}

/* Entry animation: slide in from left with slight bounce */
@keyframes mgidSlideIn {
	0% {
		opacity: 0;
		transform: translateX(-12px) scale(0.92);
	}
	60% {
		opacity: 1;
		transform: translateX(3px) scale(1.03);
	}
	80% {
		transform: translateX(-1px) scale(0.99);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* Entry animation: fade in */
@keyframes mgidFadeIn {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Entry animation: bounce */
@keyframes mgidBounce {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.08);
	}
	70% {
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Shimmer / shine sweep - subtle light moving left to right */
@keyframes mgidShimmer {
	0% {
		background-position: -150% center;
	}
	100% {
		background-position: 250% center;
	}
}

/* --------------------------------------------------------
 *  Inline pill button
 * ------------------------------------------------------- */
a.mgid-inline-pill {
	display: inline-block;
	background: var(--mgid-bg);
	color: var(--mgid-text-color) !important;
	border-radius: var(--mgid-border-radius);
	padding: var(--mgid-padding-v) var(--mgid-padding-h);
	font-size: var(--mgid-font-size);
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none !important;
	margin: 2px 6px;
	border: none;
	outline: none;
	white-space: nowrap;
	letter-spacing: 0.3px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	position: relative;
	overflow: hidden;

	/* Default shadow from pulse color */
	box-shadow: 0 2px 8px var(--mgid-pulse-color);

	/* Hover transition */
	transition:
		transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		background 0.25s ease,
		box-shadow 0.25s ease;
}

/* --------------------------------------------------------
 *  Animation classes (applied by JS based on settings)
 * ------------------------------------------------------- */
a.mgid-inline-pill.mgid-anim-slideIn {
	animation: mgidSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

a.mgid-inline-pill.mgid-anim-fadeIn {
	animation: mgidFadeIn 0.4s ease both;
}

a.mgid-inline-pill.mgid-anim-bounce {
	animation: mgidBounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Pulse animation class */
a.mgid-inline-pill.mgid-has-pulse {
	animation: mgidPulseGlow var(--mgid-pulse-interval) ease-in-out 1s infinite;
}

/* Combined entry + pulse */
a.mgid-inline-pill.mgid-anim-slideIn.mgid-has-pulse {
	animation:
		mgidSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both,
		mgidPulseGlow var(--mgid-pulse-interval) ease-in-out 1s infinite;
}

a.mgid-inline-pill.mgid-anim-fadeIn.mgid-has-pulse {
	animation:
		mgidFadeIn 0.4s ease both,
		mgidPulseGlow var(--mgid-pulse-interval) ease-in-out 1s infinite;
}

a.mgid-inline-pill.mgid-anim-bounce.mgid-has-pulse {
	animation:
		mgidBounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both,
		mgidPulseGlow var(--mgid-pulse-interval) ease-in-out 1s infinite;
}

/* --------------------------------------------------------
 *  Shimmer shine pseudo-element
 * ------------------------------------------------------- */
a.mgid-inline-pill.mgid-has-shimmer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		105deg,
		transparent 20%,
		rgba(255, 255, 255, 0.18) 40%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0.18) 60%,
		transparent 80%
	);
	background-size: 200% 100%;
	background-position: -150% center;
	animation: mgidShimmer var(--mgid-shimmer-interval) ease-in-out 2s infinite;
	border-radius: inherit;
	pointer-events: none;
}

/* Arrow icon */
a.mgid-inline-pill .mgid-pill-arrow {
	font-size: calc(var(--mgid-font-size) + 1px);
	margin-left: 3px;
	display: inline-block;
	transition: transform 0.25s ease;
}

/* --------------------------------------------------------
 *  Hover & Focus
 * ------------------------------------------------------- */
a.mgid-inline-pill:hover,
a.mgid-inline-pill:focus {
	background: var(--mgid-hover-bg-color) !important;
	color: var(--mgid-text-color) !important;
	text-decoration: none !important;
	transform: scale(var(--mgid-hover-scale));
	box-shadow:
		0 4px 18px var(--mgid-pulse-color),
		0 0 30px var(--mgid-pulse-color);
	outline: none;
}

a.mgid-inline-pill:hover .mgid-pill-arrow {
	transform: translate(2px, -2px);
}

/* Pause pulse glow on hover so it doesn't fight the hover shadow */
a.mgid-inline-pill:hover {
	animation-name: none;
}

a.mgid-inline-pill:active {
	transform: scale(1.03);
	box-shadow: 0 2px 10px var(--mgid-pulse-color);
}

a.mgid-inline-pill:visited {
	color: var(--mgid-text-color) !important;
}

/* --------------------------------------------------------
 *  Reduced motion: respect user preferences
 * ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	a.mgid-inline-pill {
		animation: none !important;
		transition: background-color 0.2s ease;
	}
	a.mgid-inline-pill::after {
		animation: none !important;
	}
	a.mgid-inline-pill:hover,
	a.mgid-inline-pill:focus {
		transform: none;
	}
}

/* --------------------------------------------------------
 *  Print: hide pill buttons
 * ------------------------------------------------------- */
@media print {
	a.mgid-inline-pill {
		display: none !important;
	}
}

/* --------------------------------------------------------
 *  Desktop hide (fallback, JS also handles this)
 *  The actual breakpoint is set dynamically by JS
 * ------------------------------------------------------- */
/* Dynamic desktop hide is injected by JS via #mgid-desktop-hide style element */