:root {
	--bg: #0a0909;
	--accent: #e30000;
	--accent-hover: #ff2100;
}
* { box-sizing: border-box; }
html, body {
	caret-color: transparent;
	margin: 0; padding: 0;
	color: #fff;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	height: 100%;
	overflow-x: hidden;
}

/* ── HEADER ── */
.site-header {
	position: fixed; top: 0; left: 0;
	width: 100%; z-index: 10;
	padding: 24px 32px;
	display: flex; align-items: center;
}
.site-header img { max-height: 70px; width: auto; }

/* ── MUSIC BUTTON ── */
.music-control {
	position: fixed; bottom: 24px; right: 24px; z-index: 10;
}
.music-control button {
	background: var(--accent);
	border: none; color: #fff;
	width: 46px; height: 46px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.8);
	transform-origin: center bottom;
}
.music-control button:hover { background: var(--accent-hover); }
.music-control button svg { width: 18px; height: 18px; fill: #fff; }

/* Blob bounce — loops until clicked */
.music-control button.do-bounce {
	animation: btn-blob 3.2s ease-in-out infinite;
}
@keyframes btn-blob {
	0%, 55%, 100% { transform: scaleX(1)    scaleY(1)    translateY(0); }
	60%  { transform: scaleX(1.1)  scaleY(0.92) translateY(0); }
	68%  { transform: scaleX(0.88) scaleY(1.12) translateY(-14px); }
	76%  { transform: scaleX(1.12) scaleY(0.9)  translateY(0); }
	83%  { transform: scaleX(0.94) scaleY(1.06) translateY(-6px); }
	90%  { transform: scaleX(1.05) scaleY(0.97) translateY(0); }
	96%  { transform: scaleX(1)    scaleY(1)    translateY(0); }
}

/* ── VIDEO BACKGROUND ── */
.video-background-container {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	background-color: #0a0909;
	z-index: -1;
}
.video-background-container video {
	position: absolute;
	top: 50%; left: 50%;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* ── DOT OVERLAY ── */
.dot-overlay {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: radial-gradient(#000 1px, transparent 1px);
	background-size: 4px 4px;
	opacity: 0.2; z-index: 1;
}

/* ── LAYER A: red edge glow ── */
.audio-edge-glow {
	position: fixed; inset: 0; z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s ease;
}
body.audio-playing .audio-edge-glow {
	opacity: 1;
	animation: edge-glow-breathe 3.5s ease-in-out infinite;
}
@keyframes edge-glow-breathe {
	0%, 100% {
		box-shadow: inset 0 0  80px rgba(227,0,0,0.12),
		            inset 0 0 160px rgba(227,0,0,0.05);
	}
	50% {
		box-shadow: inset 0 0 120px rgba(227,0,0,0.32),
		            inset 0 0 240px rgba(227,0,0,0.14);
	}
}

/* ── STYLE 1: breathing rainbow inset lines ── */
.audio-vignette-s1 {
	position: fixed; inset: 0; z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s ease;
	box-shadow:
		inset 0 0  20px  4px rgba(255,   0,   0, 0.55),
		inset 0 0  45px  4px rgba(255, 140,   0, 0.45),
		inset 0 0  70px  4px rgba(255, 255,   0, 0.35),
		inset 0 0  95px  4px rgba(0,   255,  80, 0.30),
		inset 0 0 120px  4px rgba(0,   160, 255, 0.28),
		inset 0 0 150px  4px rgba(120,   0, 255, 0.25),
		inset 0 0 180px  4px rgba(255,   0, 200, 0.22);
}
body.audio-playing .audio-vignette-s1 {
	opacity: 1;
	animation: rainbow-breathe 4s ease-in-out infinite;
}
@keyframes rainbow-breathe {
	0%   { opacity: 0.2; filter: hue-rotate(0deg); }
	50%  { opacity: 0.7; filter: hue-rotate(180deg); }
	100% { opacity: 0.2; filter: hue-rotate(360deg); }
}

/* ── STYLE 2: canvas managed by JS ── */
#rainbow-frame {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 4;
	opacity: 0;
	filter: blur(7px);
	transition: opacity 1.2s ease;
}

/* ── VIDEO LOADER SPINNER ── */
#video-loader {
	position: fixed; inset: 0; z-index: 8;
	display: flex; align-items: center; justify-content: center;
	background: #0a0909;
	transition: opacity 0.8s ease;
	pointer-events: none;
}
#video-loader.hidden {
	opacity: 0;
}
.spinner {
	width: 44px; height: 44px;
	border: 3px solid rgba(255,255,255,0.08);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CONTENT ── */
.content {
	position: relative; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	flex-direction: column;
	width: 100%; height: 100vh;
	color: white; text-align: center; padding: 20px;
}

/* ── FLYING MODE ── */
#fly-wrap {
	position: fixed;
	z-index: 20;
	pointer-events: none;
	display: none;
	perspective: 700px;
}
#fly-inner {
	transform-style: preserve-3d;
}
#fly-inner img {
	display: block;
	width: auto;
	filter: drop-shadow(0 0 20px rgba(255,255,255,0.25))
	        drop-shadow(0 0 50px rgba(140,190,255,0.12));
}