/* Summit Studios game boot — lockup over charcoal. */

:root {
	--sl-progress: 0;
	--sl-gold: #e4c27a;
	--sl-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

#summit-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: #101012;
	pointer-events: auto;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#summit-loader.loader-hidden {
	opacity: 0;
	pointer-events: none;
}

.sl-rail {
	position: relative;
}

.sl-rail-fill {
	position: absolute;
	left: 0;
	width: calc(var(--sl-progress) * 100%);
	transform-origin: left center;
	transition: width 0.18s linear;
}

#summit-loader:not(.loader-measured):not(.loader-complete) .sl-rail-fill {
	width: 0;
	animation: sl-rail-guess 4.2s var(--sl-ease-soft) 2.4s forwards;
}

#summit-loader.loader-complete .sl-rail-fill {
	width: 100%;
	animation: none;
	transition: width 0.4s var(--sl-ease-soft);
}

@keyframes sl-fade {
	to {
		opacity: 1;
	}
}

@keyframes sl-rail-guess {
	to {
		width: 89%;
	}
}

/* Dancer boot lockup — designed at 1920×1080, then scaled uniformly to fit. */

#summit-loader.sl-bouncy {
	--sb-enter-dur: 1.08s;
	--sb-hit-at: calc(var(--sb-enter-dur) * 0.36);
	--sb-lockup-done: var(--sb-enter-dur);
	--sb-char-bounce-dur: 0.92s;
	--sb-char-stagger: 0.06s;
	container-type: size;
	background: #101012;
}

.sb-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.sb-grid {
	/* Oversized vs #summit-loader so the 22s -10% / -32px drift never opens empty edges. */
	position: absolute;
	top: -12%;
	left: -16%;
	width: 132%;
	height: 128%;
	display: grid;
	grid-template-columns: repeat(var(--sb-cols, 80), 1fr);
	grid-template-rows: repeat(var(--sb-rows, 50), 1fr);
	opacity: 0.05;
	color: #fff;
	font-size: 8px;
	line-height: 1;
	animation: sb-drift 22s linear infinite;
	will-change: transform;
}

.sb-flake {
	display: grid;
	place-items: center;
	width: 8px;
	height: 8px;
	margin: auto;
	font-size: 8px;
	line-height: 1;
}

.sb-world {
	--sb-fit: min(calc(100cqi / 1920px), calc(100cqb / 1080px));
	position: relative;
	z-index: 1;
	width: calc(1920px * var(--sb-fit));
	height: calc(1080px * var(--sb-fit));
	overflow: hidden;
}

.sb-world-inner {
	width: 1920px;
	height: 1080px;
	display: grid;
	place-items: center;
	transform: scale(var(--sb-fit));
	transform-origin: 0 0;
}

.sb-hit {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.sb-hit-flash,
.sb-hit-ring,
.sb-hit-ring-b,
.sb-hit-sparks {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}

.sb-hit-flash {
	width: 460px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.12) 36%, transparent 68%);
	opacity: 0;
	animation: sb-hit-flash 0.95s ease var(--sb-hit-at) forwards;
}

.sb-hit-ring,
.sb-hit-ring-b {
	width: 240px;
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	opacity: 0;
	animation: sb-hit-ring 0.95s ease var(--sb-hit-at) forwards;
}

.sb-hit-ring-b {
	width: 190px;
	border-width: 1px;
	animation-delay: calc(var(--sb-hit-at) + 0.08s);
}

