.gw-ghost-layer {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.gw-ghost {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: clamp(34px, 3.2vw, 56px);
	aspect-ratio: 3 / 4;
	background-image: var(--gw-ghost-image, url("/images/effects/spooky-ghost.svg"));
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 0 18px rgba(73, 215, 255, 0.34));
	opacity: 0;
	transform:
		translate3d(var(--gw-ghost-x, 0), var(--gw-ghost-y, 0), 0)
		translate3d(var(--gw-ghost-start-x, 0), var(--gw-ghost-start-y, 24px), 0)
		scale(var(--gw-ghost-scale, 1));
	will-change: opacity, transform;
}

.gw-ghost.is-peeking {
	animation: gw-ghost-peek var(--gw-ghost-duration, 7s) ease-in-out forwards;
}

.gw-soldier {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: none;
	width: clamp(58px, 4.2vw, 78px);
	aspect-ratio: 269 / 240;
	background-image: var(--gw-soldier-image, url("/images/effects/tactical-soldier.webp"));
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 0 12px rgba(93, 231, 143, 0.32));
	opacity: 0;
	transform:
		translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
		translate3d(0, var(--gw-soldier-start-y, 28px), 0);
	will-change: opacity, transform;
}

.gw-wizard {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: none;
	width: clamp(58px, 4.4vw, 80px);
	aspect-ratio: 283 / 260;
	background-image: var(--gw-wizard-image, url("/images/effects/light-wizard.webp"));
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 0 14px rgba(72, 196, 255, 0.42));
	opacity: 0;
	transform:
		translate3d(var(--gw-wizard-x, 0), var(--gw-wizard-y, 0), 0)
		translate3d(0, var(--gw-wizard-start-y, 30px), 0);
	will-change: opacity, transform;
}

html[data-theme="tactical"] .gw-soldier {
	display: block;
}

html[data-theme="light"] .gw-wizard {
	display: block;
}

.gw-soldier.is-firing {
	animation: gw-soldier-fire 1060ms ease-in-out forwards;
}

.gw-wizard.is-casting {
	animation: gw-wizard-cast 1120ms ease-in-out forwards;
}

html[data-theme="light"] .gw-ghost {
	filter: drop-shadow(0 0 16px rgba(47, 143, 181, 0.34)) contrast(0.92) saturate(0.86);
	opacity: 0;
}

html[data-theme="tactical"] .gw-ghost {
	filter: drop-shadow(0 0 16px rgba(93, 231, 143, 0.34)) hue-rotate(72deg) saturate(0.86);
}

html[data-theme="hell"] .gw-ghost {
	filter: drop-shadow(0 0 18px rgba(255, 122, 45, 0.36)) hue-rotate(160deg) saturate(0.9);
}

html[data-theme="crush"] .gw-ghost {
	filter: drop-shadow(0 0 18px rgba(255, 102, 190, 0.38)) hue-rotate(238deg) saturate(0.92);
}

html[data-theme="lightning"] .gw-ghost {
	filter: drop-shadow(0 0 18px rgba(255, 221, 89, 0.34)) hue-rotate(186deg) saturate(0.86);
}

@keyframes gw-ghost-peek {
	0% {
		opacity: 0;
		transform:
			translate3d(var(--gw-ghost-x, 0), var(--gw-ghost-y, 0), 0)
			translate3d(var(--gw-ghost-start-x, 0), var(--gw-ghost-start-y, 24px), 0)
			scale(var(--gw-ghost-scale, 1));
	}
	18% {
		opacity: var(--gw-ghost-opacity, 0.62);
	}
	42%,
	58% {
		opacity: var(--gw-ghost-opacity, 0.62);
		transform:
			translate3d(var(--gw-ghost-x, 0), var(--gw-ghost-y, 0), 0)
			translate3d(var(--gw-ghost-peek-x, 0), var(--gw-ghost-peek-y, -16px), 0)
			scale(var(--gw-ghost-scale, 1));
	}
	100% {
		opacity: 0;
		transform:
			translate3d(var(--gw-ghost-x, 0), var(--gw-ghost-y, 0), 0)
			translate3d(var(--gw-ghost-end-x, 0), var(--gw-ghost-end-y, 26px), 0)
			scale(var(--gw-ghost-scale, 1));
	}
}

@keyframes gw-soldier-fire {
	0% {
		opacity: 0;
		transform:
			translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
			translate3d(0, var(--gw-soldier-start-y, 28px), 0);
	}
	16%,
	78% {
		opacity: 0.9;
		transform:
			translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
			translate3d(0, var(--gw-soldier-peek-y, 0), 0);
	}
	28%,
	43%,
	58% {
		transform:
			translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
			translate3d(4px, var(--gw-soldier-peek-y, 0), 0);
	}
	34%,
	49%,
	64% {
		transform:
			translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
			translate3d(-3px, var(--gw-soldier-peek-y, 0), 0);
	}
	100% {
		opacity: 0;
		transform:
			translate3d(var(--gw-soldier-x, 0), var(--gw-soldier-y, 0), 0)
			translate3d(0, var(--gw-soldier-end-y, 32px), 0);
	}
}

@keyframes gw-wizard-cast {
	0% {
		opacity: 0;
		transform:
			translate3d(var(--gw-wizard-x, 0), var(--gw-wizard-y, 0), 0)
			translate3d(0, var(--gw-wizard-start-y, 30px), 0)
			scale(0.96);
	}
	18%,
	78% {
		opacity: 0.94;
		transform:
			translate3d(var(--gw-wizard-x, 0), var(--gw-wizard-y, 0), 0)
			translate3d(0, var(--gw-wizard-peek-y, 0), 0)
			scale(1);
	}
	38%,
	58% {
		filter: drop-shadow(0 0 22px rgba(72, 196, 255, 0.72));
		transform:
			translate3d(var(--gw-wizard-x, 0), var(--gw-wizard-y, 0), 0)
			translate3d(2px, var(--gw-wizard-peek-y, 0), 0)
			scale(1.04);
	}
	100% {
		opacity: 0;
		transform:
			translate3d(var(--gw-wizard-x, 0), var(--gw-wizard-y, 0), 0)
			translate3d(0, var(--gw-wizard-end-y, 34px), 0)
			scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gw-ghost-layer {
		display: none;
	}
}