/* OTONGO.scan Styling - Teil der visuellen Signatur von OTONGO.tools
 * Zeigt die Philosophie "Kontrolle statt Konsum" visuell
 *
 * Implementierung: Ring rotiert, stoppt bei Hover. Pupille folgt Maus (JS).
 */

.otongo-scan-container {
	width: 672px;
	height: 672px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto; /* Für die mittige Positionierung */
}

/* Ende: Animationen für Scan-Elemente */

@font-face {
	font-family: "Caveat";
	src: url("fonts/caveat/Caveat-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Caveat";
	src: url("fonts/caveat/Caveat-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

/* Responsive Anpassung für Mobile */

/* Container für alle SVG-Elemente - sorgt für genaue Positionierung */
.svg-container {
	position: relative;
	width: 672px;
	height: 672px;
}

/* Schattenstil ist konsistent mit der OTONGO-Website */
.otongo-scan,
.otongo-scan-eye {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Container für den schnellen Ring */
.ring-fast-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Container für das Auge (weißer Bereich, Pupille, Reflex) */
.eye-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* Über den Ringen */
}

/* Schneller Ring: Rotation in 15 Sekunden */
.scan-ring-fast {
	transform-origin: center;
	animation: ring-rotate 3s linear infinite;
}

/* Verhalten beim Hover: Rotation stoppen */
.otongo-scan-container:hover .ring-fast-container {
	/* Stoppt die Rotation des schnellen Rings */
	.scan-ring-fast {
		animation-play-state: paused;
	}
}

/* Pulsieren der Pupille */
.scan-pupil {
	transform-origin: center;
	animation: pupil-pulse 3s ease-in-out infinite;
	fill: var(--primary-dark); /* Primare Farbe aus dem Farbschema der Webseite */
}

/* Bewegungseigenschaften für Pupille, weißen Bereich und Lichtreflex */
.scan-pupil,
.scan-inner-eye,
.scan-reflection {
	transition: transform 0.2s ease-out;
}

/* Keyframes für Ringrotation */
@keyframes ring-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Keyframes für Pupillenpulsieren (+10% Radius) */
@keyframes pupil-pulse {
	0%,
	100% {
		r: 30;
	}
	50% {
		r: 33;
	}
}

/* Media Query Anpassungen für responsive Design */
@media screen and (max-width: 1400px) {
	.otongo-scan-container,
	.svg-container {
		width: 400px;
		height: 400px;
	}
}
@media screen and (max-width: 900px) {
	.otongo-scan-container,
	.svg-container {
		width: 250px;
		height: 250px;
	}
}
@media screen and (max-width: 600px) {
	.otongo-scan-container,
	.svg-container {
		width: 160px;
		height: 160px;
	}
}
@media screen and (max-width: 768px) {
	.otongo-scan-container,
	.svg-container {
		width: 200px;
		height: 200px;
	}
}