/*
 * logo-anim.css — pozornica za animaciju loga.
 *
 * GEOMETRIJA NIJE OD OKA. Animacija se proteže daleko izvan okvira loga, pa se
 * pozornica dimenzionira na UKUPNI raspon animacije, a logo se u nju smješta
 * postotkom. Brojevi su izvezeni iz podataka (28 čestica × radijus prstena ×
 * tri stanja: točka rođenja, meta, točka odleta), u jedinicama viewBoxa
 * (0..445.84 × 0..80.82):
 *
 *   raspon animacije     x  −86.13 .. 473.39      y  −59.92 .. 171.52
 *   pozornica            559.52 × 231.44 jedinica      (omjer 2.41756)
 *   logo u pozornici     središte 50 / 50
 *                        širina varijabla `--da-logo-w`   (25 %, a 45 % ispod 600 px)
 *                        visina izvedena `--da-logo-h`
 *
 * VELIČINA LOGA JE JEDAN BROJ. `--da-logo-w` je širina loga kao postotak
 * širine pozornice i to je jedino što se dira. Visina se iz nje izvodi:
 *
 *   logo je 25 % širine pozornice, vlastiti odnos mu je 80.82 / 445.84,
 *   a pozornica je 2.4175595 puta šira nego viša, pa je
 *   25 % × 0.1812758 × 2.4175595 = 10.9561 % visine pozornice.
 *
 * Faktor 0.4382409 (= 0.1812758 × 2.4175595) stoji u `--da-logo-h`, pa se
 * `--da-logo-w` može promijeniti bez ijednog dodatnog računa. Obje varijable
 * žive na kutiji naslova, gdje ih nasljeđuju i logo i natpis — tako se ne može
 * dogoditi da jedno od njih ostane na staroj veličini, a drugo ne.
 *
 * Zato `top` i razmak ispod loga nisu pikseli nego izvedeni postoci: polovica
 * `--da-logo-h` je ono što ih oboje veže na isti broj.
 *
 * PRI 25 % LET VIŠE NE DODIRUJE RUB POZORNICE. Raspon animacije je
 * 559.52 × 231.44 jedinica; pri širini loga od 25 % pozornice to je 31.373 %
 * pozornice u obje osi, dakle cijela putanja čestica (i rast i odlet) stane
 * unutra. `overflow: clip` sada samo čuva stranicu od trake za pomicanje.
 * Pri 79.6826 % bila je pozornica točno velika koliko i putanja; sada je veća
 * od nje, pa je višak nevidljiv (ništa se tamo ne crta).
 *
 * ZAŠTO POZORNICA UOPĆE POSTOJI. <svg> reže sadržaj na svom viewBoxu, a čestice
 * lete izvan njega. Kada bi se samo pustilo da izlaze, pojavila se traka za
 * pomicanje jer tijelo stranice širi sadržaj. Zato pozornica ima ODNOS STRANICA
 * putanje animacije (559.52 / 231.44) i reže sve izvan sebe: ništa se ne
 * odsijeca, ali ništa ni ne izlazi iz stranice.
 *
 * Njezina veličina je i dalje vezana na viewport — `min(100 %, visina ×
 * 2.41756)` — a ne na logo. To je namjerno: pozornica je ta koja daje
 * referencu `--da-logo-w`, pa se pri promjeni veličine loga stranica ne
 * pomiče, nego se animacija skalira unutar iste kutije.
 *
 * ZAŠTO `width` IDE NA POZORNICU, A NE NA RODITELJA. Prva verzija je imala
 * `width: min(100%, …)` na pozornici unutar grid ćelije koja se dimenzionira po
 * sadržaju — pa je postotak bio nerazrješiv i pozornica je ispala 0×0. Sada je
 * širina roditelja odrediva (`width: 100%`), pa postotak ima od čega krenuti.
 *
 * Bez JS-a: ovo je logo u miru, u sredini pozornice.
 */

.da-hero {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	padding: clamp(1rem, 4vw, 3rem);
	display: grid;
	place-items: center;
	background: #fbfaf8;
}

