/**
 * Penrose Relativity-Szene 115 - Frontend-Styles
 *
 * Layout-Werte (Positionen/Größen/Skalierung) wurden mit einem echten
 * HTML/CSS-Rendering geprüft: 3 Instanzen, je 48% x 36.5% groß, an
 * (26%,2%) / (2%,50%) / (50%,50%) positioniert, intern mit scale(0.6)
 * verkleinert. Der Skalierungsfaktor 0.6 garantiert rechnerisch, dass eine
 * um bis zu 360° gedrehte 372x283-Fläche niemals über ihre eigene,
 * unrotierte Zelle hinausragt (0.6 < 1/√2 für dieses Seitenverhältnis).
 */

.prs115-scene {
	--prs115-tread-color: #ffffff;
	--prs115-light-color: #cccccc;
	--prs115-dark-color: #999999;
	--prs115-stroke-color: #000000;
	--prs115-stroke-width: 1;
	--prs115-ball-size: 8%;

	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 45 / 38;
	margin: 0 auto;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.prs115-instance {
	position: absolute;
	width: 48%;
	height: 36.5%;
}

.prs115-instance__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
}

.prs115-figure {
	position: relative;
	width: 100%;
	height: 100%;
}

.prs115-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.prs115-svg--front {
	z-index: 3;
	pointer-events: none;
}

.prs115-svg--back {
	z-index: 1;
}

.prs115-lines {
	stroke: var(--prs115-stroke-color);
	stroke-width: var(--prs115-stroke-width);
	stroke-linejoin: round;
}

.prs115-fill-tread {
	fill: var(--prs115-tread-color);
}

.prs115-fill-light {
	fill: var(--prs115-light-color);
}

.prs115-fill-dark {
	fill: var(--prs115-dark-color);
}

.prs115-ball {
	position: absolute;
	z-index: 2;
	width: var(--prs115-ball-size);
	aspect-ratio: 1 / 1;
	left: 0;
	top: 0;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 35% 30%, #f5f5f5, #b9b9b9 70%, #8b8b8b 100%);
	transform: translate3d(-50%, -50%, 0) scale(1);
	will-change: transform, left, top;
	pointer-events: none;
}

.prs115-scene--shadow .prs115-ball {
	filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

.prs115-ball__texture {
	position: absolute;
	inset: -15%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	transform-origin: 50% 50%;
	will-change: transform;
}

.prs115-scene__toggle {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.prs115-scene__toggle:focus-visible {
	outline: 2px solid #4f9dff;
	outline-offset: -2px;
}

@media (min-width: 320px) {
	.prs115-scene {
		min-width: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prs115-ball,
	.prs115-ball__texture {
		transition: none !important;
	}
}