:root {
	--loader-bg: var(--color-accent);
	--loader-brand: #ffffff;
	--bulb-light: #ffeb3b;
}

body {
	margin: 0;
	padding: 0;
}

body.is-loading {
	overflow: hidden;
}

.loader-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--loader-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 30003;
	opacity: 0;
	visibility: hidden;
}

body.is-loading .loader-overlay {
	opacity: 1;
	visibility: visible;
}

.loader-overlay.hide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}

.loader-container {
	width: 400px;
}

.draw-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	stroke: var(--loader-brand);
	fill-opacity: 0;
	transition: stroke-dashoffset 1.2s cubic-bezier(0.45, 0, 0.55, 1), fill-opacity 0.5s ease 0.8s;
}

.active .draw-path {
	stroke-dashoffset: 0;
	fill-opacity: 1;
}

.fill-appear {
	opacity: 0;
	fill: var(--loader-brand);
	transition: opacity 0.5s ease 0.8s;
}

.active .fill-appear {
	opacity: 1;
}

.bulb-unit {
	transform: translateY(-80px);
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s, opacity 0.3s ease 0.5s;
}

.active .bulb-unit {
	transform: translateY(0);
	opacity: 1;
}

.bulb-unit polygon,
.bulb-unit path:not(#glow-target) {
	fill: var(--loader-brand);
}

.pixar-animation path[fill="white"] {
	fill: var(--loader-brand);
}

#glow-target {
	transition: all 0.2s ease;
	fill: var(--loader-brand);
}

.light-on #glow-target {
	fill: var(--bulb-light);
	filter: drop-shadow(0 0 8px rgb(255 235 59 / 80%)) drop-shadow(0 0 15px rgb(255 193 7 / 40%));
}

.light-on.pixar-animation {
	filter: drop-shadow(0 0 2px rgb(170 139 102 / 20%));
	transition: filter 0.3s ease;
}