/**
 * Easter egg: hidden trigger + parade of GIFs from left and right
 */

/* Hidden trigger – bottom-right corner, subtle so it's discoverable but not obvious */
.easter-egg-trigger {
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 999999;
	width: 14px;
	height: 14px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 51, 160, 0.25);
	color: rgba(0, 51, 160, 0.5);
	font-size: 8px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.easter-egg-trigger:hover {
	opacity: 0.8;
	background: rgba(0, 51, 160, 0.4);
}
.easter-egg-trigger:focus {
	outline: 2px solid #0033a0;
	outline-offset: 2px;
}

/* Parade container: full width along bottom, no pointer events so page stays clickable */
.easter-egg-parade {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999998;
	pointer-events: none;
	height: 140px;
}

.easter-egg-side {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

.easter-egg-left {
	left: 0;
}

.easter-egg-right {
	right: 0;
}

/* Keyframes: enter from left (gradual), cross, exit right (gradual), then loop */
@keyframes easter-egg-walk-left-to-right {
	0% {
		transform: translateX(-100vw);
	}
	18% {
		transform: translateX(0);
	}
	82% {
		transform: translateX(100vw);
	}
	100% {
		transform: translateX(100vw);
	}
}

/* Keyframes: enter from right (gradual), cross, exit left (gradual), then loop */
@keyframes easter-egg-walk-right-to-left {
	0% {
		transform: translateX(100vw);
	}
	18% {
		transform: translateX(0);
	}
	82% {
		transform: translateX(-100vw);
	}
	100% {
		transform: translateX(-100vw);
	}
}

/* Initial state: all figures off-screen so delayed ones don't "pop" in */
.easter-egg-parade .easter-egg-from-left {
	transform: translateX(-100vw);
}
.easter-egg-parade .easter-egg-from-right {
	transform: translateX(100vw);
}

/* Each GIF wrapper – runs full-width animation, then loops; backwards = show 0% keyframe during delay */
.easter-egg-gif {
	display: flex;
	align-items: flex-end;
}

.easter-egg-parade.easter-egg-visible .easter-egg-from-left {
	animation: easter-egg-walk-left-to-right 28s ease-in-out infinite backwards;
}
.easter-egg-parade.easter-egg-visible .easter-egg-from-right {
	animation: easter-egg-walk-right-to-left 28s ease-in-out infinite backwards;
}

/* Stagger: closer together so all three are on screen at the same time */
.easter-egg-parade.easter-egg-visible .easter-egg-delay-1 {
	animation-delay: 0s;
}
.easter-egg-parade.easter-egg-visible .easter-egg-delay-2 {
	animation-delay: 3s;
}
.easter-egg-parade.easter-egg-visible .easter-egg-delay-3 {
	animation-delay: 6s;
}

.easter-egg-gif-img {
	display: block;
	max-height: 120px;
	width: auto;
	object-fit: contain;
	vertical-align: bottom;
}