/*
 * Naslov nosi logo; tipografski ga ne treba. `width: 100%` je ono što čini
 * širinu roditelja odredivom — bez toga se pozornica dimenzionira po sadržaju
 * koji i sam zavisi od nje.
 *
 * `position: relative` je zbog natpisa: njegova je visina jednaka visini
 * pozornice (jedini je sadržaj naslova), pa se natpis može vezati na istu
 * mjeru po kojoj je vezan i logo.
 */
.da-hero__naslov {
	/*
	 * Jedini broj koji određuje veličinu loga, i jedina izvedenica iz njega.
	 * Ovdje su, a ne na logu, jer ih čitaju dva elementa (logo i natpis) i jer
	 * se responzivna izmjena svodi na jednu liniju u @media bloku niže.
	 */
	--da-logo-w: 25%;
	--da-logo-h: calc(var(--da-logo-w) * 0.4382409);
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	font-weight: inherit;
	display: flex;
	justify-content: center;
}

.da-pozornica {
	display: block;
	flex: none;
	position: relative;
	width: min(100%, calc((100vh - 2 * clamp(1rem, 4vw, 3rem)) * 2.41756));
	width: min(100%, calc((100svh - 2 * clamp(1rem, 4vw, 3rem)) * 2.41756));
	aspect-ratio: 559.52 / 231.44;
	overflow: clip;
}

/*
 * Logo stoji u SREDIŠTU pozornice i širok je `--da-logo-w` njezine širine.
 *
 * `left` je `calc(50% − var(--da-logo-w) / 2)` — dakle uvijek točno pola
 * ostatka, pri svakoj vrijednosti varijable. `top` je isto to, samo po visini i
 * s izvedenom `--da-logo-h`.
 *
 * Postoci se ovdje rješavaju po visini POZORNICE (ona je najbliži pozicionirani
 * predak), a kod natpisa po visini KUTIJE NASLOVA. Te su dvije visine jednake —
 * pozornica je jedini sadržaj naslova u toku — pa je i rezultat isti.
 *
 * NEMA `transform`. Element se smije pomicati samo postocima: animacija piše
 * `d` po putanjama i oslanja se na to da položaj elemenata nitko drugi ne dira.
 * `translate(-50%, -50%)` bi radio isto, ali uvodi transformaciju u element koji
 * dosad nijednu nije imao.
 */
.da-logo {
	display: block;
	position: absolute;
	left: calc(50% - var(--da-logo-w) / 2);
	top: calc(50% - var(--da-logo-h) / 2);
	width: var(--da-logo-w);
	height: auto;
	/* Bez ovoga bi se let čestica odrezao na rubu viewBoxa. */
	overflow: visible;
}

.da-logo__part {
	fill: #0d1117;
}

/*
 * Natpis „coming soon" — ispod loga.
 *
 * TIPOGRAFIJA. Običan redak: sistemski font u normalnoj težini, malo slovo,
 * kerning 0.02em. Prije je bio 0.22em, što tekst čini etiketom; sada je
 * običan. Sistemski font je i jedini — nijedan webfont se ne učitava, jer
 * bi svaki bio vanjski zahtjev.
 *
 * `text-indent` korekcije više nema: `letter-spacing` pomakne vizualno
 * središte udesno jer dodaje razmak i IZA zadnjeg slova, ali pri 0.02em to je
 * manje od trećine piksela — nekada je pri 0.22em bilo vidljivo.
 *
 * POZICIJA. `top` je 50 % + polovica visine loga + razmak: dakle TOČNO pod
 * donjim rubom loga, pri svakoj veličini pozornice, bez ijednog broja piksela u
 * izračunu razmaka. Visina dolazi iz `--da-logo-h`, koju natpis nasljeđuje od
 * kutije naslova — ista vrijednost koju čita i logo, pa se ne mogu razići.
 *
 * Boja je izvod iz boje loga (#0d1117), ne nova nijansa u paleti. Ovo je
 * ujedno boja koju vidi `prefers-reduced-motion: reduce`.
 *
 * ZAŠTO JE UNUTAR <h1>: vidi front-page.php.
 */
