/* ==========================================================================
   Ursprung easter egg.

   Nothing here hides page content. The egg sits beside the #origin tag and
   adds two lines of terminal output when clicked; the Ursprung prose is
   ordinary content and never depends on any of this.
   ========================================================================== */

/* Without JS the button cannot do its one job, so it is not offered. */
html:not(.js) .egg { display: none; }

.egg {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.egg__btn {
	display: inline-flex;
	padding: var(--s-1);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	line-height: 0;
	transition: color var(--motion-fast) var(--ease);
}

.egg__btn:hover { color: var(--ink); }

.egg__btn:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 2px;
}

/* Once it has hatched it is no longer a control — it stops inviting a click
   it will not answer. */
.egg[data-hatched] .egg__btn {
	cursor: default;
	pointer-events: none;
}

.egg__svg { overflow: visible; }

.egg__half {
	fill: var(--paper);
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linejoin: round;
	transform-origin: 12px 17px;
	transition:
		transform 520ms cubic-bezier(0.16, 0.9, 0.3, 1.4),
		opacity 520ms var(--ease);
}

/* Idle -----------------------------------------------------------------------
   A long cycle that is still for most of it. Something that moves constantly
   is a distraction; something that twitches once every eight seconds is a
   thing you notice out of the corner of your eye and go back to look at. */

@keyframes egg-idle {
	0%, 88%, 100% { transform: rotate(0deg); }
	90%           { transform: rotate(-7deg); }
	92.5%         { transform: rotate(6deg); }
	95%           { transform: rotate(-4deg); }
	97.5%         { transform: rotate(2deg); }
}

.egg:not([data-hatched]) .egg__svg {
	transform-origin: 12px 30px;
	animation: egg-idle 8s ease-in-out infinite;
}

/* Cracking — the beat between the click and the payoff. */

@keyframes egg-shake {
	0%, 100% { transform: rotate(0deg); }
	15%      { transform: rotate(-11deg); }
	30%      { transform: rotate(10deg); }
	45%      { transform: rotate(-8deg); }
	60%      { transform: rotate(7deg); }
	75%      { transform: rotate(-4deg); }
	90%      { transform: rotate(3deg); }
}

.egg[data-cracking] .egg__svg {
	transform-origin: 12px 30px;
	animation: egg-shake 560ms ease-in-out 1;
}

/* Hatched — the halves come apart along the crack they already shared. */

.egg[data-hatched] .egg__half--top {
	transform: translate(-3px, -11px) rotate(-26deg);
	opacity: 0;
}

.egg[data-hatched] .egg__half--bottom {
	transform: translateY(2px);
	opacity: 0.45;
}

/* Output ---------------------------------------------------------------------
   Lines land one after another, the same cadence as the boot sequence, so the
   two read as the same machine talking. */

.egg__out {
	display: block;
	/* Space on BOTH sides. Without the lower margin the output ran straight
	   into the Ursprung prose and read as its first paragraph. */
	margin-block: var(--s-3) var(--s-5);
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	line-height: 1.7;
	color: var(--muted);
	max-width: none;
}

.egg__out:empty { display: none; }

.egg__line {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(-3px);
	animation: egg-line 320ms var(--ease) forwards;
}

.egg__line::before {
	content: "> ";
	color: var(--signal);
}

@keyframes egg-line {
	to { opacity: 1; transform: none; }
}

/* Reduced motion -------------------------------------------------------------
   The egg still works: it still cracks, it still prints. It simply stops
   twitching for attention and stops throwing the shell across the box. */

@media (prefers-reduced-motion: reduce) {
	.egg:not([data-hatched]) .egg__svg,
	.egg[data-cracking] .egg__svg { animation: none; }

	.egg__half { transition: opacity 200ms linear; }

	.egg[data-hatched] .egg__half--top { transform: none; }
	.egg[data-hatched] .egg__half--bottom { transform: none; }

	.egg__line { opacity: 1; transform: none; animation: none; }
}