/* =========================================================================
   EFEKTY — vizuálne prvky vytiahnuté priamo z plagátu
   =========================================================================

   Plagát nesie štyri veci, ktoré sa dajú preložiť do webu bez toho, aby
   z toho bola koláž: štvorcípu hviezdu zo zástav, hroty ľadového trónu,
   reťaze a meč zabodnutý pred trónom. Piata je počasie — mrznúci prach
   vo vzduchu.

   Všetko sú ozdoby. Nič z toho nenesie informáciu, takže to celé má
   aria-hidden a pri prefers-reduced-motion sa buď zastaví, alebo zmizne.
   ========================================================================= */

:root {
	--rf-ozdoba: var(--rf-steel-500, #40546F);
	--rf-hroty: url("img/hroty.svg");
	--rf-retaz: url("img/retaz-zvislo.svg");
	--rf-mec: url("img/mec.svg");
}


/* =========================================================================
   MRZNÚCI PRACH
   ========================================================================= */

/* Plátno leží pod obsahom a nad podkladom. Je fixované, takže jedno
   plátno stačí na celú stránku — pri scrollovaní sa neprepočítava
   pozícia, len sa ďalej sype. */
.rf-mraz {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
}


/* =========================================================================
   HROTY ĽADOVÉHO TRÓNU
   ========================================================================= */

/* Horná hrana sekcie ako rad mečov z trónu. Maska, nie obrázok — farbu
   riadi podklad sekcie, takže to funguje na oboch odtieňoch pozadia. */
.rf-hroty::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(14px, 2vw, 22px);
	background: linear-gradient(180deg, var(--rf-blue) 0%, var(--rf-steel-900, #17263A) 100%);
	-webkit-mask: var(--rf-hroty) top center / 240px 100% repeat-x;
	        mask: var(--rf-hroty) top center / 240px 100% repeat-x;
	opacity: .45;
	pointer-events: none;
}


/* =========================================================================
   REŤAZE
   ========================================================================= */

/* Reťaze po stranách sekcií sú dočasne vypnuté — výrez z loga mal tvrdé
   hrany a v rohu sekcie z neho bol kus reťaze visiaci v prázdne. Nová
   reťaz sa modeluje v 3D. Hojdanie ostáva, bude ho treba. */
@keyframes rf-hojd {
	0%, 100% { rotate: -.45deg; }
	50%      { rotate: .45deg; }
}

@media (max-width: 1280px) {

	.rf-retaze::before,
	.rf-retaze::after {
		display: none;
	}
}


/* =========================================================================
   MEČ — JAZDEC POSTUPU
   ========================================================================= */

/* Meč stojí pri pravom okraji a čepeľ sa zapĺňa svetlom podľa toho, kde
   na stránke človek je. Nie je to len ukazovateľ: dá sa ním posúvať —
   čepeľ je dráha, uzol na nej jazdec. Pásik postupu pri hornej hrane by
   tu bol cudzí prvok; toto je ten istý údaj v jazyku plagátu. */
.rf-mec {
	position: fixed;
	right: clamp(6px, 1.1vw, 20px);
	top: 50%;
	width: 40px;
	height: min(48vh, 440px);
	z-index: 60;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .5s ease;
	pointer-events: none;
	cursor: grab;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.rf-mec--vidno,
.rf-mec:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.rf-mec--taha { cursor: grabbing; }

.rf-mec:focus-visible { outline: none; }

.rf-mec:focus-visible::after {
	content: "";
	position: absolute;
	inset: -8px 4px;
	border: 1px solid var(--rf-blue-hot);
	pointer-events: none;
}

/* Kým sa v ňom nedrží prst ani ostrosť, nech nekradne kliknutia textu
   pod sebou — preto sa ovládanie zapína až s viditeľnosťou. */
.rf-bez-vyberu {
	user-select: none;
	-webkit-user-select: none;
}

.rf-mec__telo,
.rf-mec__svetlo {
	position: absolute;
	inset: 0;
	-webkit-mask: var(--rf-mec) center / contain no-repeat;
	        mask: var(--rf-mec) center / contain no-repeat;
	pointer-events: none;
}

.rf-mec__telo {
	background: linear-gradient(180deg, var(--rf-steel-500, #40546F), var(--rf-steel-900, #17263A));
	opacity: .5;
}

/* Svetlo steká po čepeli zhora nadol, ako človek po stránke. */
.rf-mec__svetlo {
	background: linear-gradient(180deg, var(--rf-blue-hot), var(--rf-blue));
	clip-path: inset(0 0 calc(100% - var(--rf-postup, 0%)) 0);
	filter: drop-shadow(0 0 6px rgba(79, 176, 255, .55));
}

/* Uzol je jazdec: ukazuje, kde sa dá chytiť. */
.rf-mec__uzol {
	position: absolute;
	left: 50%;
	top: var(--rf-postup, 0%);
	width: 13px;
	height: 13px;
	margin: -7px 0 0 -7px;
	background: var(--rf-ice);
	box-shadow: 0 0 12px 3px rgba(79, 176, 255, .5);
	rotate: 45deg;
	transition: width .16s ease, height .16s ease, margin .16s ease, background-color .16s ease;
	pointer-events: none;
}

.rf-mec:hover .rf-mec__uzol,
.rf-mec:focus-visible .rf-mec__uzol,
.rf-mec--taha .rf-mec__uzol {
	width: 19px;
	height: 19px;
	margin: -10px 0 0 -10px;
	background: #fff;
}

@media (max-width: 1280px), (pointer: coarse) {

	.rf-mec {
		display: none;
	}
}


/* =========================================================================
   VIAC ĽADU
   Cencúle a reťaze sú z loga a z plagátu. Držia sa hrán, nie stredu —
   ozdoba, ktorá vojde do textu, prestáva byť ozdobou.
   ========================================================================= */

/* Cencúle pod hlavičkou, keď už hlavička nesie podklad. */
.rf-header--nadpodkladom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
	background: linear-gradient(180deg, rgba(43, 53, 70, .95), rgba(43, 53, 70, 0));
	-webkit-mask: url("img/drip-edge-sm.svg") top left / 260px 14px repeat-x;
	        mask: url("img/drip-edge-sm.svg") top left / 260px 14px repeat-x;
	pointer-events: none;
}

/* Cencúle na hornej hrane dosiek — karta vstupenky aj karta interpreta. */
.rf-plate {
	position: relative;
}

.rf-plate::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 9px;
	background: var(--rf-steel-500);
	-webkit-mask: url("img/drip-edge-sm.svg") top left / 180px 9px repeat-x;
	        mask: url("img/drip-edge-sm.svg") top left / 180px 9px repeat-x;
	opacity: .5;
	pointer-events: none;
	transition: opacity .25s ease;
}

.rf-plate:hover::after { opacity: .85; }

/* Cencúle z hornej hrany hero. Reťaze tu boli prvý pokus, ale cez svetlé
   miesta videa čítali ako pás krúžkov — ľad na hrane obrazovky sedí lepšie
   a je to ten istý motív ako v logu. */
.rf-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 28px;
	z-index: 2;
	background: linear-gradient(180deg, rgba(216, 230, 247, .9), rgba(216, 230, 247, 0));
	/* Pomer dlaždice MUSÍ sedieť s pomerom SVG (1200 : 84 = 100 : 7), inak
	   sa kresba do dlaždice vloží so zachovaným pomerom, vycentruje sa a po
	   stranách ostane prázdno — pri 560 × 30 to bolo 65,7 px na každý spoj,
	   takže na telefóne chýbal celý ľavý koniec pásu. 400 × 28 pomer drží. */
	-webkit-mask: url("img/drip-edge.svg") top left / 400px 28px repeat-x;
	        mask: url("img/drip-edge.svg") top left / 400px 28px repeat-x;
	opacity: .32;
	pointer-events: none;
}


/* =========================================================================
   BLESK NAD LOGOM
   ========================================================================= */

/* Logo na plagáte je obtočené elektrickým oblúkom. Na webe sa oblúk
   ozve raz za čas — nie v slučke, aby z toho nebolo blikajúce pozadie. */
/* Logo je znak podujatia, takže sa nepredkresľuje — hýbe sa svetlo na ňom.
   Maskou oboch vrstiev je samotný obrázok loga, takže žiara sadá len na
   kov, ľad a reťaz a nikde nie je vidieť obdĺžnik okolo. Ani jedna vrstva
   nepoužíva `filter`: animovaný filter nad obrázkom vykreslí na iPhone
   biely obdĺžnik namiesto loga (kapitola o pasciach v HANDOVERi). Práve
   toto tu predtým bolo — výboj bežal cez `brightness` a `drop-shadow`. */
.rf-hero__logo::before,
.rf-hero__logo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	-webkit-mask: url("img/logo-900.webp") center / 100% 100% no-repeat;
	        mask: url("img/logo-900.webp") center / 100% 100% no-repeat;
}

/* Ľadový záblesk prebehne šikmo cez písmená a reťaz — to isté svetlo,
   aké steká po reťaziach po stranách hero. */
.rf-hero__logo::before {
	background-image: linear-gradient(104deg,
		rgba(120, 200, 255, 0) 40%,
		rgba(186, 226, 255, .5) 47%,
		rgba(255, 255, 255, .82) 50%,
		rgba(160, 215, 255, .46) 53%,
		rgba(120, 200, 255, 0) 60%);
	background-repeat: no-repeat;
	background-size: 280% 100%;
	animation: rf-logo-lesk 7.5s ease-in-out infinite;
}

/* Lesk prebehne v prvej polovici a druhú čaká za okrajom — inak by po
   logu chodil donekonečna a bol by z toho blikot. */
@keyframes rf-logo-lesk {
	0%        { background-position: -180% 50%; }
	48%, 100% { background-position: 280% 50%; }
}

/* Dýchanie: modrý svit na kove sa pomaly rozžiari a stlmí. Sám osebe je
   sotva viditeľný, ale bez neho logo stojí. */
.rf-hero__logo::after {
	background-image: radial-gradient(72% 92% at 50% 50%,
		rgba(80, 175, 255, .42),
		rgba(40, 120, 220, .14) 58%,
		rgba(40, 120, 220, 0) 78%);
	animation: rf-logo-dych 6.5s ease-in-out infinite;
}

@keyframes rf-logo-dych {
	0%, 100% { opacity: .2; }
	50%      { opacity: .6; }
}

/* Výboj: rf-efekty.js nasadí triedu v nepravidelných odstupoch. Beží na
   tej istej vrstve ako dýchanie, len rýchlejšie a jasnejšie. */
.rf-hero__logo.rf-blesk::after {
	animation: rf-vyboj .52s steps(1, end);
}

@keyframes rf-vyboj {
	0%, 100% { opacity: .2; }
	12%      { opacity: .92; }
	24%      { opacity: .28; }
	38%      { opacity: 1; }
	52%      { opacity: .24; }
	66%      { opacity: .72; }
}


/* =========================================================================
   ODKRÝVANIE — ĽADOVÁ PLATŇA
   =========================================================================

   Pôvodné odkrývanie bol posun nahor s priehľadnosťou — efekt, ktorý má
   dnes každá druhá stránka. Tu sa obsah odkrýva ako keď sa z ľadu odlomí
   platňa: šikmý strih sa zarovná a námraza sa vytratí. */

.rf-reveal,
[data-rf-reveal] {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: opacity .7s ease,
	            transform .7s cubic-bezier(.22, .61, .36, 1),
	            clip-path .85s cubic-bezier(.22, .61, .36, 1),
	            filter .85s ease;
}

/* Strih je v pixeloch, nie v percentách. Pri 5 % z vysokého kontajnera
   to bolo aj 25 px a odrezávalo to prvý riadok; na nadpisoch s mäkčeňmi
   z toho bolo doslova „CASTE OTAZKY". */
.rf-js .rf-reveal:not(.rf-in--hotovo),
.rf-js [data-rf-reveal]:not(.rf-in--hotovo) {
	clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%);
	filter: blur(5px) saturate(.7);
}

