@font-face {
	font-family: 'WorkSansBlack';
	src: url('../fonts/WorkSans/WOFF2/WorkSans-Black.woff2') format('woff2'),
	url('../fonts/WorkSans/WOFF/WorkSans-Black.woff') format('woff'),
	url('../fonts/WorkSans/TTF/WorkSans-Black.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

.lightbar {
	font-family: 'WorkSansBlack';
	position: fixed;
	bottom: 0;
	left: 25%;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 999;
	overflow: visible;
}

@media (max-width: 600px) {
	.lightbar {
		width: 100%;
		left: 0;
	}

	/* .light.blue.right { */
	/* border-top-left-radius: 0rem !important; */
	/* border-bottom-left-radius: 0rem !important; */
	/* border-top-right-radius: 0.5rem !important; */
	/* border-bottom-right-radius: 0rem !important; */
	/* } */

	.light.blue.left {
		border-top-left-radius: 0rem !important;
		border-bottom-left-radius: 0rem !important;
		border-top-right-radius: 0rem !important;
		border-bottom-right-radius: 0rem !important;
	}

	.light.red {
		border-top-left-radius: 2rem !important;
		border-bottom-left-radius: 0rem !important;
		border-top-right-radius: 0rem !important;
		border-bottom-right-radius: 0rem !important;
	}
}


/* .lightbar::before { */
/* content: ""; */
/* position: absolute; */
/* bottom: 0; */
/* left: 0; */
/* width: 100%; */
/* height: 10px; */
/* background: #000; */
/* } */

.light {
	flex: 0.8;
	border: none;
	margin: 0;
	color: white;
	font-size: 1.4rem;
	letter-spacing: 1px;
	font-weight: bold;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
	cursor: pointer;
	position: relative;
	height: 3.8rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.light {
	position: relative;
	overflow: hidden; /* important for internal blur containment */
	isolation: isolate; /* prevents glow bleed between lights */
}

/* Inner glow core */
.light::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	bottom: 10%;
	border-radius: inherit;
	filter: blur(10px);
	opacity: 0.9;
	z-index: -1;
}

/* Gloss */
.light .shine {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	height: 35%;
	opacity: 0.8;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
	border-radius: inherit;
}

/* Inner shadow rim (depth) */
.light::after {
	content: "";
	position: absolute;
	inset: 0.3rem;
	filter: blur(10px);
	border-radius: inherit;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
	opacity: 0.7;
	z-index: 1;
	pointer-events: none;
}

/* Color per light */
.light.blue::before {
	background: radial-gradient(circle at center,
	rgba(90,200,255,1) 0%,
	rgba(30,100,255,0.6) 60%,
	rgba(0,50,150,0.2) 100%);
}

.light.red::before {
	background: radial-gradient(circle at center,
	rgba(255,100,100,1) 0%,
	rgba(200,0,0,0.7) 60%,
	rgba(100,0,0,0.2) 100%);
}

/* Blue lights (HOME / WORK) */
.light.blue {
	background: linear-gradient(to bottom, #30c3ff 0%, #0077ff 70%);
	box-shadow: 0 0 25px rgba(0, 150, 255, 0.9);
}

.light.blue.right {
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0rem;
}

.light.blue.left {
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0rem;
	border-top-right-radius: 0rem;
	border-bottom-right-radius: 0rem;
}

/* Divider between blue and red sections */
.divider {
	width: 2.5rem;
	height: 3rem;
	background: #100f2e;
}

/* Red light (HELP ME!) */
.light.red {
	flex: 1.6;
	height: 5rem;
	background: linear-gradient(to bottom, #ff4444 0%, #a40000 80%);
	box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 0rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 0rem;
	transform-origin: bottom center;
	font-size: 1.7rem;
}


/* Glow pulse for HELP ME */
@keyframes pulseRed {
	0%, 100% {
		box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
	}
	50% {
		box-shadow: 0 0 70px rgba(255, 50, 50, 1);
	}
}

.light.red {
	animation: pulseRed 2s infinite;
}