/*
 * transitions.css — oldalbetöltés és oldalak közötti váltás.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * MIÉRT MARADHAT BEKAPCSOLVA CSÖKKENTETT MOZGÁS MELLETT IS
 *
 * A `prefers-reduced-motion` nem azt jelenti, hogy „semmi ne animálódjon”.
 * A beállítást vesztibuláris (egyensúlyszervi) panaszokkal élők kapcsolják be,
 * és azt a fajta mozgást hivatott kiszűrni, ami szédülést vagy hányingert vált
 * ki: parallax, csúszás, nagyítás, forgás, nagy felületek elmozdulása.
 *
 * Az ÁTTŰNÉS nem ilyen. Egy tisztán átlátszóságot változtató átmenetnek nincs
 * mozgásvektora — épp ezért a W3C és az MDN útmutatói is a keresztirányú
 * áttűnést AJÁNLJÁK helyettesítésként, amikor a mozgást csökkenteni kell.
 *
 * Ezért itt a határvonal nem az, hogy „animáció van vagy nincs”, hanem hogy
 * MOZOG-E VALAMI:
 *
 *   • oldalváltás áttűnése — csak `opacity`, elmozdulás nélkül  → MARAD
 *   • a mobil panel becsúszása (`translateX`) — ez valódi mozgás → CSÖKKENTVE
 *
 * Így teljesül a kérés (a betöltés csökkentett mozgás mellett is kifinomult),
 * anélkül hogy elvennénk azt, amitől a beállítás védeni hivatott.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * AZ ENERGIATAKARÉKOS MÓDRÓL
 *
 * Erre nincs CSS-kapcsoló, és nem is állítja le a CSS-átmeneteket: a böngészők
 * energiatakarékos módja a videó-automatalejátszást és a háttérfülek
 * képfrissítését fogja vissza, illetve alacsonyabb képfrissítést engedhet.
 * Nincs tehát mit „felülírni”. Amit tehetünk, az az, hogy az átmenet olyan
 * olcsó legyen, hogy alacsonyabb képfrissítésen se szakadozzon: az `opacity`
 * kizárólag a kompozitoron fut — nincs újraszámolt elrendezés, nincs újrafestés.
 * Ezért nincs ebben a fájlban egyetlen `width`, `height`, `top` vagy `margin`
 * animáció sem.
 */

/*
 * A fehér villanás megelőzése.
 *
 * A háttérszín a `html`-en van, nem csak a `body`-n: navigáció közben van egy
 * pillanat, amikor a böngésző már az új dokumentumot festi, de a `body`
 * stílusai még nem hatnak. Ha a hátteret csak a `body` hordozná, ez a pillanat
 * a böngésző alapértelmezett fehérjét villantaná fel — sötét témát használó
 * eszközön pedig akár szürkét.
 */
html {
	background-color: var(--br-white);
}

