:root {
	--bg: #050505;
	--bg2: #0a0a0a;
	--white: #ffffff;
	--silver: #c8c8c8;
	--silver-dim: #6a6a6a;
	--silver-soft: #ffffff55;
	--red: #ff2a3d;
	--mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
}

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

html, body {
	height: 100%;
	width: 100%;
	background: var(--bg);
	color: var(--silver);
	font-family: var(--mono);
	overflow: hidden;
	cursor: crosshair;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 60%),
		linear-gradient(180deg, #000 0%, var(--bg) 50%, #000 100%);
	pointer-events: none;
	z-index: 1;
}

#matrix {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0.30;
}

.scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0,0,0,0) 0px,
		rgba(0,0,0,0) 2px,
		rgba(0,0,0,0.28) 3px,
		rgba(0,0,0,0) 4px
	);
	mix-blend-mode: multiply;
}

.vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 51;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.9) 100%);
}

/* ===== top / bottom bars ===== */
.topbar, .bottombar {
	position: fixed;
	left: 0; right: 0;
	display: flex;
	justify-content: space-between;
	padding: 14px 22px;
	z-index: 20;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--silver);
}
.topbar { top: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.bottombar { bottom: 0; border-top: 1px solid rgba(255,255,255,0.12); }

.tag {
	opacity: 0.85;
	text-shadow: 0 0 6px rgba(255,255,255,0.35);
}
.ok { color: var(--white); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== stage ===== */
.stage {
	position: relative;
	z-index: 10;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 60px 20px;
}

/* ===== logo ===== */
.logo-wrap {
	position: relative;
	width: 320px;
	height: 320px;
	display: grid;
	place-items: center;
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.logo-frame {
	position: relative;
	width: 240px;
	height: 240px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
}

.logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter:
		drop-shadow(0 0 6px rgba(255,255,255,0.55))
		drop-shadow(0 0 22px rgba(255,255,255,0.30))
		contrast(1.15)
		brightness(1.15);
	animation: pulse 3.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)) drop-shadow(0 0 22px rgba(255,255,255,0.30)) contrast(1.15) brightness(1.15);
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(255,255,255,0.85)) drop-shadow(0 0 40px rgba(255,255,255,0.45)) contrast(1.2) brightness(1.25);
	}
}

.glitch-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.7;
}
.glitch-layer img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(2px 0 0 var(--red));
	animation: glitch1 4s infinite steps(1);
}
.glitch-layer.two img {
	filter: drop-shadow(-2px 0 0 #ffffff);
	animation: glitch2 4s infinite steps(1);
}

@keyframes glitch1 {
	0%, 92%, 100% { transform: translate(0,0); opacity: 0; }
	93% { transform: translate(-3px, 1px); opacity: 0.9; }
	94% { transform: translate(2px, -2px); opacity: 0.9; }
	95% { transform: translate(-1px, 2px); opacity: 0.9; }
	96% { transform: translate(0,0); opacity: 0; }
}
@keyframes glitch2 {
	0%, 88%, 100% { transform: translate(0,0); opacity: 0; }
	89% { transform: translate(3px,-1px); opacity: 0.9; }
	90% { transform: translate(-2px,1px); opacity: 0.9; }
	91% { transform: translate(1px,1px); opacity: 0; }
}

.scan {
	position: absolute;
	left: 0; right: 0;
	height: 22%;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(255,255,255,0.14) 50%,
		transparent 100%);
	animation: scanmove 4s linear infinite;
	pointer-events: none;
	mix-blend-mode: screen;
}
@keyframes scanmove {
	0% { top: -30%; }
	100% { top: 100%; }
}

/* rings */
.rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.ring {
	position: absolute;
	left: 50%; top: 50%;
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.r1 {
	width: 260px; height: 260px;
	border-style: dashed;
	animation: spin 18s linear infinite;
}
.r2 {
	width: 300px; height: 300px;
	border-color: rgba(255,255,255,0.13);
	animation: spin 30s linear reverse infinite;
}
.r3 {
	width: 320px; height: 320px;
	border-color: rgba(255,255,255,0.07);
	border-style: dotted;
	animation: spin 45s linear infinite;
}
@keyframes spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* targeting corners */
.corner {
	display: none;
}

/* ===== title ===== */
.title {
	position: relative;
	font-size: clamp(56px, 9vw, 120px);
	letter-spacing: 18px;
	font-weight: 800;
	color: var(--white);
	text-shadow:
		0 0 10px rgba(255,255,255,0.45),
		0 0 30px rgba(255,255,255,0.20);
	margin-left: 18px;
}
.title::before, .title::after {
	content: attr(data-text);
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	overflow: hidden;
}
.title::before {
	color: var(--red);
	transform: translate(2px,0);
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	animation: shift 3s infinite steps(1);
	mix-blend-mode: screen;
}
.title::after {
	color: var(--silver);
	transform: translate(-2px,0);
	clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
	animation: shift 2.4s infinite steps(1) reverse;
	mix-blend-mode: screen;
}
@keyframes shift {
	0%, 90%, 100% { transform: translate(0,0); }
	92% { transform: translate(3px, -1px); }
	94% { transform: translate(-3px, 1px); }
	96% { transform: translate(2px, 1px); }
}

/* sub typed */
.sub {
	font-size: 13px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--silver);
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 1.4em;
}
.bracket { color: var(--silver-soft); }
.caret { animation: blink 1s steps(2) infinite; color: var(--white); }
.typed { white-space: pre; }

/* hex hash */
.hex {
	font-size: 10px;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.40);
	max-width: 90%;
	text-align: center;
	word-break: break-all;
	user-select: none;
}

@media (max-width: 600px) {
	.logo-wrap { width: 260px; height: 260px; }
	.logo-frame { width: 190px; height: 190px; }
	.r1 { width: 210px; height: 210px; }
	.r2 { width: 240px; height: 240px; }
	.r3 { width: 260px; height: 260px; }
	.title { letter-spacing: 12px; margin-left: 12px; }
	.topbar, .bottombar { font-size: 9px; padding: 10px 14px; }
}