/* Enshitified — Peek-a-boo Poop + Poop Marching Band */

/* ---- the peeking poop (fixed, clickable, hugs the screen edge) ---- */
.ens-poop {
	position: fixed;
	z-index: 99999;
	pointer-events: none;
	will-change: transform, opacity;
}
.ens-poop__emoji {
	pointer-events: auto;
	cursor: pointer;
	user-select: none;
	line-height: 1;
	display: inline-block;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
	animation: ens-poop-idle 3.4s ease-in-out infinite;
	will-change: transform;
}
.ens-poop__emoji:focus-visible {
	outline: 3px dashed var(--ens-vermilion, #e05206);
	outline-offset: 4px;
}
.ens-poop--left  { top: 0;    left: 0; }
.ens-poop--right { top: 0;    right: 0; }
.ens-poop--top   { top: 0;    left: 0; }
.ens-poop--bottom{ bottom: 0; left: 0; }

/* gentle idle bob while peeking */
@keyframes ens-poop-idle {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

/* ---- poop marching band (full-screen non-interactive overlay) ---- */
.ens-band {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease;
}
.ens-band--on {
	visibility: visible;
	opacity: 1;
}

/* the horizontally-marched stage (slides right→left with pauses) */
.ens-band__stage {
	position: absolute;
	left: 0;
	top: 40vh;
	will-change: transform;
}

/* the marcher: whole band bobs up/down as it moves */
.ens-band__marcher {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	animation: ens-band-bob 1.1s ease-in-out infinite;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* the BIG poop director, dressed up (hat on top, baton held out) */
.ens-band__director {
	position: relative;
	width: 76px;
	height: 76px;
	line-height: 1;
	transform-origin: 50% 90%;
	animation: ens-band-conduct 0.6s ease-in-out infinite;
	will-change: transform;
}
.ens-band__conductor {
	position: absolute;
	left: 6px;
	bottom: 0;
	font-size: 62px;
	line-height: 1;
}
/* top hat, floating above the conductor's head */
.ens-band__hat {
	position: absolute;
	left: 12px;
	top: -20px;
	font-size: 34px;
	line-height: 1;
	animation: ens-band-hat 0.6s ease-in-out infinite;
	transform-origin: 50% 100%;
	z-index: 2;
}
/* magic-wand baton, held out to the side and flicked on the beat */
.ens-band__baton {
	position: absolute;
	right: -6px;
	top: 6px;
	font-size: 34px;
	line-height: 1;
	animation: ens-band-baton 0.6s ease-in-out infinite;
	transform-origin: 20% 80%;
	z-index: 3;
}

/* the pixel formation (tag words morphing into marching shapes) */
.ens-band__form {
	display: flex;
	flex-direction: column;
	line-height: 0;
}
.ens-band__row {
	display: flex;
	flex-direction: row;
	line-height: 0;
}
.ens-band__pix {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 15px;
	text-align: center;
	user-select: none;
}
.ens-band__pix.on {
	animation: ens-band-step 0.55s ease-in-out infinite;
}
.ens-band__pix.off {
	visibility: hidden;
}

/* whole band bobs up/down */
@keyframes ens-band-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
/* each poop takes a marching step in place */
@keyframes ens-band-step {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-4px) rotate(4deg); }
}
/* director conducts (rocks side to side on the beat) */
@keyframes ens-band-conduct {
	0%, 100% { transform: rotate(-14deg); }
	50%      { transform: rotate(14deg); }
}
/* hat tips with the beat */
@keyframes ens-band-hat {
	0%, 100% { transform: rotate(-8deg); }
	50%      { transform: rotate(10deg); }
}
/* baton flicks up on the beat */
@keyframes ens-band-baton {
	0%, 100% { transform: rotate(-30deg); }
	50%      { transform: rotate(40deg); }
}