/*
 * SiteQode — loader.css
 */

	.sq-loader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; 
		transition: opacity 200ms ease, visibility 200ms ease; 
	}
	.no-js .sq-loader { display: none; }

	.sq-loader.is-active { opacity: 1; visibility: visible;
		pointer-events: auto; /* Only blocks interaction while genuinely active. */
	}

	.sq-loader__bar { display: none; position: absolute; top: 0; left: 0; right: 0; height: 3px;
		background: var(--sq-color-amber-600, #c97a1f); transform-origin: left; transform: scaleX(0); 
	}

	.sq-loader__panel { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
		background: var(--sq-loader-bg, #f7f9f8);
	}
	.sq-loader--custom .sq-loader__panel, 
	.sq-loader--custom .sq-loader__bar { display: block; }
	.sq-loader--custom .sq-loader__panel {
		font-size: clamp(4.375rem, 2.2962rem + 4.3365vw, 7.5rem);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	path.sq-snake {
		/*   stroke: url(#linear); */
		stroke-dasharray: 222;
		stroke-dashoffset: 444;
		animation: dash-long 2s linear infinite;
	}

	@keyframes dash-long {
	0% {
		stroke-dashoffset: 444;
	}
	100% {
		stroke-dashoffset: -444;
	}
	}



	/* Progress bar: only the top bar shows; the page stays visible underneath. */

	.sq-loader--progress .sq-loader__bar {
		display: block;
	}
	.sq-loader--progress.is-active .sq-loader__bar {
		animation: sq-loader-bar 1.1s ease-in-out infinite;
	}
	@keyframes sq-loader-bar {
		0% { transform: scaleX(0); opacity: 1; }
		55% { transform: scaleX(0.6); }
		100% { transform: scaleX(1); opacity: 0; }
	}

	/* Logo / Spinner: full panel with centered content. */

	.sq-loader--logo .sq-loader__panel,
	.sq-loader--spinner .sq-loader__panel { display: flex; }
	.sq-loader__logo-fallback { font-family: var(--sq-font-head, serif); font-size: var(--sq-h5, 1.35rem); font-weight: 600; 
		color: var(--sq-color-ink, #101e2b); 
	}

	.sq-loader--logo .sq-loader__panel .custom-logo-link { width: 100%; max-width: clamp(11.25rem, 10.0962rem + 5.1282vw, 16.25rem); display: block; }

	.sq-loader--logo .sq-loader__panel img,
	.sq-loader--logo .sq-loader__panel .sq-loader__logo-fallback { animation: sq-loader-pulse 1.1s ease-in-out infinite; }

	.sq-loader__spinner { width: 36px; height: 36px; border: 3px solid var(--sq-color-border, #dce6e3); 
		border-top-color: var(--sq-color-ink-700, #0e6e64); border-radius: 50%; animation: sq-loader-spin 0.7s linear infinite; 
	}
	@keyframes sq-loader-pulse {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.6; transform: scale(0.96); }
	}
	@keyframes sq-loader-spin {
		to { transform: rotate(360deg); }
	}

/* Fade: a subtle tinted overlay, no content — the simplest of the four. */

	.sq-loader--fade .sq-loader__panel { display: block; opacity: 0.6; }

	@media (prefers-reduced-motion: reduce) {
		.sq-loader__spinner,
		.sq-loader--logo .sq-loader__panel img,
		.sq-loader--logo .sq-loader__panel .sq-loader__logo-fallback,
		.sq-loader--progress.is-active .sq-loader__bar {
			animation: none;
		}
	}

/* ------------------------------------------------------------------
 * Page transitions — applied to #site-content (.sq-route) itself.
 * --sq-transition-duration is set once by the SPA layer from the
 * transition_duration Theme Option; --type-slide is added to #sq-main
 * once, based on the transition_type option, rather than recomputed
 * on every navigation.
 * ------------------------------------------------------------------ */

	.sq-route { transition: opacity var( --sq-transition-duration, 400ms ) ease; }

	.sq-main--type-slide .sq-route { 
		transition: opacity var( --sq-transition-duration, 400ms ) ease, transform var( --sq-transition-duration, 400ms ) ease; 
	}

	.sq-route--leaving { opacity: 0; }
	.sq-main--type-slide .sq-route--leaving { transform: translateY( -8px ); }
	.sq-route--entering { opacity: 0; }
	.sq-main--type-slide .sq-route--entering { transform: translateY( 12px ); }

	@media (prefers-reduced-motion: reduce) {
		.sq-route,
		.sq-main--type-slide .sq-route { transition-duration: 1ms; }
	}
