.rumburak-takeover {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: auto;
	touch-action: none;
	background: transparent;
	color: #edf7f2;
	font-family: "Courier New", Courier, monospace;
}

.rumburak-takeover.is-active {
	display: block;
}

.rumburak-takeover.is-leaving {
	animation: rumburak-fade-out 360ms steps(3, end) forwards;
}

.rumburak-takeover__screen {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #030303;
	opacity: 0;
	transform: scaleY(0.02);
	transform-origin: 50% 50%;
}

.rumburak-takeover--scanline.is-active .rumburak-takeover__screen {
	opacity: 1;
	animation: rumburak-cover-center 1500ms steps(9, end) forwards, rumburak-crt-shake 180ms steps(2, end) infinite 1500ms;
}

.rumburak-takeover--tuning .rumburak-takeover__screen {
	transform-origin: 50% 0;
	transform: scaleY(0);
}

.rumburak-takeover--tuning.is-active .rumburak-takeover__screen {
	opacity: 1;
	animation: rumburak-cover-top 1700ms steps(10, end) forwards, rumburak-crt-shake-wide 220ms steps(2, end) infinite 1700ms;
}

.rumburak-takeover__screen:before,
.rumburak-takeover__screen:after,
.rumburak-takeover__snow,
.rumburak-takeover__bars,
.rumburak-takeover__roll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
}

.rumburak-takeover__screen:before {
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, rgba(0,0,0,0.35) 2px, rgba(0,0,0,0.35) 4px),
		repeating-linear-gradient(90deg, rgba(48,255,231,0.12) 0, rgba(48,255,231,0.12) 2px, rgba(238,49,75,0.12) 3px, rgba(238,49,75,0.12) 5px, rgba(255,240,65,0.1) 6px, rgba(255,240,65,0.1) 8px);
	opacity: 0.55;
	mix-blend-mode: screen;
	animation: rumburak-scanlines 130ms steps(2, end) infinite;
}

.rumburak-takeover__screen:after {
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.68) 100%);
}

.rumburak-takeover__snow {
	background:
		repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.8) 1px, transparent 2px, transparent 6px),
		repeating-radial-gradient(circle at 72% 42%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.55) 1px, transparent 2px, transparent 5px),
		repeating-linear-gradient(97deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 2px, transparent 4px);
	opacity: 0.28;
	animation: rumburak-noise 150ms steps(3, end) infinite;
}

.rumburak-takeover__bars {
	background:
		linear-gradient(90deg,
			rgba(222,38,63,0.38) 0%,
			rgba(222,38,63,0.38) 12%,
			rgba(247,225,52,0.32) 12%,
			rgba(247,225,52,0.32) 24%,
			rgba(50,218,98,0.28) 24%,
			rgba(50,218,98,0.28) 36%,
			rgba(40,238,226,0.3) 36%,
			rgba(40,238,226,0.3) 50%,
			rgba(54,74,225,0.35) 50%,
			rgba(54,74,225,0.35) 64%,
			rgba(177,48,214,0.28) 64%,
			rgba(177,48,214,0.28) 78%,
			rgba(245,245,245,0.18) 78%,
			rgba(245,245,245,0.18) 100%);
	opacity: 0.26;
	filter: blur(0.5px) saturate(1.2);
}

.rumburak-takeover--tuning .rumburak-takeover__bars {
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 18px, rgba(0,0,0,0.18) 20px, rgba(0,0,0,0.18) 42px),
		linear-gradient(110deg, rgba(255,33,67,0.32), rgba(42,238,210,0.22), rgba(251,239,68,0.24), rgba(0,0,0,0.45));
	animation: rumburak-tune-bars 900ms steps(6, end) infinite;
}

.rumburak-takeover__roll {
	height: 28vh;
	top: -35vh;
	bottom: auto;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.22), rgba(0,0,0,0.3), transparent);
	animation: rumburak-roll 1150ms linear infinite;
}

.rumburak-takeover__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(74vw, 760px);
	max-height: 82vh;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 3;
}