/* Nadpisy majú riadkovanie .9 a dĺžne s mäkčeňmi prečnievajú nad účiaru,
   takže im strih odreže diakritiku. Nadpis sa odkrýva iba rozmrazením. */
.rf-js .rf-h2.rf-reveal,
.rf-js .rf-h1.rf-reveal {
	clip-path: none;
}


/* =========================================================================
   NADPISY — NÁMRAZA
   ========================================================================= */

/* Nadpis sa neposúva, iba sa zaostrí. Pri veľkom písme je posun rušivý,
   rozmrazenie nie. */
.rf-h2.rf-reveal {
	transition: opacity .7s ease,
	            filter .9s cubic-bezier(.22, .61, .36, 1),
	            letter-spacing .9s cubic-bezier(.22, .61, .36, 1),
	            clip-path .85s cubic-bezier(.22, .61, .36, 1);
}

.rf-js .rf-h2.rf-reveal:not(.rf-in--hotovo) {
	filter: blur(9px) brightness(1.35);
	letter-spacing: .14em;
}


/* =========================================================================
   CHLAD ZA KURZOROM
   ========================================================================= */

/* Svetlo drží krok s myšou len na sekcii, nad ktorou práve je. Cez celú
   stránku by z toho bola baterka, nie atmosféra. */
