/* ==========================================================================
   Floppy drive animation.

   One loop: the disk slides in, the drive reads, the disk ejects, pause.
   Timings are shared between the disk and the LED so the light only blinks
   while the disk is actually in the drive — a drive reading an empty slot is
   the kind of detail this audience notices.
   ========================================================================== */

.floppy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	color: var(--muted);
}

.floppy svg {
	width: 100%;
	max-width: 20rem;
	height: auto;
	overflow: visible;
}

/* Disk travel. Out of frame on the right, in to the slot, back out. */
.floppy__disk {
	animation: floppy-insert 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes floppy-insert {
	0%,   6%   { transform: translateX(38px); }
	20%,  62%  { transform: translateX(-92px); }   /* seated behind the drive */
	76%, 100%  { transform: translateX(38px); }
}

/* LED: dark while empty, working while the disk is seated. */
.floppy__led {
	fill: var(--rule);
	animation: floppy-led 7s steps(1, end) infinite;
}

@keyframes floppy-led {
	0%,  19%  { fill: var(--rule); }
	22%       { fill: var(--signal); }
	26%       { fill: var(--rule); }
	30%       { fill: var(--signal); }
	36%       { fill: var(--rule); }
	42%       { fill: var(--signal); }
	52%       { fill: var(--rule); }
	56%       { fill: var(--signal); }
	62%, 100% { fill: var(--rule); }
}

.floppy__caption {
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	color: var(--rule);
}

.floppy__status { color: var(--signal); }

/* Reduced motion: the disk rests half-inserted, which still reads as "floppy
   going into a drive" without anything moving. */
@media (prefers-reduced-motion: reduce) {
	.floppy__disk {
		animation: none;
		transform: translateX(-40px);
	}
	.floppy__led { animation: none; fill: var(--signal); }
}

/* ==========================================================================
   "Wie alles anfing" layout — text left, drive right.
   ========================================================================== */

.anfang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: var(--s-7);
	align-items: start;
	margin-block-start: var(--s-8);
}

.anfang__text > :first-child { margin-block-start: 0; }
.anfang__art { position: sticky; top: var(--s-8); }

@media (max-width: 61.99em) {
	.anfang {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
	}
	/* The drive comes first on narrow screens: it is the hook, and the story
	   reads better underneath it than after a scroll. */
	.anfang__art { order: -1; position: static; justify-self: start; }
	.floppy svg { max-width: 14rem; }
	.floppy { align-items: flex-start; }
}