.da-hero__najava {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + var(--da-logo-h) / 2 + 1.25rem);
	/*
	 * `fit-content` + `margin-inline: auto` — kutija se skupi na širinu teksta i
	 * centrira se u prostoru od 0 do 100 %.
	 *
	 * To nije kozmetika: gradijent se računa po KUTIJI, pa bi uz `left: 0;
	 * right: 0` bio širok koliko i cijela pozornica, a tekst je u sredini i
	 * zauzima četvrtinu — svjetlo bi prešlo preko pozornice, a preko teksta
	 * samo na trenutak, i to tim kraće što je ekran širi. Ovako je kutija
	 * jednaka tekstu, pa je i prelaz uvijek isti bez obzira na veličinu.
	 */
	width: fit-content;
	margin-inline: auto;
	display: block;
	text-align: center;
	font-size: clamp(0.8125rem, 2.1vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: rgb(13 17 23 / 0.42);
}

/*
 * ── Efekt učitavanja ───────────────────────────────────────────────────────
 * Pojas svjetla koji prelazi preko teksta — ono što danas nose sučelja koja
 * „razmišljaju". Osnova je mutna, kroz nju prođe svjetlija traka, pa tekst
 * izgleda kao da se puni, a ne kao da treperi.
 *
 * ZAŠTO CSS, A NE GSAP. `logo-anim.js` ima jedan timeline i jednu stvar koju
 * animira (`d` po putanjama). Ovo je ukras na tekstu: traje beskonačno, ne
 * ovisi ni o čemu iz tog timelinea, i radi čak i kad JavaScript ne dođe — isto
 * pravilo po kojem je logo u miru vidljiv bez JS-a. Zato ostaje u CSS-u i
 * modul se ne dira.
 *
 * OBA KRAJA CIKLUSA SU ISTO STANJE. Gradijent je 2.5× širi od teksta, a
 * svjetlo stoji u njegovoj sredini, pa je i na `100%` i na `0%` izvan teksta —
 * petlja se spaja bez skoka. Ista logika po kojoj je i animacija loga prazna na
 * oba kraja.
 *
 * SMJER. `background-position` pomiče SLIKU, a ne okvir, pa pozicija od 100 %
 * do 0 % vuče svjetlo slijeva nadesno. Obrnuto bi izgledalo kao greška.
 *
 * `@supports` nije ukras: bez `background-clip: text` bi `color: transparent`
 * ostavio tekst nevidljivim. Tko jedno ne podržava, dobiva drugo — običan
 * obojeni tekst, koji je i ovako čitljiv.
 */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	@media (prefers-reduced-motion: no-preference) {
		.da-hero__najava {
			background-image: linear-gradient(
				90deg,
				rgb(13 17 23 / 0.42) 0%,
				rgb(13 17 23 / 0.42) 42%,
				rgb(13 17 23 / 0.95) 50%,
				rgb(13 17 23 / 0.42) 58%,
				rgb(13 17 23 / 0.42) 100%
			);
			background-size: 250% 100%;
			background-repeat: no-repeat;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			animation: da-najava-sweep 3.2s ease-in-out infinite;
		}
	}
}

/*
 * Prvih 55 % ciklusa je čekanje: traka stoji izvan teksta i tekst je
 * jednolično mutan. Ostatak je jedan prelaz. Time „loading" ima puls, a ne
 * vrti se bez prestanka.
 */
@keyframes da-najava-sweep {
	0%,
	55% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

/*
 * Uzak ekran: pozornica je vezana na širinu, pa pri 25 % logo ispadne mali
 * (~86 px na 375 px viewportu). Ispod 600 px se poveća na 45 % — oko 154 px na
 * istoj širini.
 *
 * Mijenja se SAMO `--da-logo-w`. Logo i natpis se pomiču zajedno, jer oba
 * čitaju izvedenu `--da-logo-h`.
 */
@media (max-width: 600px) {
	.da-hero__naslov {
		--da-logo-w: 45%;
	}
}

/*
 * Smanjeno kretanje: modul tada ne gradi timeline, a ako JavaScript ne radi
 * uopće, logo mora biti vidljiv i točan. Ovdje je već takav — ništa se ne
 * skriva — pa nema što poništavati.
 */