.rf-section {
	position: relative;
	isolation: isolate;
}

.rf-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .45s ease;
	background: radial-gradient(340px circle at var(--rf-mx, 50%) var(--rf-my, 50%),
	                            rgba(25, 122, 229, .15), transparent 70%);
}

@media (hover: hover) and (pointer: fine) {

	.rf-section:hover::after {
		opacity: 1;
	}
}


/* =========================================================================
   MENEJ POHYBU
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.rf-mraz,
	.rf-mec {
		display: none;
	}

	.rf-retaze::before,
	.rf-retaze::after,
	.rf-hero__logo::before,
	.rf-hero__logo::after,
	.rf-hero__logo.rf-blesk::after {
		animation: none;
	}

	.rf-reveal,
	[data-rf-reveal],
	.rf-h2.rf-reveal {
		transition: none;
	}

	.rf-js .rf-reveal:not(.rf-in--hotovo),
	.rf-js [data-rf-reveal]:not(.rf-in--hotovo),
	.rf-js .rf-h2.rf-reveal:not(.rf-in--hotovo) {
		clip-path: none;
		filter: none;
		letter-spacing: normal;
	}

	.rf-section::after {
		display: none;
	}
}


/* =========================================================================
   KORUNA HROTOV NA KARTE
   ========================================================================= */

