/**
 * Görgetéses beúszás.
 *
 * A FÁJL EGYETLEN FONTOS TULAJDONSÁGA: alapállapotban NEM rejt el semmit.
 * Minden szabály a `html.sfa-anim-kesz` alá van zárva, ezt az osztályt pedig
 * kizárólag a JavaScript teszi ki. Ha a szkript nem fut le – hiba, lassú
 * kapcsolat, kikapcsolt JS –, a látogató kész oldalt lát, nem üres dobozokat.
 * Ez a leggyakoribb hiba a beúszós animációknál, és a legdrágább is.
 *
 * A mozgás csak `opacity` és `transform`. Ezeket a böngésző a videokártyán
 * rajzolja, nem indít újratördelést, tehát a görgetés nem akad meg tőle.
 *
 * Az elmozdulás iránya NEGATÍV X (balról jobbra érkezik). Ez szándékos: a
 * pozitív irány a jobb oldalon átmenetileg kilógna, és vízszintes görgetést
 * okozna – pont azt, amit a múlt héten javítottunk.
 */

html.sfa-anim-kesz .sfa-anim {
	opacity: 0;
	transform: translate3d(-28px, 0, 0);
	transition:
		opacity .5s ease,
		transform .58s cubic-bezier(.22, .68, .28, 1);

	/* A sorszámot a JS írja be; ettől úsznak be egymás után, nem egyszerre. */
	transition-delay: calc(var(--sfa-anim-i, 0) * 80ms);

	/* Előre szólunk a böngészőnek, mit fogunk mozgatni. */
	will-change: opacity, transform;
}

/* Szekciócímek, képek, záró sávok: alulról érkeznek, lépcsőzés nélkül. */
html.sfa-anim-kesz .sfa-anim.sfa-anim--alul {
	transform: translate3d(0, 22px, 0);
}

/*
 * Csak halványodik, nem mozdul.
 *
 * A ragadós (`position: sticky`) oldalsávnak ez az egyetlen biztonságos mód:
 * a `transform` új koordinátarendszert hoz létre, és attól a ragadás
 * elromlik – a panel görgetés közben elcsúszna vagy megállna.
 */
html.sfa-anim-kesz .sfa-anim.sfa-anim--halvany {
	transform: none;
}

html.sfa-anim-kesz .sfa-anim.sfa-lathato {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * A számsáv számai nem úsznak be külön – az egész hasáb mozog –, viszont a
 * számlálás alatt ne törjön más sorba a szöveg.
 */
html.sfa-anim-kesz .sfa-szam {
	font-variant-numeric: tabular-nums;
}

/*
 * Biztonsági háló. A szkript már eleve kilép mozgáscsökkentett módban, de ha
 * a beállítás menet közben változik, ez azonnal kész állapotba tesz mindent.
 */
@media (prefers-reduced-motion: reduce) {

	html.sfa-anim-kesz .sfa-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* -------------------------------------------------------------------------
 * LOTTIE
 *
 * A lejátszó és az animáció adatai is csak akkor töltődnek be, amikor a blokk
 * a nézetbe ér – a lapbetöltést tehát nem terhelik.
 *
 * A `aspect-ratio` azért kell, hogy a hely már a betöltés előtt megmaradjon.
 * Enélkül a kész animáció megjelenésekor arrébb ugrana az alatta lévő
 * tartalom (ez a Google „elrendezés-elmozdulás" mérőszáma).
 * ---------------------------------------------------------------------- */

.sfa-lottie {
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	max-width: 100%;
	width: 100%;
}

.sfa-lottie svg {
	display: block;
	height: 100% !important;
	width: 100% !important;
}

/*
 * Amíg nincs betöltve, egy halvány márkakék felület áll a helyén – nem üres
 * lyuk, de nem is villogó tölteléktartalom.
 */
.sfa-lottie:not(.sfa-lottie--kesz) {
	background: linear-gradient(180deg, #F6F8FC 0%, #EEF2F8 100%);
	border-radius: 14px;
}


/* -------------------------------------------------------------------------
 * LÁGY GÖRGETÉS
 *
 * MIÉRT A BÖNGÉSZŐ SAJÁTJA, ÉS MIÉRT NEM JAVASCRIPT.
 *
 * Van egy népszerű megoldáscsalád (Lenis, Locomotive és társaik), ami átveszi
 * a görgetést a böngészőtől, és lendületes, „vajas" mozgást ad. Látványos –
 * és három dolgot elront:
 *
 *   – az egérgörgő és a tapipad tehetetlensége duplázódik, ettől lesz sok
 *     gépen úszós, csúszkálós érzés;
 *   – a billentyűzetes navigáció (Tab, Page Down, Home/End) és a
 *     képernyőolvasók fókuszkövetése összeakad vele;
 *   – mobilon a rendszer saját görgetése fölé rétegződik, és onnantól nem az
 *     történik, amit az ujj mozgása alapján a felhasználó vár.
 *
 * A böngésző beépített lágy görgetése ezzel szemben csak a UGRÁSOKAT simítja
 * el – a menüpontokra, a horgonyokra, a „vissza a tetejére" gombra kattintva
 * végigúszik a lap ahelyett, hogy odarántana. A kézi görgetés marad natív,
 * tehát pontosan úgy viselkedik, ahogy a gépen megszokott.
 *
 * Mozgáscsökkentett módban nem kapcsol be.
 * ---------------------------------------------------------------------- */

html {
	/*
	 * A ragadós fejléc magassága. Enélkül a horgonyra ugrás a fejléc ALÁ
	 * pozicionálná a célt, és a szakasz címe eltűnne alatta.
	 */
	scroll-padding-top: var(--sfa-gorgetes-eltolas, 104px);
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

/*
 * Ugyanez a tartalék azoknak az elemeknek, amikre közvetlenül ugrunk.
 * A `scroll-padding` a görgetődobozra vonatkozik, a `scroll-margin` magára a
 * célra – a kettő együtt fedi le a fül- és horgonyváltásokat is.
 */
:target,
[id]:target {
	scroll-margin-top: var(--sfa-gorgetes-eltolas, 104px);
}

@media (max-width: 1024px) {

	html {
		--sfa-gorgetes-eltolas: 84px;
	}
}