/* ── Dokumentumok közötti áttűnés ───────────────────────────────────────
 *
 * A View Transitions API veszi át a munkát: a böngésző pillanatképet készít a
 * régi oldalról, megvárja az újat, és áttűnteti a kettőt. Nincs hozzá JavaScript,
 * és nincsenek a kézzel írt megoldás veszélyei sem — nem lehet félbehagyott
 * elhalványított állapotot visszatölteni a vissza gombbal (bfcache), és nem
 * marad üres a lap, ha egy szkript elszáll.
 *
 * Ahol nincs támogatás (jelenleg a Firefox), ott a navigáció a megszokott
 * módon fut le — nem törik el semmi, csak nincs áttűnés. Az alábbi
 * `@supports` blokk erre az esetre ad lágy megjelenést.
 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	/*
	 * 260 ms: elég ahhoz, hogy szándéknak látsszon, és elég rövid ahhoz, hogy
	 * ne lassítsa a használatot.
	 *
	 * ── MIÉRT `linear`, ÉS MIÉRT NEM AZ OLDAL GÖRBÉJE ───────────────────
	 *
	 * Itt korábban az Elementor menü-görbéje állt. Az egy keresztirányú
	 * áttűnésen a lehető legrosszabb választás: a profilja a harmadánál
	 * felszökik, tehát a régi lap egy pillanat alatt eltűnik, az új pedig
	 * ugyanabban a pillanatban ugrik elő — a szem ezt villanásként látja,
	 * nem áttűnésként. Ez volt a „villogós” betöltés.
	 *
	 * A keresztirányú áttűnésnek nem is kell görbe. A View Transitions
	 * alapértelmezése a két pillanatképen `mix-blend-mode: plus-lighter`, a
	 * páron pedig `isolation: isolate` — ilyen keverés mellett a két
	 * áttetszőség ÖSSZEGE pontosan akkor állandó, ha mindkettő EGYENESEN fut.
	 * Bármilyen görbével az összeg menet közben 1 alá esik, és épp ott
	 * jelenik meg a szürkés lyuk, amit a görbével „javítani” próbáltunk.
	 *
	 * (Az előző változat kommentje azt írta, hogy a régi lap „kicsivel
	 * hamarabb” tűnik el — ez nem volt igaz: mindkét animáció késleltetés
	 * nélkül, azonos hosszan futott. A `plus-lighter` mellett nincs is rá
	 * szükség, ezért nem a késleltetést építem be, hanem a hibás állítást
	 * veszem ki.)
	 */
	animation-duration: 260ms;
	animation-timing-function: linear;
}

::view-transition-old(root) {
	animation-name: br-lap-el;
}

::view-transition-new(root) {
	animation-name: br-lap-be;
}

@keyframes br-lap-el {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes br-lap-be {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Tartalék: első festés lágy megjelenése ─────────────────────────────
 *
 * Csak ott fut, ahol a View Transitions nem elérhető. Rövid és kizárólag
 * átlátszóság — hosszabb idővel az oldal lomhának hatna, és a legnagyobb
 * tartalmi elem megjelenése (LCP) is mérhetően romlana.
 */
@supports not (view-transition-name: none) {
	body {
		/*
		 * SZÁNDÉKOSAN nincs `fill-mode: both`.
		 *
		 * A `both` visszafelé is kitöltene, azaz az animáció indulása előtt (és
		 * bármilyen megakadás esetén) a `from` állapot érvényesülne — vagyis
		 * `opacity: 0`. Ha az animáció bármiért nem fut le, az oldal ÜRESEN
		 * maradna. Kitöltés nélkül a legrosszabb eset az, hogy nincs áttűnés:
		 * a body a saját, teljesen látható értékén marad.
		 */
		/*
		 * Itt NEM `linear`: ez nem keresztirányú áttűnés, hanem egyetlen felület
		 * megjelenése, tehát a belépő görbe jár neki — elöl esik nagyot, a lap
		 * hamar olvashatóvá válik, és a maradék csak leül.
		 */
		animation: br-lap-be 200ms var(--br-gorbe-be);
	}
}

/* ── Csökkentett mozgás ─────────────────────────────────────────────────
 *
 * A base.css általános szabálya minden animációt 0,01 ms-ra vág. Ez a
 * MOZGÁSRA helyes, az áttűnésre viszont nem — a fenti indoklás szerint.
 * Itt ezért kifejezetten visszaadjuk az oldalváltás áttűnését.
 *
 * A `!important` azért kell, mert a base.css blokkja is azzal dolgozik; a
 * fajsúly önmagában nem vinné el.
 */
/*
 * A csökkentett mozgás melletti kivétel-blokk INNEN ELTŰNT, mert feleslegessé
 * vált: a base.css már nem fojtja el az átmeneteket, tehát nincs mit
 * visszaadni. A fenti indoklás (miért helyes az áttűnést megtartani) továbbra
 * is érvényes — csak most már az egész oldalra, nem csak erre a fájlra.
 */