/*
 * Kurs Hero - stil "Dvostruka ekspozicija".
 *
 * Slojeve gradi kurs-hero-dx.js unutar Hero root kontejnera; urednik ne
 * slaze nikakve kontejnere rucno.
 *
 * DVIJE ODLUKE KOJE IZGLEDAJU CUDNO DOK SE NE OBJASNE:
 *
 * 1. Pozadina postoji u DVIJE kopije (--night i --day) sa STATICKIM
 *    filterima, a animira se samo opacity izmedju njih. Animirani filter je
 *    najskuplja stvar koja se u CSS-u moze traziti - na slabijem mobitelu
 *    se vidi kao trzanje. Ovako je promjena ekspozicije obican cross-fade,
 *    dakle posao za GPU.
 *
 * 2. Prednja slika postoji u CETIRI kopije, svaka sa svojom STATICKOM
 *    maskom. Alternativa bi bila jedan sloj kojem se po kadru prepisuje
 *    mask-image s tri gradijenta - to znaci ponovnu izradu maske na svakoj
 *    slicici. Ovako se animira samo opacity, a maska se dira jedino pri
 *    promjeni velicine prozora.
 */

.kurs-hero-dx-host {
	position: relative;
}

/* Elementorov sadrzaj (tekst, gumbi) mora ostati IZNAD slojeva. */
.kurs-hero-dx-host > .e-con-inner,
.kurs-hero-dx-host > .elementor-container,
.kurs-hero-dx-host > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

.kurs-hero-dx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #000;
}

/*
 * isolate drzi mix-blend-mode unutar ove skupine - bez toga bi se prednja
 * slika mijesala sa svime iza sekcije (pozadina stranice, susjedne sekcije).
 */
.kurs-hero-dx__stage {
	position: absolute;
	inset: 0;
	isolation: isolate;
	opacity: 0;
}

.kurs-hero-dx__back {
	position: absolute;
	inset: 0;
	background-image: var( --dx-back );
	background-size: cover;
	background-position: 50% var( --dx-back-pos, 50% );
	background-repeat: no-repeat;
	transform-origin: 50% var( --dx-back-pos, 50% );
}

.kurs-hero-dx__back--night {
	filter: var( --dx-night-filter );
	opacity: 1;
}

.kurs-hero-dx__back--day {
	filter: var( --dx-day-filter );
	opacity: 0;
}

/*
 * Omotac u kojem zive sunce i odsjaj.
 *
 * Nosi DVIJE stvari koje su prije stajale na samom suncu:
 *
 * 1. Masku neba. Slika maske je neprozirna iznad grebena, a prozirna
 *    ispod njega, i crta se s istim mask-size/mask-position kakve ima i
 *    sama fotografija - zato se greben poklapa sam od sebe, bez ijedne
 *    rucno upisane vrijednosti. Sunce koje se krece unutar omotaca time
 *    izlazi IZA grada i planine.
 *
 * 2. Miksanje. Maskirani element stvara vlastiti kontekst slaganja i
 *    izolira mix-blend-mode svoje djece - da je screen ostao na suncu,
 *    ono bi se mijesalo s praznim omotacem umjesto s fotografijom ispod,
 *    pa bi odsjaj postao plosna narancasta mrlja.
 *
 * transform-origin mora biti isti kao na pozadinskim slojevima: omotac
 * ulazi u isti naezd, pa bi svako drugo ishodiste pomaknulo masku u
 * odnosu na greben dok naezd traje.
 */
.kurs-hero-dx__sky {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	transform-origin: 50% var( --dx-back-pos, 50% );
}

