/* EvolvedRP loading screen — cinematic minimal, v20260716a
   Compat notes: no CSS variables, no flexbox, absolute layout,
   prefixed + unprefixed transforms/keyframes (Awesomium fallback). */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #07060a;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	color: #eae6f2;
}

.stage {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
}

/* ---------- backgrounds ---------- */

.bg {
	position: absolute;
	top: -6%; left: -6%;
	width: 112%; height: 112%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	-webkit-transition: opacity 1.8s ease-in-out;
	transition: opacity 1.8s ease-in-out;
}

.bg.is-active { opacity: 1; }

.bg.kb-a {
	-webkit-animation: kburnsA 22s ease-in-out infinite alternate;
	animation: kburnsA 22s ease-in-out infinite alternate;
}

.bg.kb-b {
	-webkit-animation: kburnsB 22s ease-in-out infinite alternate;
	animation: kburnsB 22s ease-in-out infinite alternate;
}

@-webkit-keyframes kburnsA {
	from { -webkit-transform: scale(1) translate(0, 0); }
	to   { -webkit-transform: scale(1.09) translate(-1.5%, 1%); }
}
@keyframes kburnsA {
	from { transform: scale(1) translate(0, 0); }
	to   { transform: scale(1.09) translate(-1.5%, 1%); }
}
@-webkit-keyframes kburnsB {
	from { -webkit-transform: scale(1.09) translate(1.5%, -1%); }
	to   { -webkit-transform: scale(1) translate(0, 0); }
}
@keyframes kburnsB {
	from { transform: scale(1.09) translate(1.5%, -1%); }
	to   { transform: scale(1) translate(0, 0); }
}

/* ---------- overlays ---------- */

.vignette {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: -webkit-radial-gradient(center, ellipse cover, rgba(7,6,10,0.12) 0%, rgba(7,6,10,0.62) 78%, rgba(7,6,10,0.86) 100%);
	background: radial-gradient(ellipse at center, rgba(7,6,10,0.12) 0%, rgba(7,6,10,0.62) 78%, rgba(7,6,10,0.86) 100%);
	-webkit-animation: drift 26s ease-in-out infinite alternate;
	animation: drift 26s ease-in-out infinite alternate;
}

.vignette:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 34%;
	background: -webkit-linear-gradient(top, rgba(7,6,10,0), rgba(7,6,10,0.88));
	background: linear-gradient(to bottom, rgba(7,6,10,0), rgba(7,6,10,0.88));
}

@-webkit-keyframes drift {
	from { -webkit-transform: scale(1); }
	to   { -webkit-transform: scale(1.04); }
}
@keyframes drift {
	from { transform: scale(1); }
	to   { transform: scale(1.04); }
}

.grain {
	position: absolute;
	top: -10%; left: -10%;
	width: 120%; height: 120%;
	opacity: 0.05;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
	-webkit-animation: grainShift 1.2s steps(4) infinite;
	animation: grainShift 1.2s steps(4) infinite;
}

@-webkit-keyframes grainShift {
	0%   { -webkit-transform: translate(0, 0); }
	25%  { -webkit-transform: translate(-2%, 1%); }
	50%  { -webkit-transform: translate(1%, -2%); }
	75%  { -webkit-transform: translate(-1%, 2%); }
	100% { -webkit-transform: translate(0, 0); }
}
@keyframes grainShift {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-2%, 1%); }
	50%  { transform: translate(1%, -2%); }
	75%  { transform: translate(-1%, 2%); }
	100% { transform: translate(0, 0); }
}

/* ---------- embers ---------- */

.embers span {
	position: absolute;
	bottom: -12px;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: -webkit-radial-gradient(circle, rgba(233,63,210,0.9) 0%, rgba(168,127,208,0.35) 60%, rgba(168,127,208,0) 100%);
	background: radial-gradient(circle, rgba(233,63,210,0.9) 0%, rgba(168,127,208,0.35) 60%, rgba(168,127,208,0) 100%);
	opacity: 0;
	-webkit-animation: rise 12s linear infinite;
	animation: rise 12s linear infinite;
}

