/* Seite */
body {
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Augen Gruppe */
.eyes {
    display: flex;
    gap: 60px;
}

/* Auge */
.eye {
	width: 120px;
	height: 120px;
	background: white;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(255,255,255, 0);
}

/* Pupille */
.pupil {
	width: 40px;
	height: 40px;
	background: black;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	will-change: transform;
}

/* Lid verdeckt das Auge beim Blinzeln */
.eye::after {
	content: "";
	position: absolute;
	inset: -2px;
	background: #121212;
	border-radius: 50%;
	transform-origin: top center;
	transform: translateZ(0) scaleY(0);
	transition: transform 0.12s ease-out;
	pointer-events: none;
	z-index: 2;
}

/* Lid schließt sich */
.eye.blink::after {
	transform: translateZ(0) scaleY(1);
	transition: transform 0.08s ease-in;
}

/* Rand */
.eye { box-shadow: inset 0 0 0 2px #121212, 0 0 20px rgba(255,255,255,0); }