/**
 * Razdvojeni naziv u zaglavlju.
 *
 * Dvije stvari koje nisu ocite:
 *
 * 1. Sloj s natpisom NE stoji u zaglavlju. Zaglavlje je mix-blend-mode:
 *    difference, a taj blend se ne da iskljuciti djetetu - cijelo se zaglavlje
 *    crta kao jedna grupa. Natpis bi se u njemu izokrenuo: crna majica preko
 *    krem podloge ispala bi krem, a crveni neon cijan. Zato sloj visi na body-ju
 *    i samo prati procjep.
 *
 * 2. Procjep je prazan raspon unutar naziva. On razmice slova; sam ne pokazuje
 *    nista. Tako tipografija ostaje netaknuta - naziv je i dalje jedan redak
 *    teksta s razmakom u sredini.
 */

:root {
	/*
	 * Visina natpisa, u odnosu na velicinu slova naziva. Na 2.3 je natpis
	 * dvostruko visi od samog naziva, pa mu gornji rub izlazi iznad retka;
	 * sloj se zato po potrebi spusta da ostane cijeli u kadru.
	 */
	--phs-size: 2.3;

	/* Koliko natpis najmanje smije biti udaljen od gornjeg ruba prozora. */
	--phs-min-top: 6px;

	/* Omjer natpisa (sirina/visina). Sve tri slike su 320x296. */
	--phs-ratio: 1.081;
}

/*
 * ".hr" se od sada otvara iz GSAP-a, jer mora zavrsiti prije nego procjep
 * krene. Zaglavlje ga otvara na :hover vlastitom tranzicijom, pa se ta pravila
 * ovdje gase - inace bi se dvije animacije natezale oko istog max-widtha.
 * Inline vrijednosti koje GSAP upisuje nadjacaju ovo bez !important.
 */
.sc-site-header__brand[data-phs] .sc-site-header__tld,
.sc-site-header__brand[data-phs]:hover .sc-site-header__tld,
.sc-site-header__brand[data-phs]:focus-visible .sc-site-header__tld {
	max-width: 0;
	opacity: 0;
	transition: none;
}

/*
 * Na vrlo uskim zaslonima naziv s dvostrukim procjepom vise ne stane u redak -
 * a naziv je nowrap, pa bi presao rub. Ondje se natpis malo smanji.
 */
@media (max-width: 380px) {
	:root {
		--phs-size: 1.7;
	}
}

/* Polovice naziva. Bez ovoga bi razmak razbio letter-spacing na spoju. */
.phs-half {
	white-space: nowrap;
}

/*
 * Procjep. Visina je otprilike verzalna visina slova, da mu se sredina poklopi
 * sa sredinom teksta; sirina se animira i to je jedino sto efekt doista mijenja
 * u rasporedu.
 */
.phs-gap {
	display: inline-block;
	width: 0;
	height: .72em;
	vertical-align: baseline;
	pointer-events: none;
}

/* Sloj s natpisima: prati procjep, ne prima klikove, ne blenda se. */
.phs-layer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.phs-layer.is-live {
	visibility: visible;
}

/* Ovaj sloj skalira GSAP; vanjski nosi polozaj, da si transformi ne smetaju. */
.phs-layer__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.phs-layer__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
}

/*
 * Tko je iskljucio animacije, dobiva naziv kakav je i bio: bez procjepa i bez
 * natpisa. Efekt je ukras, nema sto nositi sadrzaj.
 */
@media (prefers-reduced-motion: reduce) {
	.phs-layer {
		display: none;
	}

	.phs-gap {
		width: 0 !important;
	}
}