.kurs-hero-dx--sky .kurs-hero-dx__sky {
	-webkit-mask-image: var( --dx-sky-mask );
	mask-image: var( --dx-sky-mask );
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: 50% var( --dx-back-pos, 50% );
	mask-position: 50% var( --dx-back-pos, 50% );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.kurs-hero-dx__sun,
.kurs-hero-dx__glow {
	position: absolute;
	left: var( --dx-sun-x, 50% );
	top: var( --dx-sun-y, 45% );
	transform: translate( -50%, -50% );
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.kurs-hero-dx__sun {
	width: var( --dx-sun-size, 9% );
	aspect-ratio: 1;
	background: radial-gradient(
		circle,
		var( --dx-sun-color, #ffd9a0 ) 0%,
		var( --dx-sun-color, #ffd9a0 ) 42%,
		rgba( 255, 255, 255, 0 ) 72%
	);
}

.kurs-hero-dx__glow {
	width: var( --dx-glow-size, 55% );
	aspect-ratio: 1;
	background: radial-gradient(
		circle,
		var( --dx-glow-color, rgba( 255, 176, 92, 0.55 ) ) 0%,
		rgba( 255, 176, 92, 0 ) 68%
	);
}

/*
 * Maska ide na omotac, slika na unutarnji element. Da su na istom elementu,
 * svaki transform slike (blagi zoom pri otkrivanju) pomicao bi i masku.
 */
.kurs-hero-dx__front {
	position: absolute;
	inset: 0;
	opacity: 0;
	mix-blend-mode: var( --dx-blend, screen );
}

.kurs-hero-dx__front > i {
	display: block;
	position: absolute;
	inset: 0;
	background-image: var( --dx-front );
	background-size: cover;
	background-position: 50% var( --dx-front-pos, 50% );
	background-repeat: no-repeat;
	filter: var( --dx-front-filter );
	transform-origin: 50% 50%;
}

/*
 * Mobilni prikaz cijele prednje slike.
 *
 * Izrez (cover) na uskom portret kadru ostavlja samo sredinu fotografije -
 * od skupine ljudi ostane jedna osoba. Ovdje se cijela slika umanji u pojas
 * zadane sirine i postavi na zadanu visinu. Prostor oko pojasa ostaje
 * prazan, a ne rastegnut: miksanje nad prozirnim pikselima nema ucinka, pa
 * se ondje pozadinska fotografija vidi netaknuta.
 */
.kurs-hero-dx--mobfit .kurs-hero-dx__front > i {
	background-size: var( --dx-front-size, 92% ) auto;
	background-position: 50% var( --dx-front-pos-mob, 38% );
}

.kurs-hero-dx__skip {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 3;
	pointer-events: auto;
	opacity: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba( 255, 255, 255, 0.55 );
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.35 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	color: #fff;
	font: 500 13px/1 inherit;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: opacity 0.35s ease, background 0.2s ease, border-color 0.2s ease;
}

/*
 * Gumb se pojavljuje CSS prijelazom, ne GSAP tweenom. Razlog nije stil nego
 * sigurnost: ako preglednik ne pokrece requestAnimationFrame (kartica u
 * pozadini, stedni nacin), GSAP stoji - a upravo tada je izlaz iz animacije
 * najpotrebniji. CSS prijelaz radi neovisno o tome.
 */
.kurs-hero-dx__skip.is-visible {
	opacity: 1;
}

.kurs-hero-dx__skip:hover,
.kurs-hero-dx__skip:focus-visible {
	background: rgba( 0, 0, 0, 0.55 );
	border-color: #fff;
}

.kurs-hero-dx__skip[hidden] {
	display: none !important;
}

/* Zakljucan skrol dok animacija traje. */
html.kurs-hero-dx-locked,
html.kurs-hero-dx-locked body {
	overflow: hidden !important;
	touch-action: none;
}

/*
 * Ako korisnik trazi manje pokreta, JS uopce ne pokrece animaciju nego
 * odmah postavlja zavrsni kadar. Ovo je samo pojas i naramenice za slucaj
 * da JS iz bilo kojeg razloga ne stigne do izvrsavanja.
 */
@media ( prefers-reduced-motion: reduce ) {
	.kurs-hero-dx__stage {
		opacity: 1;
	}

	.kurs-hero-dx__back--day {
		opacity: 1;
	}

	.kurs-hero-dx__sun,
	.kurs-hero-dx__glow {
		opacity: 1;
	}

	.kurs-hero-dx__front--final {
		opacity: var( --dx-final-opacity, 0.35 );
	}

	.kurs-hero-dx__skip {
		display: none;
	}

	html.kurs-hero-dx-locked,
	html.kurs-hero-dx-locked body {
		overflow: auto !important;
		touch-action: auto;
	}
}

/*
 * Meki tamni preljev preko slike, umjesto neprozirne kartice iza teksta.
 * Ide IZNAD svih slojeva, ali ispod Elementorovog sadrzaja - zato je to
 * pseudoelement korijena, a ne jos jedan sloj u sceni: sloj u sceni bi
 * ulazio u mix-blend-mode skupinu i mijesao se s prednjom slikom.
 */
.kurs-hero-dx--scrim::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	/*
	 * Elipsa oko sredista, a ne kosi preljev: tekstualni okvir je najcesce
	 * centriran, pa preljev vezan uz jedan rub ne bi pao ondje gdje tekst
	 * stvarno stoji.
	 */
	background: radial-gradient(
		ellipse 62% 48% at 50% 42%,
		rgba( 12, 10, 8, var( --dx-scrim, 0.55 ) ) 0%,
		rgba( 12, 10, 8, calc( var( --dx-scrim, 0.55 ) * 0.55 ) ) 52%,
		rgba( 12, 10, 8, 0 ) 84%
	);
}

/*
 * NEMA will-change ni na jednom sloju - namjerno.
 *
 * Prva verzija ga je imala na svih osam slojeva. Na tabletu (Galaxy Tab S7+,
 * 2800x1752 fizickih piksela) to znaci osam promoviranih tekstura od po ~19 MB,
 * dakle oko 150 MB GPU memorije samo za hero. Kompozitor pocne izbacivati i
 * ponovno rasterizirati teksture, sto se vidi kao trzanje. Preglednik ionako
 * sam promovira sloj koji se animira; will-change ovdje nije stedio prvi
 * kadar nego trosio memoriju cijelo vrijeme.
 *
 * Iznimka su dva pozadinska sloja koja se cijelo vrijeme skaliraju - njima
 * will-change postavlja JS dok animacija traje i skida ga na kraju.
 */