/* Na plagáte stoja po stranách trónu rytieri v rade. Karta interpreta je
   ich obdoba, takže pri nadídení kurzorom jej z hornej hrany vyrastú
   hroty — rovnaký tvar ako na hrane sekcie, len menší. */
.rf-act {
	position: relative;
}

.rf-act::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	background: linear-gradient(180deg, var(--rf-blue-hot), var(--rf-blue));
	-webkit-mask: var(--rf-hroty) top center / 160px 100% repeat-x;
	        mask: var(--rf-hroty) top center / 160px 100% repeat-x;
	opacity: 0;
	pointer-events: none;
	transition: height .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {

	.rf-act:hover::before,
	.rf-act:focus-within::before {
		height: 12px;
		opacity: .85;
	}
}


/* =========================================================================
   ODPOČET — ZÁBLESK PRI ZMENE ČÍSLICE
   ========================================================================= */

/* Odpočet je jediné miesto na stránke, kde sa niečo mení samo od seba.
   Záblesk to prizná — bez neho si zmeny sekúnd nikto nevšimne a číslo
   pôsobí ako obrázok. */
.rf-cifra--zmena {
	animation: rf-namraza .45s ease-out;
}

@keyframes rf-namraza {
	0%   { color: #fff; text-shadow: 0 0 18px rgba(120, 200, 255, .95); }
	100% { color: inherit; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {

	.rf-act::before {
		display: none;
	}

	.rf-cifra--zmena {
		animation: none;
	}
}


/* =========================================================================
   PRÍLET HERO
   Jeden nacvičený okamih pri načítaní stránky: logo sa zaostrí z námrazy,
   pod ním sa jeden po druhom zdvihnú riadky a nakoniec sa rozbehne pás
   s heslami. Nič ďalšie na stránke sa samo od seba nehýbe — všetko ostatné
   čaká na scrollovanie alebo na kurzor.

   Animácie majú zapísaný len začiatočný stav; koniec si prehliadač dopočíta
   z bežného vzhľadu prvku. Bez skriptu (a teda bez triedy .rf-js) sa nespustí
   nič a hero je rovno na svojom mieste — nikdy sa nestane, že by tam obsah
   ostal neviditeľný.
   ========================================================================= */

.rf-js .rf-hero__logo {
	animation: rf-prilet-logo 1.15s cubic-bezier(.16, .84, .36, 1) .08s both;
}

.rf-js .rf-hero__tag {
	animation: rf-prilet-riadok .75s cubic-bezier(.22, .61, .36, 1) .5s both;
}

.rf-js .rf-hero__cta {
	animation: rf-prilet-riadok .75s cubic-bezier(.22, .61, .36, 1) .64s both;
}

.rf-js .rf-hero__odpocet {
	animation: rf-prilet-riadok .75s cubic-bezier(.22, .61, .36, 1) .78s both;
}

/* Plagát sa nakláňa za kurzorom, takže mu transform siahať nesmieme —
   výplň animácie by naklonenie natrvalo prebila. Ostáva priehľadnosť. */
.rf-js .rf-hero__art {
	animation: rf-prilet-plagat 1.1s ease .34s both;
}

/* `backwards`, nie `both`. Pri `both` ostane po animácii na prvku
   dopočítaný `transform: matrix(1,0,0,1,0,0)` — a transform robí z prvku
   kotviaci blok pre všetko, čo je v ňom absolútne umiestnené. Pás sa tak
   kotvil na svoj widget namiesto na spodok hero a pod ním ostávalo 90 px
   prázdna. S `backwards` sa výplň po dobehnutí pustí, transform zmizne
   a pás sadne na spodnú hranu hero. */
.rf-js .rf-hero__pas {
	animation: rf-prilet-riadok .8s cubic-bezier(.22, .61, .36, 1) .95s backwards;
}

.rf-js .rf-hero__sipka {
	animation: rf-prilet-tichy 1s ease 1.5s both;
}

/* Rozostrenie z animácie je preč. Na iPhone sa logo vykreslilo ako biely
   obdĺžnik: WebKit si pri animovanom `filter` vyrobí nad obrázkom vlastnú
   kompozitnú vrstvu a keď obrázok v tej chvíli ešte nie je dekódovaný,
   ostane v nej prázdne biele miesto. Nábeh teda robí len priehľadnosť
   a mierka; tieň spod loga zostáva, ten sa neanimuje. */
@keyframes rf-prilet-logo {
	from {
		opacity: 0;
		transform: scale(1.06);
	}
}

@keyframes rf-prilet-riadok {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
}

@keyframes rf-prilet-plagat {
	from { opacity: 0; transform: scale(1.03); }
}

@keyframes rf-prilet-tichy {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

	.rf-js .rf-hero__logo,
	.rf-js .rf-hero__tag,
	.rf-js .rf-hero__cta,
	.rf-js .rf-hero__odpocet,
	.rf-js .rf-hero__art,
	.rf-js .rf-hero__pas,
	.rf-js .rf-hero__sipka {
		animation: none;
	}
}


/* =========================================================================
   REŤAZ NA PREDELE SEKCIÍ
   V logu drží celý znak reťaz — na webe visela zatiaľ len po stranách
   širokých sekcií a cez zamknuté sloty. Tu prechádza cez hranu medzi
   sekciami, tam, kde zhora visia cencúle: ľad a železo vedľa seba, presne
   ako na plagáte.

   Nie je to pseudoprvok, ale samostatný widget v Elementore — hroty aj
   bočné reťaze majú ::before a ::after na sekcii už zabraté a druhý by
   prvý prepísal. Zadávateľ ho tak vie presunúť aj odobrať.
   ========================================================================= */

.rf-section > .rf-retaz-obal {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 3;
	pointer-events: none;
}

/* Reťaz je vymodelovaná a vyrenderovaná v Blenderi
   (`_stage/blender/retaz.py`): článok je trubka vedená po dráhe v tvare
   štadióna, články sa striedavo otáčajú o 90° a sadajú po reťazovke.
   Predchádzajúce dva pokusy neprešli — kresba v SVG čítala ako rad
   krúžkov a výrez z loga mal tvrdý horný a spodný orez, takže okolo neho
   bolo vidieť obdĺžnik žiary. Render má skutočnú priehľadnosť, takže
   žiadna hrana nie je.

   `aspect-ratio` sedí s pomerom obrázka, takže `100% 100%` nič nedeformuje
   a reťaz sa nikdy nerozťahuje. Záporný okraj ju posadí na predel: chce to
   necelú polovicu výšky, a percentá pri okraji sa počítajú zo šírky. */
.rf-retaz-pas {
	position: relative;
	width: 100%;
	max-width: 1720px;
	margin: -5% auto 0;
	aspect-ratio: 2986 / 328;
	background: url("img/retaz3d.webp") center top / 100% 100% no-repeat;
	opacity: .95;
	/* Konce sa strácajú, nie sekajú. Reťaz je širšia než okno a bez tohto
	   ostal na oboch stranách preseknutý článok — čo vyzerá ako chyba
	   obrázka, hoci je to orez okna. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	animation: rf-hojd-predel 15s ease-in-out infinite;
}

/* Reťaz visí, takže sa aj kýve — ale desaťkrát tichšie než tie v hero.
   Otáčanie je okolo stredu horného okraja, aby konce išli hore-dole
   a stred ostal na predele. */
@keyframes rf-hojd-predel {
	0%, 100% { rotate: -.22deg; }
	50%      { rotate: .22deg; }
}

/* Cez reťaz šla vodorovná linka — miesto, kde sa stretli dve sekcie.
   Nestačí ju prežiariť, treba ju prekryť: pás je v strede úplne krycí
   a do oboch strán sa vytráca, takže hore aj dole prejde do sekcie bez
   hrany. Leží za reťazou (`z-index: -1` v jej vlastnom kontexte), takže
   železo ostáva navrchu.
   Samotná žiara zostáva — dáva lesku na reťazi dôvod. */
.rf-section > .rf-retaz-obal::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -112px;
	height: 224px;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(6, 12, 22, 0) 0%,
		rgba(6, 12, 22, 1) 43%,
		rgba(6, 12, 22, 1) 57%,
		rgba(6, 12, 22, 0) 100%);
	pointer-events: none;
}

/* Predel bez svetla bol len miesto, kde sa stretli dve rôzne tmy — cez
   reťaz šla vodorovná linka a bolo vidieť, že sekcia sa práve vymenila.
   Studená žiara pod reťazou tú linku prekryje a zároveň dá železu dôvod,
   prečo sa leskne. */
.rf-section > .rf-retaz-obal::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	/* Nie viac než šírka okna: pri 112 % žiara na telefóne prečnievala
	   o 23 px a stránka sa dala posunúť do strany. Odmerané. */
	width: min(1500px, 100%);
	height: 260px;
	transform: translateX(-50%);
	background:
		radial-gradient(56% 100% at 50% 46%,
			rgba(58, 122, 214, .20) 0%,
			rgba(28, 66, 124, .11) 44%,
			rgba(5, 10, 19, 0) 74%);
	pointer-events: none;
}

@media (min-width: 901px) {

	/* Železo v rendere je zámerne tmavé, aby nesvietilo na plochu. Na
	   predele mu ale chýbal kontrast, tak dostane trochu jasu — staticky,
	   nie animovane: animovaný filter nad obrázkom robí na iPhone biely
	   obdĺžnik (kapitola o pasciach). */
	.rf-retaz-pas {
		filter: brightness(1.14) contrast(1.07);
	}
}

@media (max-width: 900px) {

	.rf-retaz-pas {
		/* Na telefón ide tretinový súbor — 76 kB na ozdobu je tam priveľa. */
		background-image: url("img/retaz3d-900.webp");
		opacity: .85;
	}

	.rf-section > .rf-retaz-obal::before {
		height: 170px;
		top: -24px;
	}

	.rf-section > .rf-retaz-obal::after {
		height: 128px;
		top: -64px;
	}
}


/* =========================================================================
   POHYBLIVÉ POZADIE SEKCIÍ
   =========================================================================

   Obraz pod sekciou ostáva tam, kde bol — video je jeho pokračovanie,
   nie náhrada: rovnaký záber, rovnaké miesto pri spodnej hrane, rovnaké
   stmavenie. Bez skriptu (telefón, šetrenie dát, obmedzený pohyb) zostane
   obraz a nič nechýba. */

.rf-sekcia-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Video kryje celú sekciu. Predtým malo `height: auto` a sedelo pri
   spodnej hrane ako statický obraz — pri sekcii vyššej než 900 px tak nad
   ním ostával čierny pás a vyzeralo to, že sa video načítalo len navrchu.
   `cover` je tu na mieste: záber je textúra, nie fotka miesta. */
.rf-sekcia-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 62%;
	display: block;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.rf-sekcia-video--hra video {
	opacity: 1;
}

/* Závoj je tá istá tma, akú má sekcia nad statickým obrazom — bez neho
   by pod textom prebehol drak a text by sa stratil. */
.rf-sekcia-video__zavoj {
	position: absolute;
	inset: 0;
	display: block;
}

.rf-sekcia-video--vstupenky .rf-sekcia-video__zavoj {
	background: linear-gradient(180deg, rgba(5, 10, 19, .96) 14%, rgba(5, 10, 19, .54) 58%, rgba(5, 10, 19, .86));
}

.rf-sekcia-video--faq .rf-sekcia-video__zavoj {
	background: linear-gradient(180deg, rgba(5, 10, 19, .97) 16%, rgba(5, 10, 19, .62) 60%, rgba(5, 10, 19, .88));
}


/* =========================================================================
   REŤAZE PO BOKOCH HERO
   =========================================================================

   Ten istý model ako na predeloch, len postavený nastojato
   (`_stage/blender/retaz.py --zvisla`). Sú ukotvené na hornej hrane
   stránky a hojdajú sa z uchytenia, nie zo stredu. Pomer obrázka je
   215 : 2031, takže `auto 100%` drží šírku pri akejkoľvek výške hero.

   Šírka boxu sa preto **dopočítava z pomeru** (`aspect-ratio`), nie je
   napevno. S pevnou šírkou sa reťaz do boxu nezmestila — pri hero
   vysokom 844 px je obrázok široký 89 px, box mal 53 — a `center`
   ukrojilo 18 px z každej strany, takže na obrazovke ostala rovná zvislá
   rezná hrana uprostred ničoho. So `aspect-ratio` sa neorezáva nikdy,
   pri žiadnej výške hero.

   Na telefóne by taká reťaz zabrala pätinu šírky, tak je ukotvená
   **vnútornou hranou** (`right: calc(100% - …)`) a prebytok jej vytŕča
   za okraj obrazovky. Orez tam robí okraj displeja, čo vyzerá ako reťaz
   idúca za roh, nie ako chyba.

   Podklad aj maska lesku sú zarovnané na vonkajšiu hranu — `right`.
   Pravá reťaz je preklopená cez `scaleX(-1)`, čo preklopí aj podklad,
   takže tá istá hodnota sedí obom. */

.rf-hero__retaz {
	--rf-retaz-obr: url("img/retaz3d-zvisla.webp");
	position: absolute;
	top: 0;
	bottom: 0;
	width: auto;
	aspect-ratio: 215 / 2031;
	background: var(--rf-retaz-obr) top right / auto 100% no-repeat;
	opacity: .62;
	pointer-events: none;
	z-index: 1;
	transform-origin: 50% 0;
	animation: rf-hojd-dlha 11s ease-in-out infinite;
}

.rf-hero__retaz--vlavo  { left: clamp(6px, 2.6vw, 52px); }
.rf-hero__retaz--vpravo { right: clamp(6px, 2.6vw, 52px); transform: scaleX(-1); animation-delay: -5.5s; }

/* Dlhá reťaz sa nehojdá ako obrázok — kýva sa z uchytenia. Pri 800 px
   dĺžky je z 1,2° na spodku vyše pätnásť pixelov, čo je vidieť; pri
   pôvodných 0,45° to bolo hnutie, o ktorom sa dalo len tvrdiť, že tam je. */
@keyframes rf-hojd-dlha {
	0%, 100% { rotate: -1.2deg; }
	50%      { rotate: 1.2deg; }
}

/* Lesk, ktorý po reťazi zbehne zhora nadol — to isté, čo robí výboj na
   logu. Maskou je samotná reťaz, takže svetlo svieti len na železe
   a nie na obdĺžniku okolo neho.
   Hýbe sa pozícia podkladu, nie `filter`: animovaný filter nad obrázkom
   robí na iPhone biely obdĺžnik (pozri kapitolu o pasciach). */
.rf-hero__retaz::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg,
		rgba(80, 170, 255, 0) 0%,
		rgba(120, 195, 255, .3) 24%,
		rgba(196, 228, 255, .72) 42%,
		rgba(255, 255, 255, .82) 50%,
		rgba(140, 205, 255, .55) 62%,
		rgba(80, 170, 255, 0) 100%);
	background-repeat: no-repeat;
	background-size: 100% 340px;
	-webkit-mask: var(--rf-retaz-obr) top right / auto 100% no-repeat;
	        mask: var(--rf-retaz-obr) top right / auto 100% no-repeat;
	mix-blend-mode: screen;
	animation: rf-lesk 9s ease-in-out infinite;
}

.rf-hero__retaz--vpravo::after { animation-delay: -4.5s; }

/* Lesk prebehne v prvej tretine a zvyšok času čaká za spodnou hranou —
   inak by po reťazi behal donekonečna a bol by z toho blikot. */
@keyframes rf-lesk {
	0%        { background-position: 50% -380px; }
	42%, 100% { background-position: 50% calc(100% + 380px); }
}

/* Pod 1100 px ide hero od okraja k okraju, tak sa reťaz stiahne k hrane
   a stlmí — na telefóne rámuje plagát a text jej nezavadzia. Kotví sa
   vnútornou hranou a zvyšok šírky jej vytŕča za okraj displeja; na
   obrazovke tak ostane 46 px železa bez jedinej reznej hrany. */
@media (max-width: 1100px) {

	.rf-hero__retaz {
		opacity: .42;
	}

	.rf-hero__retaz--vlavo  { left: auto; right: calc(100% - 46px); }
	.rf-hero__retaz--vpravo { right: auto; left: calc(100% - 46px); }
}

@media (prefers-reduced-motion: reduce) {

	.rf-hero__retaz,
	.rf-hero__retaz::after {
		animation: none;
	}
}