/* ==========================================================================
   ENTRY GATE — UnityPay Holdings
   --------------------------------------------------------------------------
   Full-screen arrival sequence that sits above the whole site while it loads.
   Concentric sonar rings echo the ring in the mark; when the site is ready the
   rings accelerate past the camera, a cool bloom opens, and the page beneath
   surfaces out of a blur.
   ========================================================================== */

.up-gate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: #070b20;
	color: #e3e6eb;
	cursor: pointer;
	overflow: hidden;
	perspective: 900px;
	font-family: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.up-gate__field {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.up-gate__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 50%, rgba(7, 11, 32, 0) 32%, rgba(7, 11, 32, 0.72) 100%);
}

.up-gate__bloom {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42vmax;
	height: 42vmax;
	margin: -21vmax 0 0 -21vmax;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.18);
	will-change: transform, opacity;
	background: radial-gradient(circle, #ffffff 0%, rgba(226, 236, 248, 0.92) 34%, rgba(226, 236, 248, 0) 70%);
}

.up-gate__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 24px;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* ---- Lockup: mark left, stacked wordmark right (matches the master logo) ---- */

.up-gate__lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.6vw, 34px);
	margin-bottom: clamp(34px, 5vh, 52px);
}

.up-gate__mark {
	/* The render is trimmed to the ring, where the old SVG carried ~12% padding.
	   Scaled to 88% so the ring lands at the same size it did before. */
	width: clamp(65px, 7.9vw, 109px);
	height: auto;
	flex: none;
	display: block;
	filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.55));
}

.up-gate__words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(4px, 0.7vh, 9px);
}

.up-gate__name {
	font-size: clamp(26px, 4.2vw, 54px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.19em;
	text-indent: 0.19em;
	color: #ffffff;
}

.up-gate__sub {
	font-size: clamp(11px, 1.5vw, 19px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.52em;
	text-indent: 0.52em;
	color: #9aa7bd;
}

/* ---- Progress ---- */

.up-gate__rail {
	position: relative;
	width: min(360px, 66vw);
	height: 1px;
	margin: 0 auto;
	overflow: hidden;
	background: rgba(227, 230, 235, 0.16);
}

.up-gate__rail i {
	position: absolute;
	inset: 0 100% 0 0;
	display: block;
	background: linear-gradient(90deg, #6f7d94, #e3e6eb 70%, #ffffff);
	transition: right 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.up-gate__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: min(360px, 66vw);
	margin: 15px auto 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(227, 230, 235, 0.44);
}

.up-gate__meta b {
	font-weight: 500;
	color: #e3e6eb;
	font-variant-numeric: tabular-nums;
}

.up-gate__enter {
	height: 22px;
	margin-top: clamp(30px, 5vh, 46px);
	font-size: 12px;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: rgba(227, 230, 235, 0.88);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.up-gate__enter.is-on {
	opacity: 1;
	animation: up-gate-breathe 1.9s ease-in-out infinite;
}

@keyframes up-gate-breathe {
	0%, 100% { opacity: 0.42; }
	50%      { opacity: 1; }
}

/* ---- The inhale ---- */

.up-gate.is-leaving { pointer-events: none; }

.up-gate.is-leaving .up-gate__field {
	transition: transform 1.5s cubic-bezier(0.6, 0, 0.85, 0.2), opacity 1.5s ease-in;
	transform: scale(7);
	opacity: 0;
}

.up-gate.is-leaving .up-gate__inner {
	transition: transform 1.15s cubic-bezier(0.6, 0, 0.85, 0.2), opacity 0.8s ease-in;
	transform: scale(3.1);
	opacity: 0;
}

.up-gate.is-leaving .up-gate__bloom {
	transition: transform 1.5s cubic-bezier(0.5, 0, 0.3, 1), opacity 1.5s ease-out;
	transform: scale(6);
	opacity: 1;
}

.up-gate.is-gone {
	opacity: 0;
	transition: opacity 0.55s ease 0.95s;
}

.up-gate.is-removed { display: none; }

/* ---- The page surfacing underneath ---- */

/* global.css pins `.page-content-wrapper { transform: none !important }`,
   so the surfacing scale has to out-rank it. Same specificity, later sheet. */
.up-dream {
	transform: scale(1.07) !important;
	transform-origin: 50% 42%;
	filter: blur(24px);
	opacity: 0;
}

.up-dream.is-surfacing {
	transition:
		transform 1.9s cubic-bezier(0.16, 0.7, 0.2, 1),
		filter 1.7s cubic-bezier(0.16, 0.7, 0.2, 1),
		opacity 1.2s ease-out;
	transform: scale(1) !important;
	filter: blur(0);
	opacity: 1;
}

/* The gate replaces the site's own loading card. Keep those elements in the
   DOM and still transitioning (their state machine drives the intro), but
   never let them paint — otherwise they flash through after the handoff. */
.preloader,
.preloader--landing {
	opacity: 0 !important;
	pointer-events: none !important;
}

html.up-gate-open,
html.up-gate-open body {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.up-gate__enter.is-on { animation: none; }
	.up-gate.is-leaving .up-gate__field,
	.up-gate.is-leaving .up-gate__inner,
	.up-gate.is-leaving .up-gate__bloom { transition-duration: 0.2s; }
	.up-dream { filter: none; transform: none !important; opacity: 1; }
	.up-dream.is-surfacing { transition-duration: 0.2s; }
}