/* Sticky call. Bottom-right, clear of the cookie control (bottom-left).
   Burst, reticle and scan share one 5.4s cycle so the hit reads as one signal. */

.wx-call {
	position: fixed;
	right: max(1.05rem, env(safe-area-inset-right, 0px));
	bottom: max(1.05rem, env(safe-area-inset-bottom, 0px));
	z-index: 10020;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3.25rem;
	padding: 0.7rem 0.95rem 0.7rem 0.85rem;
	background: #002bba;
	color: #fff;
	font-family: var(--wx-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	isolation: isolate;
	touch-action: manipulation;
	box-shadow: 0 14px 36px rgba(0, 43, 186, 0.42);
	animation: wx-call-hit 5.4s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

body.wx-view a.wx-call,
body.wx-view a.wx-call .wx-call__word {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background-color: #002bba !important;
}

body.wx-view a.wx-call .wx-call__word {
	background-color: transparent !important;
}

.wx-call__phone,
.wx-call__word,
.wx-call__live {
	position: relative;
	z-index: 1;
}

.wx-call__phone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.wx-call__phone svg { display: block; }

.wx-call__live {
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: wx-call-dot 5.4s ease-in-out infinite;
}

.wx-call__radar,
.wx-call__lock {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wx-call__radar i {
	position: absolute;
	inset: 0;
	border: 1px solid #819ffe;
	opacity: 0;
	animation: wx-call-burst 5.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.wx-call__radar i:nth-child(2) { animation-delay: 0.16s; }
.wx-call__radar i:nth-child(3) { animation-delay: 0.32s; }

.wx-call__lock {
	inset: -8px;
	border: 1px solid transparent;
	border-top-color: #819ffe;
	border-right-color: #819ffe;
	opacity: 0.55;
	animation: wx-call-lock 5.4s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

.wx-call::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%);
	transform: translateX(-130%);
	animation: wx-call-scan 5.4s ease-in-out infinite;
	pointer-events: none;
}

.wx-call:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (hover: hover) {
	.wx-call:hover,
	.wx-call:focus-visible {
		animation-play-state: paused;
		transform: translateY(-2px);
		box-shadow: 0 18px 44px rgba(0, 43, 186, 0.55);
	}

	.wx-call:hover .wx-call__lock,
	.wx-call:hover .wx-call__radar i,
	.wx-call:hover::after,
	.wx-call:focus-visible .wx-call__lock,
	.wx-call:focus-visible .wx-call__radar i,
	.wx-call:focus-visible::after {
		animation-play-state: paused;
	}
}

@keyframes wx-call-hit {
	0%, 64% { transform: none; box-shadow: 0 14px 36px rgba(0, 43, 186, 0.42); }
	72% { transform: translateY(-4px) scale(1.045); box-shadow: 0 22px 50px rgba(0, 43, 186, 0.62); }
	84%, 100% { transform: none; box-shadow: 0 14px 36px rgba(0, 43, 186, 0.42); }
}

@keyframes wx-call-burst {
	0%, 66% { transform: scale(1); opacity: 0; }
	70% { opacity: 0.9; }
	100% { transform: scale(2.05); opacity: 0; }
}

@keyframes wx-call-lock {
	0%, 64% { transform: rotate(0deg); opacity: 0.4; }
	76%, 100% { transform: rotate(90deg); opacity: 1; }
}

@keyframes wx-call-scan {
	0%, 66% { transform: translateX(-130%); }
	84%, 100% { transform: translateX(130%); }
}

@keyframes wx-call-dot {
	0%, 60% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
	70% { opacity: 0.35; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
	82%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Room so the control does not cover the last footer line. */
body.wx-view {
	padding-bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
	.wx-call {
		min-height: 3.4rem;
		padding-inline: 0.9rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wx-call,
	.wx-call__radar i,
	.wx-call__lock,
	.wx-call__live,
	.wx-call::after {
		animation: none;
	}

	.wx-call__radar,
	.wx-call::after { display: none; }
}

@media print {
	.wx-call { display: none !important; }
	body.wx-view { padding-bottom: 0; }
}