.rumburak-takeover__caption {
	display: inline-block;
	padding: 8px 14px;
	margin-bottom: 16px;
	color: #f6eb64;
	background: rgba(0,0,0,0.65);
	border: 1px solid rgba(246,235,100,0.8);
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0;
	text-shadow: 2px 0 rgba(236,41,72,0.9), -2px 0 rgba(40,238,226,0.75);
	opacity: 0;
	transform: translateY(18px);
}

.rumburak-takeover.is-active .rumburak-takeover__caption {
	animation: rumburak-caption-in 700ms steps(5, end) forwards 900ms;
}

.rumburak-takeover__image {
	display: block;
	width: min(70vw, 650px);
	max-height: 60vh;
	margin: 0 auto;
	object-fit: contain;
	border: 7px solid rgba(245,245,245,0.78);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.88), 0 0 38px rgba(40,238,226,0.45), 0 0 58px rgba(236,41,72,0.35);
	opacity: 0;
	filter: contrast(1.35) saturate(1.35);
	transform: scale(0.94) skewX(-1deg);
}

.rumburak-takeover.is-final .rumburak-takeover__image {
	opacity: 1;
	animation: rumburak-image-jitter 210ms steps(2, end) infinite;
}

.rumburak-takeover__tag {
	display: inline-block;
	margin-top: 12px;
	padding: 5px 9px;
	color: #28eee2;
	background: rgba(0,0,0,0.7);
	border: 1px solid rgba(40,238,226,0.7);
	font-size: 13px;
	opacity: 0;
	text-shadow: 2px 0 rgba(236,41,72,0.75);
}

.rumburak-takeover.is-final .rumburak-takeover__tag {
	opacity: 1;
}

@keyframes rumburak-cover-center {
	0% { transform: scaleY(0.02); }
	18% { transform: scaleY(0.12); }
	34% { transform: scaleY(0.34); }
	58% { transform: scaleY(0.72); }
	100% { transform: scaleY(1); }
}

@keyframes rumburak-cover-top {
	0% { transform: scaleY(0); }
	16% { transform: scaleY(0.08); }
	44% { transform: scaleY(0.46); }
	72% { transform: scaleY(0.82); }
	100% { transform: scaleY(1); }
}

@keyframes rumburak-fade-out {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes rumburak-crt-shake {
	0% { transform: translate(0, 0) scaleY(1); }
	50% { transform: translate(-2px, 1px) scaleY(1); }
	100% { transform: translate(2px, -1px) scaleY(1); }
}

@keyframes rumburak-crt-shake-wide {
	0% { transform: translate(0, 0) scaleY(1); }
	50% { transform: translate(4px, -2px) scaleY(1); }
	100% { transform: translate(-3px, 2px) scaleY(1); }
}

@keyframes rumburak-scanlines {
	0% { transform: translateY(0); }
	100% { transform: translateY(5px); }
}

@keyframes rumburak-noise {
	0% { transform: translate(0, 0); opacity: 0.18; }
	33% { transform: translate(-7px, 3px); opacity: 0.34; }
	66% { transform: translate(5px, -5px); opacity: 0.24; }
	100% { transform: translate(0, 0); opacity: 0.3; }
}

@keyframes rumburak-roll {
	0% { transform: translateY(0); }
	100% { transform: translateY(145vh); }
}

@keyframes rumburak-tune-bars {
	0% { transform: translateX(0); }
	100% { transform: translateX(-42px); }
}

@keyframes rumburak-caption-in {
	0% { opacity: 0; transform: translateY(18px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes rumburak-image-jitter {
	0% { transform: translate(0, 0) scale(0.98) skewX(-1deg); }
	33% { transform: translate(-3px, 1px) scale(1.01) skewX(1deg); }
	66% { transform: translate(2px, -2px) scale(0.99) skewX(0deg); }
	100% { transform: translate(0, 0) scale(1) skewX(-1deg); }
}

@media (max-width: 600px) {
	.rumburak-takeover__frame {
		width: 92vw;
	}

	.rumburak-takeover__caption {
		font-size: 13px;
		padding: 6px 10px;
	}

	.rumburak-takeover__image {
		width: 88vw;
		max-height: 56vh;
		border-width: 4px;
	}
}