.sb-hit-sparks {
	width: 300px;
	aspect-ratio: 1;
	background:
		linear-gradient(#fff, #fff) center / 2px 26% no-repeat,
		linear-gradient(#fff, #fff) center / 26% 2px no-repeat,
		linear-gradient(#fff, #fff) center / 2px 18% no-repeat,
		linear-gradient(#fff, #fff) center / 18% 2px no-repeat;
	opacity: 0;
	animation: sb-hit-sparks 0.95s ease var(--sb-hit-at) forwards;
}

.sb-vignette {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 58% 52% at 50% 46%, transparent 12%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.72) 100%);
}

.sb-stage {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	width: 340px;
	animation: sb-hit-shake 0.95s ease var(--sb-hit-at) forwards;
}

.sb-peak-wrap {
	width: 78%;
	aspect-ratio: 604 / 228;
	transform-origin: 50% 100%;
	opacity: 0;
	animation: sb-peak-enter var(--sb-enter-dur) linear 0s both;
}

.sb-peak-wrap .sb-idle {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 60%;
	animation: sb-wobble 6.8s ease-in-out var(--sb-lockup-done) infinite;
}

.sb-peak {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sb-word {
	display: grid;
	justify-items: center;
	margin-top: 6px;
	color: #fff;
	text-align: center;
}

.sb-summit,
.sb-studios {
	display: flex;
	justify-content: center;
	margin: 0;
	color: #fff;
	-webkit-text-stroke: 0;
	text-shadow:
		-3px 0 0 #000,
		3px 0 0 #000,
		0 -3px 0 #000,
		0 3px 0 #000,
		-3px -3px 0 #000,
		3px -3px 0 #000,
		-3px 3px 0 #000,
		3px 3px 0 #000,
		0 4px 0 #000;
}

.sb-summit {
	font: 800 52px/0.86 Arial Black, Arial, sans-serif;
	letter-spacing: 0.02em;
}

.sb-studios {
	margin-top: 8px;
	font: 800 15px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.58em;
	text-shadow:
		-2px 0 0 #000,
		2px 0 0 #000,
		0 -2px 0 #000,
		0 2px 0 #000,
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		2px 2px 0 #000,
		0 3px 0 #000;
}

.sb-char {
	display: block;
	transform-origin: 50% 100%;
	opacity: 0;
	transform: translateY(0) scale(1);
	animation: sb-char-bounce var(--sb-char-bounce-dur) cubic-bezier(0.22, 1.15, 0.36, 1)
		calc(var(--sb-hit-at) + var(--i) * var(--sb-char-stagger)) both;
}

.sb-char .sb-idle {
	display: block;
	transform-origin: 50% 100%;
	transform: translateY(0) rotate(0deg) scale(1);
	animation: sb-char-wobble 5.6s ease-in-out
		calc(var(--sb-hit-at) + var(--sb-char-bounce-dur) + var(--i) * var(--sb-char-stagger)) infinite;
	animation-fill-mode: backwards;
}

@container (max-aspect-ratio: 1/1) {
	.sb-world {
		/* Larger lockup on portrait (~62% of view width). */
		--sb-fit: min(calc(100cqi / 548px), calc(100cqb / 560px));
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		width: calc(1920px * min(calc(100cqi / 548px), calc(100cqb / 560px)));
		height: calc(1080px * min(calc(100cqi / 548px), calc(100cqb / 560px)));
	}

	.sb-world-inner {
		transform: scale(min(calc(100cqi / 548px), calc(100cqb / 560px)));
	}
}

@media (orientation: portrait) {
	.sb-world {
		--sb-fit: min(calc(100vw / 548px), calc(100vh / 560px));
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		width: calc(1920px * min(calc(100vw / 548px), calc(100vh / 560px)));
		height: calc(1080px * min(calc(100vw / 548px), calc(100vh / 560px)));
	}

	.sb-world-inner {
		transform: scale(min(calc(100vw / 548px), calc(100vh / 560px)));
	}
}

#summit-loader.sl-bouncy .sl-rail {
	width: 72%;
	height: 3px;
	margin-top: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	animation: sl-fade 0.4s ease 1.15s forwards;
}

#summit-loader.sl-bouncy .sl-rail::before,
#summit-loader.sl-bouncy .sl-rail::after {
	display: none;
}

#summit-loader.sl-bouncy .sl-rail-fill {
	top: 0;
	height: 100%;
	background: #fff;
	box-shadow: none;
}

/* One motion: slide+fade from below, then smack as it arrives — no rest hold. */
@keyframes sb-peak-enter {
	0% {
		opacity: 0;
		transform: translateY(112px);
		animation-timing-function: cubic-bezier(0.22, 0.82, 0.36, 1);
	}
	26% {
		opacity: 1;
		transform: translateY(16px) scale(0.94, 1.08);
		animation-timing-function: cubic-bezier(0.55, 0.02, 0.95, 0.45);
	}
	36% {
		opacity: 1;
		transform: translateY(-7%) scale(0.78, 1.34);
		animation-timing-function: cubic-bezier(0.22, 1.35, 0.36, 1);
	}
	52% {
		opacity: 1;
		transform: translateY(5%) scale(1.14, 0.86);
		animation-timing-function: cubic-bezier(0.22, 1.15, 0.36, 1);
	}
	70% {
		opacity: 1;
		transform: translateY(-2%) scale(0.97, 1.05);
		animation-timing-function: ease-out;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes sb-char-bounce {
	0% {
		opacity: 0;
		transform: translateY(36%) scale(0.96, 1.04);
	}
	64% {
		opacity: 1;
		transform: translateY(0) scale(1.05, 0.96);
	}
	80% {
		opacity: 1;
		transform: translateY(-3%) scale(0.99, 1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes sb-wobble {
	0%,
	100% {
		transform: perspective(420px) rotateX(0deg) rotateY(0deg) scale(1);
	}
	25% {
		transform: perspective(420px) rotateX(3.2deg) rotateY(-2.4deg) scale(1.02);
	}
	50% {
		transform: perspective(420px) rotateX(-2deg) rotateY(2.2deg) scale(0.99);
	}
	75% {
		transform: perspective(420px) rotateX(1.8deg) rotateY(1.8deg) scale(1.014);
	}
}

@keyframes sb-char-wobble {
	0%,
	100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	25% {
		transform: translateY(-0.8%) rotate(-0.45deg) scale(1.008);
	}
	50% {
		transform: translateY(0.45%) rotate(0.4deg) scale(0.996);
	}
	75% {
		transform: translateY(-0.35%) rotate(0.28deg) scale(1.004);
	}
}

@keyframes sb-hit-shake {
	0% {
		transform: translateY(7px) scale(1.025, 0.97);
	}
	22% {
		transform: translateY(-2px);
	}
	100% {
		transform: none;
	}
}

@keyframes sb-hit-flash {
	0% {
		opacity: 0.9;
		transform: scale(0.4);
	}
	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

@keyframes sb-hit-ring {
	0% {
		opacity: 0.8;
		transform: scale(0.3);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
	}
}

@keyframes sb-hit-sparks {
	0% {
		opacity: 0.85;
		transform: rotate(45deg) scale(0.35);
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) scale(1.55);
	}
}

@keyframes sb-drift {
	to {
		transform: translate3d(-10%, -32px, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-peak-wrap,
	.sb-word,
	.sb-char,
	.sb-idle,
	.sb-stage,
	.sb-hit-flash,
	.sb-hit-ring,
	.sb-hit-sparks,
	.sb-grid {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	.sb-grid {
		opacity: 0.05;
	}
}