/*
 * SEELEY Mission - was jede Kugel braucht (Karte B9, seit Paket M3bs,
 * 30.09.2026): der Griff, der eigene Zeiger und das Aussehen des Hinweises
 * "360°". Gehoert zu globus.js und laedt mit ihm - auf der Missionsseite vor
 * mission.css, auf der Startseite mit dem Band. Wo Kugel und Hinweis auf der
 * Seite stehen, sagt die Seite selbst (mission.css, band.css).
 *
 * Bis M3bs standen diese Regeln in mission.css, mit .sm-mission davor. Die
 * Spezifitaet ist darum eine Klasse niedriger; jede Regel traegt weiter
 * mindestens zwei Klassen (die Stile des Themes wiegen (0,1,0)) - ausser
 * .sm-zeiger, das am body haengt und nie mit dem Theme streitet (wie bisher).
 */

/* Der Griff (M3c): unsichtbar ueber der sichtbaren Kugelflaeche, Lage,
   Groesse und Kreis (clip-path) setzt globus.js. Unter dem Text seines
   Abschnitts (z-index 0 gegen 1). Setzt der Finger hier auf, dreht er die
   Kugel frei - die Seite scrollt nicht. Ueber einem Pin setzt globus.js den
   Zeiger auf pointer. Bei Maus und Trackpad setzt globus.js --sm-zeiger:
   none am Abschnitt - dort zeigt das eigene Zeichen (.sm-zeiger, unten);
   ohne JavaScript und am Finger bleibt grab/grabbing. Die Griffe legt
   globus.js an, sm-hat-globus setzt es an die Huelle, sobald die Kugel
   gezeichnet ist - vorher ist jeder Griff verborgen (hidden). Bis M3bs
   stand hier je Abschnitt der Missionsseite eine Zeile in mission.css. */
.sm-hat-globus .sm-griff {
	position: absolute;
	z-index: 0;
	touch-action: none;
	cursor: var(--sm-zeiger, grab);
}

.sm-hat-globus .sm-zieht,
.sm-hat-globus .sm-zieht > .sm-griff {
	cursor: var(--sm-zeiger, grabbing);
	-webkit-user-select: none;
	user-select: none;
}

/* Der eigene Zeiger (M3l, Dennis 25.09.2026: "eine stylischere Maus"):
   globus.js legt ihn an den body und schiebt ihn per transform unter die
   Maus - Mittelpunkt = Mauspunkt. Nur ueber der Kugel im Kopf, nur Maus und
   Trackpad. Ruhe: Ring 28 px, Linie 1,25 px, zwei Drehpfeile, in der Mitte
   ein 2-px-Punkt; Ziehen: Ring 21 px, gefuellt, Linie bleibt 1,25 px;
   Pin/Name: nur der Punkt, 10 px. Wechsel in 0,15 s. Beige wie der Hinweis,
   mit dunklem Schein - auch auf hellen Stellen des Films sichtbar.
   Begruendung und Messung: Fahrplan M3l. */
.sm-zeiger {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	will-change: transform;
}

.sm-zeiger.sm-an {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease;
}

.sm-zeiger .sm-zeiger-ring {
	position: absolute;
	top: -17px;
	left: -17px;
	display: block;
	overflow: visible;
	fill: none;
	stroke: #E1D6A9;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
	transition: transform 0.15s ease, opacity 0.15s ease, stroke-width 0.15s ease;
}

.sm-zeiger .sm-zeiger-flaeche {
	fill: #E1D6A9;
	fill-opacity: 0;
	stroke: none;
	transition: fill-opacity 0.15s ease;
}

.sm-zeiger .sm-zeiger-punkt {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #E1D6A9;
	box-shadow: 0 0 0 1px rgba(38, 38, 38, 0.35), 0 0 6px rgba(0, 0, 0, 0.45);
	transform: scale(0.2);
	transition: transform 0.15s ease;
}

.sm-zeiger.sm-zeiger-zieht .sm-zeiger-ring {
	transform: scale(0.75);
	stroke-width: 1.67;
}

.sm-zeiger.sm-zeiger-zieht .sm-zeiger-flaeche {
	fill-opacity: 0.3;
}

.sm-zeiger.sm-zeiger-zieht .sm-zeiger-punkt {
	transform: scale(0);
}

.sm-zeiger.sm-zeiger-pin .sm-zeiger-ring {
	opacity: 0;
	transform: scale(0.4);
}

.sm-zeiger.sm-zeiger-pin .sm-zeiger-punkt {
	transform: none;
}

