/*
 * The installed app's navigation loading state (nav-loading.js). It sits under the
 * bottom navigation (z-index 999999), so the tapped tab stays visible and lit.
 *
 * The TMO mark is inline SVG built by the script: a fetched or embedded image can
 * still be missing from the last frame iOS draws before the navigation it
 * announces, leaving the ring without the mark.
 */
.tmo-pwa-nav-loading {
	align-items: center;
	animation: tmo-pwa-nav-loading-in 0.12s ease-out both;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background: rgba(5, 5, 5, 0.72);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 999998;
}

.tmo-pwa-nav-loading[hidden] {
	display: none !important;
}

.tmo-pwa-nav-loading__badge {
	height: 88px;
	position: relative;
	width: 88px;
}

.tmo-pwa-nav-loading__ring {
	animation: tmo-pwa-nav-loading-spin 0.9s linear infinite;
	border: 3px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	border-top-color: #e24fb6;
	border-right-color: #7a58dd;
	box-sizing: border-box;
	inset: 0;
	position: absolute;
}

.tmo-pwa-nav-loading__mark {
	animation: tmo-pwa-nav-loading-pulse 1.2s ease-in-out infinite;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(122, 88, 221, 0.35);
	height: 56px;
	left: 16px;
	position: absolute;
	top: 16px;
	width: 56px;
}

.tmo-pwa-nav-loading__mark svg {
	display: block;
	height: 100%;
	width: 100%;
}

@keyframes tmo-pwa-nav-loading-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes tmo-pwa-nav-loading-spin {
	to { transform: rotate(360deg); }
}

@keyframes tmo-pwa-nav-loading-pulse {
	0%, 100% { opacity: 0.75; transform: scale(0.94); }
	50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.tmo-pwa-nav-loading,
	.tmo-pwa-nav-loading__mark {
		animation: none;
	}

	.tmo-pwa-nav-loading__ring {
		animation-duration: 2.4s;
	}
}