/* =======================================================================
   VRSTVA — Instalatérství Loupanec (továrna v3, 27. 10. 2026)
   Znak: pelety v písmenech, které se rozhoří. Barvy: petrolejová (akce)
   + jantar (znak, oheň, pelety). Pozadí: kámen, cihlová zeď kotelny,
   béžová s peletami. Důvody v POZNAMKY.md.
   barvy: node ../sablona/nastroje/paleta.js --akcent 205 --zvyrazneni 70
          --tmavsi-akcent 0.08 --sytost-akcent 0.09 --sytost-zvyrazneni 0.13
          --podklad kamen   (plocha přepsaná na cihlovou tmu kotelny)
   ======================================================================= */

:root {
	/* --- písma --- */
	--pismo-nadpis: 'Zilla Slab', Georgia, serif;
	--pismo-text: 'Karla', system-ui, sans-serif;
	--pismo-cisla: 'JetBrains Mono', ui-monospace, monospace;
	--vaha-nadpis: 700;
	--vaha-veta: 500;

	/* --- tvary --- */
	--karta-radius: 16px;
	--tl-radius: 14px;

	/* --- barvy --- */
	--podklad: #F3EEE7;
	--podklad-odliseny: #EFE5D3;
	--text: #211910;
	--text-tlumeny: #5E554A;
	--karta: #FBF7F1;
	--karta-vyrazna: #FFFBF5;
	--karta-na-odlisenem: #F3EEE7;
	--karta-na-odlisenem-vyrazna: #FBF7F1;
	--akcent: #B3261A;
	--akcent-text: #FFFFFF;
	--akcent-tmavy: #86130C;
	--akcent-odkaz: #B3261A;
	--akcent-odkaz-tmavy: #86130C;
	--akcent-obrys: #B3261A;
	--zvyrazneni: #2A241F;
	--plocha: #16120E;
	--plocha-text: #FBF7F1;
	--plocha-tlumeny: #DDD5C9;
	--plocha-karta: #231C16;
	--plocha-akcent: #F2B35E;
	--plocha-akcent-text: #16120E;
	--plocha-akcent-svetly: #FFE0A8;
	--plocha-zvyrazneni: #F2B35E;

	/* jantar ohně (tón zvýraznění) */
	--jantar: #F2A93B;
}

/* --- znak: do písmen se nalije rozžhavená litina, žár přejede a slovo vychladne ---
   Pelety se rychle nasypou, žár přejede přes celé slovo zleva doprava,
   chvíli hoří a pak zhasne. Zůstanou normální pelety. */
.znak { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; color: var(--zvyrazneni); line-height: 1; }
html.js .znak { color: transparent; }
html.js .znak::before { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1.5px #b7a68d; z-index: -1; transition: opacity .6s .6s; }
.na-plose .znak::before { -webkit-text-stroke-color: #5a4a3c; }
.znak .vrstva { position: absolute; inset: 0; color: transparent; pointer-events: none; }
.znak .vypln {
	background: url(../obrazky/litina.svg) 0 0 / 1.05em auto;
	-webkit-background-clip: text; background-clip: text;
	clip-path: polygon(0 104%, 12% 104%, 25% 104%, 38% 104%, 50% 104%, 62% 104%, 75% 104%, 88% 104%, 100% 104%, 100% 110%, 0 110%);
	transition: clip-path 1s cubic-bezier(.45, 0, .2, 1);
}
.znak.sype .vypln { clip-path: polygon(0 -6%, 12% -12%, 25% -4%, 38% -14%, 50% -6%, 62% -12%, 75% -3%, 88% -10%, 100% -5%, 100% 110%, 0 110%); }
.znak.sype::before { opacity: 0; }
.znak .zar {
	background: linear-gradient(0deg, #ffe3a0 0%, #ffb447 30%, #f27a1d 65%, #c4400c 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat;
	opacity: 0; mix-blend-mode: screen;
}
.znak.hori .zar { animation: zapal 3.4s ease-in-out forwards, prejed .9s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes zapal { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .82; } 45% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: 0; } }
@keyframes prejed { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.znak .zare { position: absolute; left: -4%; right: -4%; bottom: -.1em; height: .6em; border-radius: 50%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 40, .5), transparent 70%); opacity: 0; z-index: -2; filter: blur(6px); }
.znak.hori .zare { animation: zapal 3.4s ease-in-out forwards; }
.znak .jiskry { position: absolute; inset: 0; pointer-events: none; }
.znak .jiskry i { position: absolute; bottom: 30%; width: 3px; height: 3px; border-radius: 50%; background: #ffd690; box-shadow: 0 0 6px 2px rgba(255, 150, 50, .8); opacity: 0; }
.znak.hori .jiskry i { animation: jiskra var(--d, 1.6s) var(--z, 0s) ease-out 1 both; }
@keyframes jiskra { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 6px), -1.1em); } }

@media (prefers-reduced-motion: reduce) {
	.znak .vypln { clip-path: none; transition: none; }
	html.js .znak::before { opacity: 0; }
	.znak .zar, .znak .zare, .znak .jiskry { display: none; }
}

.na-plose .znak .vypln { background-image: url(../obrazky/litina-svetla.svg); }