/*-----------------------------------------------------------------------------------

	Klient:			Klempířství Kozaňák
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept, hero s fotkou a světlé karty)
	Dodáno:			Listopad 2026

	Tlačítko zpět nahoru. Bez JS je vidět pořád, s JS (třída .js-nahoru na <html>)
	se objeví až pod hero.

-----------------------------------------------------------------------------------*/

/* Tvar štítu dílny (střecha jako lom mezi sekcemi), měď v něm stoupá s posunem stránky */
.nahoru {
	--stit: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
	position: fixed; right: var(--gutter); bottom: calc(var(--space-m) + var(--lista, 0px) + env(safe-area-inset-bottom)); z-index: 60;
	display: grid; place-items: center; width: 3.25rem; height: 3.5rem; padding-top: 0.6rem;
	background: var(--c-steel-hero); color: var(--c-white); clip-path: var(--stit);
	opacity: 0; translate: 0 0.75rem; visibility: hidden;
	transition: opacity 0.25s ease-out, translate 0.25s ease-out, visibility 0.25s, scale 0.15s ease-out;
}
/* měděný okraj štítu */
.nahoru::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--color-action); }
.nahoru::after { content: ""; position: absolute; inset: 2px 2px 0; z-index: -1; background: var(--c-steel-hero); clip-path: var(--stit); }
.nahoru { isolation: isolate; }
.nahoru svg { position: relative; z-index: 1; width: 1.35rem; height: 1.35rem; transition: translate 0.2s ease-out; }
.nahoru:hover { color: var(--color-accent-on-dark); }
.nahoru:hover svg { translate: 0 -2px; }
.nahoru:active { scale: 0.96; }
.nahoru:focus-visible { outline: none; }
.nahoru:focus-visible::after { background: var(--c-steel-800); }
.nahoru.je-videt { opacity: 1; translate: 0 0; visibility: visible; }
/* bez JS je tlačítko vidět pořád */
html:not(.js-nahoru) .nahoru { opacity: 1; translate: 0 0; visibility: visible; }
/* měď stoupá zdola podle toho, kolik stránky je za vámi */
@supports (animation-timeline: scroll()) {
	.nahoru__plneni { position: absolute; inset: 2px 2px 0; z-index: 0; background: rgba(164, 85, 42, 0.45); clip-path: var(--stit); transform-origin: bottom; animation: nahoru-plneni linear both; animation-timeline: scroll(root); }
	@keyframes nahoru-plneni { from { scale: 1 0; } to { scale: 1 1; } }
}
@media (prefers-reduced-motion: reduce) { .nahoru__plneni { display: none; } }