/*
 * Avalehe hero roteeruv alapealkiri — virnastus, ristihäive ja karusselli
 * punktid. Sõnumid tulevad andmebaasist (ACF plokk acf/srini-page-header,
 * väli Text, üks rida = üks sõnum), tükeldamise, vahetamise ja punktide
 * ehitamise teeb assets/js/homepage-hero-rotator.js.
 *
 * Parent source: srini/assets/css/app.css
 * Original target: .c-hero__text (text-align:center, max-width:20em,
 *                  line-height:1.4, text-wrap:pretty)
 * Reason: sõnumid tuleb laduda ühte ja samasse ruumi, et konteineri kõrgus
 *         oleks pikima sõnumi järgi ega hüppaks vahetuse ajal; punktid
 *         näitavad, et sõnumeid on mitu.
 *
 * Värve ei kõvakodeeri: punktid kasutavad currentColor'i, mille .c-hero__text
 * saab juba var(--heroTextColor)'ist. Nii ei lagune miski, kui hero taust või
 * teema värvid muutuvad.
 */

/*
 * Enne kui JS read span'ideks tükeldab, oleks kogu nelik korraga näha.
 * Peidame teksti AINULT siis, kui JS on tõestatult olemas (wp_head'i
 * märgiskript lisab .has-heroRotatorJs) — JS-ita brauseris jääb tekst
 * tavaliseks mitmerealiseks plokiks.
 *
 * Failsafe: kui JS-fail ise kohale ei jõua (404, blokeerija), teeb
 * animatsioon teksti 1,5 s pärast ikkagi nähtavaks.
 */
.has-heroRotatorJs .c-hero__text {
	opacity: 0;
	animation: c-heroRotator-failsafe 0s linear 1.5s forwards;
}

.has-heroRotatorJs.is-heroRotatorReady .c-hero__text {
	opacity: 1;
	animation: none;
}

@keyframes c-heroRotator-failsafe {
	to { opacity: 1; }
}

.c-heroRotator {
	display: flex;
	flex-direction: column;
	align-items: center;
	--heroRotator-interval: 4500ms;
}

.c-heroRotator__viewport {
	display: grid;
	/* Kõik sõnumid samas grid-alas -> kõrgus = pikim sõnum, hüpet ei teki. */
	grid-template-areas: 'tagline';
	align-items: start;
	justify-items: center;
	width: 100%;
}

.c-heroRotator__item {
	grid-area: tagline;
	opacity: 0;
	transform: translateY(0.3em);
	/* Pärib .c-hero__text tüpograafia ja joonduse; oma ei lisa. */
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

/*
 * Sisenev sõnum ootab, kuni lahkuv on ära kadunud. Ilma viiteta on 0,3 s
 * jooksul kaks lauset korraga poolläbipaistvalt üksteise peal — kattuv tekst
 * on loetamatu (nähtud live'is). Lahkuv häivub kohe, sisenev tuleb 0,22 s
 * hiljem, seega ristumist praktiliselt ei ole.
 */
.c-heroRotator__item.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0.22s;
}

/* --- Karusselli punktid ------------------------------------------------- */

.c-heroRotator__dots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

/* --- Hero vertikaalne rütm avalehel ------------------------------------- */

/*
 * Punktid tõid hero teksti ploki kõrgemaks ja lükkasid nupud kaugemale.
 * Ruum võetakse alt ja antakse ülespoole; kogukõrgus jääb praktiliselt samaks.
 *
 * Parent source: srini/assets/css/app.css
 * Original target: .c-hero__imageFeatureContainer { margin-bottom: -3em }
 * Reason: AI-pilt on scroll-parallax (srini/assets/scripts/animations.js:211,
 *         gsap.fromTo y: 0 -> negatiivne), seega lehe avanemisel on ta oma
 *         KÕIGE ALUMISES asendis ja jookseb alapealkirjale peale. Vanema -3em
 *         tõmbab sisu pildi alla; leevendame tõmmet, et algasendis jääks õhku.
 */
.c-hero--featured .c-hero__imageFeatureContainer {
	margin-bottom: -1.25em;
}

/*
 * Parent source: srini/assets/css/app.css
 * Original target: .c-hero__tools { margin-top: 3rem }
 * Reason: punktid peavad jääma nuppudele lähemale (kasutaja soov 19.08.2026),
 *         ja see vabastab ruumi, mille ülal pildile andsime.
 */
