/*
 * SIGAPNET - loading screen (lib/loader.php + js/sigap-loader.js).
 * Everything is scoped to #sigap-loader. Only transform/opacity are animated (GPU friendly).
 * Colours: navy #123B63, dark navy #082F5B, blue #2563EB, gold #F4B400, turquoise #21B7C4.
 */
#sigap-loader {
	--sl-size: 240px;
	position: fixed;
	inset: 0;
	z-index: 3000;                       /* above Bootstrap modals (1050) and the sidebar */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1rem;
	text-align: center;
	background: radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #F4F8FE 55%, #E7F0FB 100%);
	color: #123B63;
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
#sigap-loader[hidden] {
	display: none !important;
}
/* visible: fades in after 0.2 s, so very fast pages do not flash; safety limit 20 s even without JavaScript */
#sigap-loader.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
	animation: sl-in 0.3s ease 0.2s both, sl-failsafe 0s linear 20s forwards;
}
/* continuing from the previous page (login, menu link): no fade, no gap */
#sigap-loader.is-active.is-instant {
	animation: sl-failsafe 0s linear 20s forwards;
}
@keyframes sl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------------------------------------------------------------- logo stage */
#sigap-loader .sl-stage {
	position: relative;
	width: var(--sl-size);
	height: var(--sl-size);
	display: grid;
	place-items: center;
	margin-bottom: 0.5rem;
}
#sigap-loader .sl-glow {
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 180, 0, 0.30) 0%, rgba(33, 183, 196, 0.16) 45%, rgba(37, 99, 235, 0) 70%);
	animation: sl-breathe 2.8s ease-in-out infinite;
}
#sigap-loader .sl-ring {
	position: absolute;
	inset: 19%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(244, 180, 0, 0) 0deg, #F4B400 110deg, #21B7C4 200deg, rgba(37, 99, 235, 0) 290deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	animation: sl-spin 1.6s linear infinite;
}
#sigap-loader .sl-logo {
	position: relative;
	width: 46%;
	height: auto;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(8, 47, 91, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.85);
	animation: sl-logo-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both, sl-logo-breathe 2.8s ease-in-out 0.8s infinite;
}

/* particles: two counter-rotating orbits; each particle flies in ("assembles") then twinkles */
#sigap-loader .sl-orbit {
	position: absolute;
	inset: 0;
	animation: sl-spin 12s linear infinite;
}
#sigap-loader .sl-orbit--a i { --r: calc(var(--sl-size) * 0.37); }
#sigap-loader .sl-orbit--b {
	animation-duration: 18s;
	animation-direction: reverse;
}
#sigap-loader .sl-orbit--b i { --r: calc(var(--sl-size) * 0.47); }
#sigap-loader .sl-orbit i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	transform: rotate(var(--a)) translateX(var(--r));
}
#sigap-loader .sl-orbit b {
	position: absolute;
	left: calc(var(--s) / -2);
	top: calc(var(--s) / -2);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 6px var(--c), 0 0 12px var(--c);
	animation: sl-assemble 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) var(--dl) both,
	           sl-twinkle 2.4s ease-in-out calc(var(--dl) + 1.1s) infinite;
}

/* ---------------------------------------------------------------- texts */
#sigap-loader .sl-name {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: #082F5B;
	padding-left: 0.2em;                 /* balances the letter-spacing */
}
#sigap-loader .sl-sub {
	max-width: 24rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #123B63;
	opacity: 0.85;
}
#sigap-loader .sl-dots {
	display: flex;
	gap: 0.45rem;
	margin: 0.85rem 0 0.35rem;
}
#sigap-loader .sl-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2563EB;
	animation: sl-dot 1.2s ease-in-out infinite;
}
#sigap-loader .sl-dots span:nth-child(2) { background: #21B7C4; animation-delay: 0.15s; }
#sigap-loader .sl-dots span:nth-child(3) { background: #F4B400; animation-delay: 0.3s; }
#sigap-loader .sl-msg {
	font-size: 0.85rem;
	color: #4B5D73;
}

/* ---------------------------------------------------------------- keyframes */
@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-breathe {
	0%, 100% { transform: scale(0.92); opacity: 0.75; }
	50% { transform: scale(1.06); opacity: 1; }
}
@keyframes sl-logo-in {
	from { transform: scale(0.82); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@keyframes sl-logo-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}
@keyframes sl-assemble {
	from { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
	60% { opacity: 1; }
	to { transform: none; opacity: 1; }
}
@keyframes sl-twinkle {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}
@keyframes sl-dot {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
	40% { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 480px) {
	#sigap-loader { --sl-size: 200px; }
	#sigap-loader .sl-name { font-size: 1.35rem; }
	#sigap-loader .sl-sub { font-size: 0.8rem; max-width: 18rem; }
}

/* ---------------------------------------------------------------- reduced motion: static logo, no movement */
@media (prefers-reduced-motion: reduce) {
	#sigap-loader * {
		animation: none !important;
	}
	#sigap-loader .sl-orbit b { opacity: 0.8; }
	#sigap-loader .sl-dots span { opacity: 0.7; }
}