/* Der Hinweis "360°" (M3k, seit M3p neu): wo er klebt, sagt die Seite
   (mission.css: sticky in der Buehne, um die Hoehe der Zeichenflaeche
   hochgezogen; Startseite: im Band). Seine
   Mitte setzt globus.js per translate auf den sichtbaren Teil der Kugel,
   transform zentriert ihn darauf, scale atmet um diese Mitte. Faengt keinen
   Zeiger - Ziehen und Pins gehen durch ihn hindurch. Sichtbar mit .sm-da
   (im Kopf, ausser beim Ziehen), durchsichtig mit .sm-weicht (ein Pin liegt
   darunter). Unterlage durchsichtig, OHNE Weichzeichnung - Dennis hat am
   25.09.2026 aus den Stufen von M3p "ohne Unschaerfe: Flaeche 0,33, Rand
   0,2" gewaehlt (M3q). Film und Linien bleiben dahinter erkennbar; Schrift
   und Zeichen voll deckend Beige mit weichem dunklem Schein. Die Schrift
   liegt damit an hellen Stellen unter 4,5:1 - gemessen und Dennis vorgelegt.
   Begruendung, Stufen und Messung: Fahrplan M3k, M3p, M3q.
   M3bh (Dennis 26.09.2026: "viel diskreter", "wieder dieses Pulsieren";
   Wahl A aus drei Bildern - die blasse Pille; M3bg hatte irrtuemlich B
   gebaut): Flaeche 0,12 statt 0,33, Rand 0,1 statt 0,2, Schrift gedaempft
   (0,7, "360°" 0,8). Das Atmen war bei 3,5 % nicht zu sehen - jetzt 6 %,
   und der Rand leuchtet dabei bis 0,35 auf.
   M3bi (Wahl S3, "unauffaelliger bei gleicher Groesse"): die Beschriftung in
   normaler Schreibweise statt gesperrter Grossbuchstaben, und das Atmen
   glimmt ueber die Helligkeit (Schrift, Zeichen, Rand 0,5 -> 0,85) statt
   ueber die Groesse (nur noch 2 %). */
.sm-globus-buehne > .sm-dreh-hinweis {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 4px 8px;
	box-sizing: border-box;
	width: max-content;
	padding: 6px 10px 6px 8px;
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: rgba(225, 214, 169, 0.7);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.35);
	background-color: rgba(22, 22, 20, 0.12);
	border: 1px solid rgba(225, 214, 169, 0.1);
	border-radius: 17px;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
	animation: sm-dreh-atmen 2.3s ease-in-out infinite;
}

/* M3r: schneller zurueck - nach dem Loslassen und nach einem Pin 0,3 s
   statt 0,8 s (Dennis: "noch etwas zu traege"). */
.sm-globus-buehne > .sm-dreh-hinweis.sm-da {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.sm-globus-buehne > .sm-dreh-hinweis.sm-da.sm-weicht {
	opacity: 0.25;
	transition: opacity 0.25s ease;
}

/* Atmen im Takt der Pins (M3m: 2,3 s): seit M3bi ein Glimmen - Schrift,
   Zeichen (currentColor) und Rand werden heller und wieder dunkler, die
   Groesse aendert sich nur um 2 %. */
@keyframes sm-dreh-atmen {
	0%, 100% { scale: 1; color: rgba(225, 214, 169, 0.5); border-color: rgba(225, 214, 169, 0.06); }
	50% { scale: 1.02; color: rgba(225, 214, 169, 0.85); border-color: rgba(225, 214, 169, 0.28); }
}

.sm-dreh-hinweis .sm-dreh-zeichen {
	display: block;
	grid-row: 1 / span 2;
	overflow: visible;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Der Pfeil laeuft einmal herum und ruht dann - alle 3,6 s. */
.sm-dreh-hinweis .sm-dreh-pfeil {
	transform-box: view-box;
	transform-origin: 12px 12px;
	animation: sm-dreh-pfeil 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes sm-dreh-pfeil {
	0% { transform: rotate(0deg); }
	40%, 100% { transform: rotate(360deg); }
}

/* Zwei Zeilen neben dem Zeichen: oben "360°", darunter die Beschriftung -
   so passt er bei 375 px auf die sichtbare Kugel. */
/* M3t (Dennis: "mach die Pille noch kleiner"): rund ein Viertel kleiner -
   360° 11 statt 13 px, Beschriftung 9,5 statt 11 px, Zeichen 20 statt 26 px. */
.sm-dreh-hinweis .sm-dreh-grad {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: inherit;
}

.sm-dreh-hinweis .sm-dreh-maus,
.sm-dreh-hinweis .sm-dreh-finger {
	grid-column: 2;
	grid-row: 2;
}

/* Maus: ziehen, Finger: wischen - je nach Zeiger eine Beschriftung. */
.sm-dreh-hinweis .sm-dreh-finger {
	display: none;
}

@media (pointer: coarse) {
	.sm-dreh-hinweis .sm-dreh-maus {
		display: none;
	}

	.sm-dreh-hinweis .sm-dreh-finger {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-dreh-hinweis .sm-dreh-pfeil,
	.sm-globus-buehne > .sm-dreh-hinweis {
		animation: none;
	}

	/* M3l: das Zeichen folgt weiter der Hand, wechselt aber ohne Uebergang */
	.sm-zeiger,
	.sm-zeiger.sm-an,
	.sm-zeiger .sm-zeiger-ring,
	.sm-zeiger .sm-zeiger-flaeche,
	.sm-zeiger .sm-zeiger-punkt {
		transition: none;
	}
}