.c-hero--featured .c-hero__tools {
	margin-top: 1.5rem;
}

.c-heroRotator__dot {
	appearance: none;
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.25;
	cursor: pointer;
	transition: width 0.35s ease, opacity 0.25s ease;
}

/*
 * Nähtav punkt on 8 px, aga puuteala peab olema sõrmega tabatav (WCAG 2.5.8
 * soovitab vähemalt 24 px). Kasvatame klikiala läbipaistva ::before'iga, nii
 * et visuaal jääb peeneks. Alad ei tohi kattuda: gap on 6 px, seega -0.5rem
 * igas suunas annab 24 px kõrguse ja hoiab naabrid puutumata.
 */
.c-heroRotator__dot::before {
	content: '';
	position: absolute;
	inset: -0.5rem -0.1875rem;
}

.c-heroRotator__dot:hover,
.c-heroRotator__dot:focus-visible {
	opacity: 0.55;
}

.c-heroRotator__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Aktiivne punkt venib pilliks: näitab asukohta ka värvi nägemata. */
.c-heroRotator__dot.is-active {
	width: 1.75rem;
	opacity: 0.3;
}

.c-heroRotator__dot.is-active:hover,
.c-heroRotator__dot.is-active:focus-visible {
	opacity: 0.45;
}

/*
 * `opacity` rakendub ka ::after'ile, seega läbipaistvusega ei saa täiteriba
 * rajast tumedam olla — täitumine jääks nähtamatuks. Kus color-mix() olemas,
 * anname igale kihile oma läbipaistvuse ja tõstame punktid nähtavamaks
 * (kasutaja soov: klient peab NÄGEMA, et sõnumeid on neli).
 */
@supports (background: color-mix(in srgb, currentColor 20%, transparent)) {
	.c-heroRotator__dot {
		opacity: 1;
		background: color-mix(in srgb, currentColor 30%, transparent);
	}

	.c-heroRotator__dot:hover,
	.c-heroRotator__dot:focus-visible {
		background: color-mix(in srgb, currentColor 55%, transparent);
	}

	.c-heroRotator__dot.is-active {
		opacity: 1;
		background: color-mix(in srgb, currentColor 22%, transparent);
	}

	.c-heroRotator__dot.is-active::after {
		background: color-mix(in srgb, currentColor 80%, transparent);
	}
}

/*
 * Täituv riba aktiivses punktis = "vahetus on tulekul". Animatsioon algab
 * uuesti iga kord, kui klass .is-active elemendile lisatakse, seega
 * taaskäivitamiseks pole JS-is trikki vaja.
 */
/*
 * Täiteriba animeerib LAIUST, mitte transform: scaleX'i. scaleX surub
 * border-radius'e koos elemendiga kokku, mistõttu riba algas sirgete otstega
 * (kasutaja märkus 19.08.2026). Laiuse animeerimisel jääb raadius terveks ja
 * algasend on täpselt sama ümar ring nagu punkt ise — riba kasvab ringist
 * pilliks. Element on 8 px lai ja üks tükk lehel, seega layout-animatsiooni
 * hind on olematu.
 */
.c-heroRotator__dot.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0.5rem;
	border-radius: 999px;
	background: currentColor;
	animation: c-heroRotator-progress var(--heroRotator-interval) linear forwards;
}

@keyframes c-heroRotator-progress {
	from { width: 0.5rem; }
	to   { width: 100%; }
}

/*
 * Automaatvahetus välja lülitatud (vahetusaeg 0): täituv riba peidetakse, sest
 * see lubaks vahetust, mida ei tule. Aktiivne punkt jääb pilliks.
 */
.c-heroRotator.is-manual .c-heroRotator__dot.is-active::after {
	animation: none;
	width: 100%;
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * JS ei roteeri sel juhul üldse: kaotame libiseva ülemineku ja täituva
	 * riba, aga punktid jäävad, nii et sõnumid on käsitsi läbi vaadatavad.
	 */
	.c-heroRotator__item {
		transition: none;
		transform: none;
	}
	.c-heroRotator__dot {
		transition: none;
	}
	.c-heroRotator__dot.is-active {
		opacity: 0.85;
	}
	.c-heroRotator__item.is-active {
		transition-delay: 0s;
	}
	.c-heroRotator__dot.is-active::after {
		animation: none;
	}
}