/* Poprawki układu na stronie „Niebo".
 *
 * Cztery rzeczy zgłoszone przy przeglądzie: pasek planet uciekał w lewo,
 * pas ze znakami zodiaku był za mały, róża kierunków nie pokazywała, gdzie
 * właśnie patrzysz, a koło „Kosmicznej energii chwili" wyglądało na martwe.
 *
 * To ostatnie okazało się brakiem afordancji, nie brakiem funkcji: klikanie
 * i karta z księgami były wpięte od dawna, tylko nic ich nie zapowiadało.
 * Dlatego niżej jest sam kursor, podświetlenie i obrót — karty NIE dublujemy,
 * strona ma własną (`#astro-karta` z `sky-slider.js`).
 *
 * WAŻNE o kolejności: `niebo.css` jest wpisany wprost w treść strony, więc
 * ląduje PO tym arkuszu. Przy równej specyficzności wygrywa on, nie my — i tak
 * właśnie przepadła pierwsza wersja tych poprawek. Dlatego tam, gdzie
 * nadpisujemy jego reguły, klasa jest podwojona (`.znaki-scena.znaki-scena`):
 * to podnosi specyficzność i uniezależnia nas od kolejności ładowania.
 */

/* ─────────────────────────  pasek planet  ───────────────────────── */

/* „Gdzie teraz są planety" — dziesięć ciał w rzędzie flex, przyklejonych do
   lewej krawędzi. Na szerokim ekranie zostawiało to pół metra pustki po
   prawej. `safe` chroni początek listy, gdy rząd nie mieści się w kadrze
   i trzeba go przewijać. */
.ephemeris .bodies {
	justify-content: center;
	justify-content: safe center;
}

/* Rząd planet w panelu kompasu — ta sama sprawa, inna siatka. */
.ke-planety-rzad {
	justify-content: center;
}

@media ( max-width: 900px ) {
	.ke-planety-rzad {
		grid-auto-flow: row;
		grid-template-columns: repeat( auto-fit, minmax( 5.5rem, max-content ) );
		justify-content: center;
	}
}

/* ──────────────────────  pas ze znakami zodiaku  ────────────────── */

/* Karty konstelacji ustawia transformacjami skrypt, więc zamiast ruszać ich
   rozmiar (co rozjechałoby rozstaw) powiększamy całą scenę. Wysokość sceny
   musi rosnąć razem ze skalą, bo scena ma `overflow: hidden`. */
.znaki-scena.znaki-scena {
	height: 430px;
}

.znaki-tor.znaki-tor {
	transform: scale( 1.42 );
	transform-origin: center center;
}

@media ( max-width: 900px ) {
	.znaki-scena.znaki-scena { height: 360px; }
	.znaki-tor.znaki-tor    { transform: scale( 1.12 ); }
}

@media ( max-width: 640px ) {
	.znaki-scena.znaki-scena { height: 280px; }
	.znaki-tor.znaki-tor    { transform: none; }
}

/* ─────────────────────  róża kierunków: kadr  ───────────────────── */

/* Klin i igła pokazują, jaki wycinek widnokręgu widać w panoramie.
 * Rysuje je `niebo-plus.js`; tu tylko płynne przejście przy przeciąganiu. */
.mn-kadr {
	transition: transform 0.12s linear;
	pointer-events: none;
}

/* ──────────────  koło „Kosmiczna energia chwili": klikanie  ────────────── */

/* Emblematy znaków i planety są zwykłymi `<image>` w SVG. Robimy z nich cele:
   kursor, obrys przy najechaniu, obsługa klawiatury. Nie dokładamy nowych
   węzłów do SVG, bo skrypt nieba przerysowuje koło przy zmianie czasu —
   klikanie obsługujemy delegacją zdarzeń, a te style trzymają się samych
   obrazków i przeżywają każde przerysowanie. */
svg.nt-kolo image {
	cursor: pointer;
	transition: filter .18s;
}

svg.nt-kolo image:hover,
svg.nt-kolo image:focus-visible,
svg.nt-kolo image.nk-wybrany {
	outline: none;
	filter: drop-shadow( 0 0 7px rgba( 240, 206, 126, .95 ) );
}

/* Obrót koła po kliknięciu: wybrany emblemat staje u góry. Kąt wchodzi
   zmienną, a emblematy i podpisy odrabiają go co do stopnia, żeby nie
   stanęły na głowie. Po zamknięciu okna kąt wraca do zera i koło znów
   pokazuje prawdziwe położenie ciał. */
svg.nt-kolo {
	transform: rotate( var( --nk-kat, 0deg ) );
	transition: transform .8s cubic-bezier( .22, 1, .36, 1 );
}

svg.nt-kolo image,
svg.nt-kolo text {
	transform: rotate( calc( -1 * var( --nk-kat, 0deg ) ) );
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .8s cubic-bezier( .22, 1, .36, 1 );
}

/* Znacznik u góry — miejsce, w które trafia wybrany emblemat. */
.nt-karta--kolo { position: relative; }

.nk-wskaznik {
	position: absolute;
	left: 50%;
	width: 13px;
	height: 11px;
	margin-left: -6.5px;
	background: #f0ce7e;
	clip-path: polygon( 50% 100%, 0 0, 100% 0 );
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
	z-index: 4;
}

