/* Subtiele credit rechtsonder */
.mikey-credit {
	position: fixed;
	right: 2vw;
	bottom: 1.5vh;
	font-size: 1.1rem;
	color: #d8d8d8cc;
	font-family: 'Segoe UI', Arial, sans-serif;
	letter-spacing: 0.12em;
	z-index: 10;
	pointer-events: none;
	user-select: none;
	/* 3D platliggend effect */
	transform: perspective(400px) rotateX(80deg) scale(1.1);
	/* Gegraveerd + bevel effect */
	text-shadow:
		0 2px 4px #0008,
		0 1px 0 #fff6,
		0 -2px 2px #8887,
		1px 1px 0 #fff3,
		-1px -1px 0 #2225,
		2px 2px 2px #0007,
		0 0 8px #0003;
	font-weight: 700;
	opacity: 0.92;
	/* Simuleer een lichte rand/bevel met een lichte glow */
	filter: drop-shadow(0 1px 0 #fff7) drop-shadow(0 -1px 1px #2225);
}
/* Copilot 3D sign styling */
#copilot-sign {
	position: fixed;
	right: 16vw;
	top: 10vh;
	width: 220px;
	max-width: 22vw;
	opacity: 0.85;
	z-index: 1;
	transform: perspective(800px) rotateY(-22deg) rotateX(10deg) scale(0.95);
	filter: drop-shadow(0 4px 16px #0007);
	pointer-events: none;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 .vr_layer.highlight {
	box-shadow: 0 0 8px 2px #ffb3d9, 0 0 0 2px #ffb3d9;
	border-color: #ffb3d9 !important;
	animation: highlight-cube 0.5s cubic-bezier(0.4,0,0.2,1);
	z-index: 20;
}

@keyframes highlight-cube {
	0% {
		box-shadow: 0 0 0 0 #ffb3d9;
		border-color: #00ffe7;
	}
	30% {
		box-shadow: 0 0 12px 4px #ffb3d9;
		border-color: #ffb3d9;
	}
	100% {
		box-shadow: 0 0 0 0 #ffb3d9;
		border-color: #00ffe7;
	}
}
/* Liquid overlay canvas styling */
#liquid-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
}
/* 3D Twitch link styling */
.twitch-link-3d {
	position: fixed;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%) perspective(1200px) rotateX(75deg) scale(1.1);
	font-family: 'MeltSwashes', Anton, sans-serif;
	font-size: 2.2em;
	color: #fff;
	text-shadow:
		0 1px 3px #00bfff,
		0 2px 6px #ff69b4,
		0 0px 1px #222;
	letter-spacing: 0.06em;
	z-index: 0;
	filter: drop-shadow(0 0 2px #00bfff);
	animation: twitch3dglow 2.5s infinite alternate;
}
.twitch-link-3d a {
	color: inherit;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s, text-shadow 0.2s;
}
.twitch-link-3d a:hover {
	color: #ff69b4;
	text-shadow: 0 0 24px #ff69b4, 0 0 12px #00bfff;
}

@keyframes twitch3dglow {
	0% {
		text-shadow: 0 1px 2px #00bfff, 0 2px 4px #ff69b4, 0 0px 1px #222;
		filter: drop-shadow(0 0 1px #00bfff);
	}
	50% {
		text-shadow: 0 1px 3px #ff69b4, 0 2px 6px #00bfff, 0 0px 1px #222;
		filter: drop-shadow(0 0 2px #ff69b4);
	}
	100% {
		text-shadow: 0 1px 2px #00bfff, 0 2px 4px #ff69b4, 0 0px 1px #222;
		filter: drop-shadow(0 0 1px #00bfff);
	}
}
@font-face {
	font-family: 'MeltSwashes';
	src: url('assets/Melt-Swashes.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
body {
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	height: 100vh;
	overflow: hidden;
	display: flex;
	font-family: 'Anton', sans-serif;
	justify-content: center;
	align-items: center;
	perspective: 1000px;
}

.container {
	position: relative;
	display: grid;
	grid-template-rows: repeat(20, 5vh);
	grid-template-columns: repeat(20, 5vw);
	transform-style: preserve-3d;
}

.triggers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: grid;
	grid-template-rows: repeat(20, 5vh);
	grid-template-columns: repeat(20, 5vw);
}

.trigger {
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.1);
	cursor: pointer;
}

.monitor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform-style: preserve-3d;
	z-index: 1;
}

.camera {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: 500ms;
}

.camera.o-y {
	transform: rotateY(-30deg);
}

.vr {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 350px;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
}

.vr_layer {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border: 1.5px solid #00ffe7;
	background: rgba(9,255,255,0.006);
	border-radius: 60px;
	transform-style: preserve-3d;
}

 .vr_layer_item {
	width: 70%;
	height: 70%;
	border-radius: 100%;
	background: rgba(0,0,0,0.05);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	font-family: 'Anton', sans-serif;
	color: #fff;
	animation: sphere 3000ms cubic-bezier(0.215, 0.610, 0.355, 1.000) alternate infinite;
	transition: 500ms;
}

/* .cg-text styling verwijderd, SVG wordt nu gebruikt */

@keyframes sphere {
	0% { transform: scale(0) rotateZ(45deg); }
	50% { transform: scale(0) rotateZ(45deg); }
	100% { transform: scale(1) rotateZ(45deg); }
}

@keyframes color {
	0% { border-color: #f55; }
	50% { border-color: #55f; }
	100% { border-color: #5f5; }
}