.embers span:nth-child(1)  { left: 6%;  -webkit-animation-duration: 13s; animation-duration: 13s; -webkit-animation-delay: 0s;   animation-delay: 0s; }
.embers span:nth-child(2)  { left: 14%; width: 3px; height: 3px; -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 3s; animation-delay: 3s; }
.embers span:nth-child(3)  { left: 23%; -webkit-animation-duration: 11s; animation-duration: 11s; -webkit-animation-delay: 6s;  animation-delay: 6s; }
.embers span:nth-child(4)  { left: 31%; width: 5px; height: 5px; -webkit-animation-duration: 18s; animation-duration: 18s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.embers span:nth-child(5)  { left: 42%; width: 3px; height: 3px; -webkit-animation-duration: 14s; animation-duration: 14s; -webkit-animation-delay: 8s; animation-delay: 8s; }
.embers span:nth-child(6)  { left: 50%; -webkit-animation-duration: 17s; animation-duration: 17s; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; }
.embers span:nth-child(7)  { left: 58%; width: 3px; height: 3px; -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-delay: 10s; animation-delay: 10s; }
.embers span:nth-child(8)  { left: 67%; -webkit-animation-duration: 15s; animation-duration: 15s; -webkit-animation-delay: 2s;  animation-delay: 2s; }
.embers span:nth-child(9)  { left: 74%; width: 5px; height: 5px; -webkit-animation-duration: 19s; animation-duration: 19s; -webkit-animation-delay: 7s; animation-delay: 7s; }
.embers span:nth-child(10) { left: 82%; -webkit-animation-duration: 13s; animation-duration: 13s; -webkit-animation-delay: 5s;  animation-delay: 5s; }
.embers span:nth-child(11) { left: 89%; width: 3px; height: 3px; -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 9s; animation-delay: 9s; }
.embers span:nth-child(12) { left: 95%; -webkit-animation-duration: 14s; animation-duration: 14s; -webkit-animation-delay: 11s; animation-delay: 11s; }

@-webkit-keyframes rise {
	0%   { -webkit-transform: translate(0, 0);            opacity: 0; }
	8%   { opacity: 0.85; }
	60%  { opacity: 0.5; }
	100% { -webkit-transform: translate(30px, -105vh);    opacity: 0; }
}
@keyframes rise {
	0%   { transform: translate(0, 0);         opacity: 0; }
	8%   { opacity: 0.85; }
	60%  { opacity: 0.5; }
	100% { transform: translate(30px, -105vh); opacity: 0; }
}

/* ---------- center ---------- */

.center {
	position: absolute;
	top: 34%;
	left: 0; right: 0;
	text-align: center;
}

.wordmark {
	display: inline-block;
	font-style: italic;
	font-weight: 900;
	font-size: 64px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-right: 0.14em;
	background: -webkit-linear-gradient(left, #e93fd2, #a87fd0);
	background: linear-gradient(90deg, #e93fd2, #a87fd0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d05fd2; /* fallback when background-clip:text unsupported */
	text-shadow: 0 0 42px rgba(233,63,210,0.25);
}

.tagline {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(234,230,242,0.62);
}

.greet {
	margin-top: 42px;
	opacity: 0;
	-webkit-transition: opacity 1.4s ease;
	transition: opacity 1.4s ease;
}

.greet.is-in { opacity: 1; }

.greet-name {
	font-size: 24px;
	font-weight: 600;
	color: #f4f0fa;
}

.greet-sub {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(168,127,208,0.95);
}

.mapline {
	margin-top: 26px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(234,230,242,0.4);
}

/* ---------- bottom ---------- */

.bottom {
	position: absolute;
	left: 48px; right: 48px;
	bottom: 34px;
	height: 44px;
}

.tip {
	position: absolute;
	left: 0; bottom: 0;
	max-width: 62%;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: rgba(234,230,242,0.85);
	opacity: 0;
	-webkit-transition: opacity 0.9s ease;
	transition: opacity 0.9s ease;
}

.tip.is-in { opacity: 1; }

.meta {
	position: absolute;
	right: 0; bottom: 0;
	text-align: right;
}

.pct {
	display: block;
	font-size: 26px;
	font-weight: 600;
	font-style: italic;
	color: #f4f0fa;
}

.files {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(234,230,242,0.45);
}

/* ---------- progress ---------- */

.progress {
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(234,230,242,0.08);
}

.fill {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: 0%;
	background: -webkit-linear-gradient(left, #e93fd2, #a87fd0);
	background: linear-gradient(90deg, #e93fd2, #a87fd0);
	box-shadow: 0 0 14px rgba(233,63,210,0.6);
	-webkit-transition: width 0.5s ease;
	transition: width 0.5s ease;
}