.nt-karta--kolo.nk-obrocone .nk-wskaznik { opacity: 1; }

/* ────────────────────────  faza Księżyca  ──────────────────────── */

/* Wszędzie leży tarcza w pełni, a fazę robi cień terminatora nałożony na nią
   przez `niebo-plus.js`. Opakowanie ma trzymać dokładnie rozmiar zdjęcia,
   żeby cień pokrywał się z tarczą co do piksela. */
.mn-ks {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}

/* Obrazek wypełnia opakowanie, które przejęło jego dawną klasę i układ. */
.mn-ks > .mn-ks__tarcza {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: static;
	inset: auto;
	margin: 0;
	transform: none;
}

.mn-ks__cien {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ──────────────  pasek stron świata pod panoramą  ────────────────── */

/* Litery rysuje `niebo-plus.js` z azymutu; tutaj sam wygląd. Główne kierunki
   są większe i jaśniejsze, pośrednie zostają szeptem. */
svg.marks text.mn-roza {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 17px;
	letter-spacing: .22em;
	fill: rgba( 240, 206, 126, .45 );
}

svg.marks text.mn-roza--glowna {
	font-size: 26px;
	letter-spacing: .18em;
	fill: #f0ce7e;
}

/* ──────────────────────  mapa nieba: klikanie  ────────────────────── */

/* Znaki i planety na mapie mają `data-astro` i otwierają kartę z ksiąg —
   brakowało tylko afordancji. Kursor i podświetlenie przy najechaniu. */
svg.mn-kopula [data-astro] {
	cursor: pointer;
	transition: filter .18s;
}

svg.mn-kopula [data-astro]:hover,
svg.mn-kopula [data-astro]:focus-visible {
	outline: none;
	filter: drop-shadow( 0 0 6px rgba( 240, 206, 126, .95 ) );
}

/* Strony świata: były w rozmiarze 13 i ginęły przy krawędzi rysunku. */
svg.mn-kopula text.mn-strona {
	font-size: 21px;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	letter-spacing: .06em;
	fill: #f0ce7e;
	paint-order: stroke;
	stroke: rgba( 2, 3, 22, .85 );
	stroke-width: 3px;
}

/* ────────────────  koło: powiększenie na rozmytym tle  ──────────────── */

/* Kliknięcie w samo koło (poza emblematem) powiększa je. Kursor to zapowiada. */
svg.nt-kolo,
svg.mn-kopula { cursor: zoom-in; }

svg.nt-kolo [data-astro],
svg.mn-kopula [data-astro] { cursor: pointer; }

.nk-lupa {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: grid;
	place-items: center;
	padding: 3vmin;
	background: rgba( 3, 2, 16, .82 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

.nk-lupa__scena {
	width: min( 86vmin, 900px );
	aspect-ratio: 1 / 1;
	filter: drop-shadow( 0 0 60px rgba( 116, 66, 214, .5 ) );
}

.nk-lupa__scena svg {
	width: 100%;
	height: 100%;
	cursor: default;
}

/* Mapa nieba kręci się wolniej i w całości — razem z podpisami. */
.nk-lupa__scena--mapa svg.mn-kopula {
	animation: nkLupaObrot 240s linear infinite;
}

.nk-lupa__scena--mapa:hover svg.mn-kopula,
.nk-lupa.stoi svg.mn-kopula {
	animation-play-state: paused;
}

/* W powiększeniu koło kręci się powoli samo. Emblematy odrabiają ten obrót,
   żeby nie stanęły na głowie — druga animacja o tym samym czasie. */
.nk-lupa__scena svg.nt-kolo {
	transform: none;
	animation: nkLupaObrot 150s linear infinite;
}

.nk-lupa__scena svg.nt-kolo image,
.nk-lupa__scena svg.nt-kolo text {
	transform: none;
	transform-box: fill-box;
	transform-origin: center;
	animation: nkLupaPrzeciw 150s linear infinite;
}

/* Pod kursorem i po wybraniu emblematu koło staje — wtedy się je czyta. */
.nk-lupa__scena:hover svg.nt-kolo,
.nk-lupa__scena:hover svg.nt-kolo image,
.nk-lupa__scena:hover svg.nt-kolo text,
.nk-lupa.stoi svg.nt-kolo,
.nk-lupa.stoi svg.nt-kolo image,
.nk-lupa.stoi svg.nt-kolo text {
	animation-play-state: paused;
}

@keyframes nkLupaObrot {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}

@keyframes nkLupaPrzeciw {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( -360deg ); }
}

.nk-lupa__zamknij {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba( 240, 206, 126, .45 );
	border-radius: 50%;
	background: rgba( 10, 7, 30, .9 );
	color: #f0ce7e;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.nk-lupa__zamknij:hover,
.nk-lupa__zamknij:focus-visible {
	outline: none;
	border-color: #f0ce7e;
	color: #fff3d4;
}

@media ( prefers-reduced-motion: reduce ) {
	.mn-kadr,
	svg.nt-kolo,
	svg.nt-kolo image,
	svg.nt-kolo text {
		transition: none;
	}

	.nk-lupa__scena svg.nt-kolo,
	.nk-lupa__scena svg.nt-kolo image,
	.nk-lupa__scena svg.nt-kolo text,
	.nk-lupa__scena--mapa svg.mn-kopula {
		animation: none;
	}
}