/* ==========================================================================
   3A Digital — logo intro + page-transition loader
   Motion ported 1:1 from "Jaknest Loader.dc.html". Pure SVG + CSS.
   ========================================================================== */

/* ------------------------------------------------------------- overlay --- */

.tt-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	/* Flex, not grid: grid gives each child its own full-height row and drives
	   the mark and the label to opposite ends of the screen. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--tt-loader-bg, #f3f2f2);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.tt-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Delay the visibility flip so the fade is actually seen. */
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.tt-loader__mark {
	width: var(--tt-loader-size, 160px);
	max-width: 46vw;
	aspect-ratio: 1;
}

.tt-loader__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tt-loader__label {
	font-family: var(--font-heading, system-ui), sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tt-loader-ink, #201e1d);
}

/* Nothing on the page should scroll while the intro covers it. */
html.tt-loading,
html.tt-loading body { overflow: hidden; }

/* ---------------------------------------------------------- logo parts --- */

.tt-logo__bg { fill: var(--tt-logo-bg, #c81214); }
.tt-logo__mark { fill: var(--tt-logo-ink, #ffffff); }
.tt-logo__ghost { fill: var(--tt-logo-ink, #ffffff); fill-opacity: 0.28; }

/* ------------------------------------------------------- intro (once) --- */

.tt-lg-bg { transform-origin: 966px 966px; animation: tt-lg-bg 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.tt-lg-b { animation: tt-lg-b 0.7s 0.3s cubic-bezier(.2, 1.2, .3, 1) both; }
.tt-lg-a { animation: tt-lg-a 0.7s 0.5s cubic-bezier(.2, 1.25, .3, 1) both; }
.tt-lg-g { transform-origin: 966px 966px; animation: tt-lg-p 0.35s 1.05s cubic-bezier(.3, 0, .3, 1) both; }

@keyframes tt-lg-bg { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tt-lg-b { from { transform: translateX(-1000px); } to { transform: none; } }
@keyframes tt-lg-a { from { transform: translateY(1150px); } to { transform: none; } }
@keyframes tt-lg-p { 0%, 100% { transform: none; } 45% { transform: scale(0.96); } }

/* ------------------------------------------------------ loader (loop) --- */

.tt-ld-f { animation: 1.6s cubic-bezier(.65, 0, .35, 1) infinite both; }
.tt-ld-b { animation-name: tt-ld-b; }
.tt-ld-a { animation-name: tt-ld-a; }

@keyframes tt-ld-b {
	0% { transform: translateY(1100px); }
	35%, 72% { transform: none; }
	92%, 100% { transform: translateY(-1100px); }
}
@keyframes tt-ld-a {
	0%, 12% { transform: translateY(1100px); }
	47%, 80% { transform: none; }
	100% { transform: translateY(-1100px); }
}

/* --------------------------------------------------------- motion off --- */

@media (prefers-reduced-motion: reduce) {
	.tt-lg-bg,
	.tt-lg-b,
	.tt-lg-a,
	.tt-lg-g,
	.tt-ld-f { animation: none; }
	.tt-loader { transition: none; }
}

/* The overlay must never hide the editor or the admin bar. */
.elementor-editor-active .tt-loader,
.wp-admin .tt-loader { display: none; }