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

	Klient:			Deko Bistro
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.3 (koncept, nový design podle referencí)
	Dodáno:			Listopad 2026

-----------------------------------------------------------------------------------

	OBSAH

	01. Houpání, dýchání a stuha
	02. Vstupy sekcí
	03. Vstup hero
	04. Tlačítko Nahoru
	05. Omezený pohyb

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

/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 01. Houpání, dýchání a stuha
-----------------------------------------------------------------------------------*/

@keyframes houpat {
	from { transform: rotate(-2.2deg); }
	to { transform: rotate(2.2deg); }
}
@keyframes para {
	from { opacity: 0.4; transform: translateY(1px); }
	to { opacity: 1; transform: translateY(-1.5px); }
}
@keyframes dychat {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 01. Houpání, dýchání a stuha
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 02. Vstupy sekcí
-----------------------------------------------------------------------------------*/

/* sekce při načtení jemně vyjedou; bez JS je vše viditelné. Fotka u toho dojede ze zvětšení, výhody jdou po jedné. */
.js .vstup { opacity: 0; transform: translateY(2rem); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .vstup.je { opacity: 1; transform: none; }
.js .vstup .usp li { opacity: 0; transform: translateY(1rem); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.js .vstup.je .usp li { opacity: 1; transform: none; }
.js .vstup.je .usp li:nth-child(1) { transition-delay: 0.25s; }
.js .vstup.je .usp li:nth-child(2) { transition-delay: 0.35s; }
.js .vstup.je .usp li:nth-child(3) { transition-delay: 0.45s; }
.js .vstup.je .usp li:nth-child(4) { transition-delay: 0.55s; }

/*-----------------------------------------------------------------------------------
	KONEC: 02. Vstupy sekcí
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 03. Vstup hero
-----------------------------------------------------------------------------------*/

/* Třídu uvod dává js/uvod.js před vykreslením, uvod-jede main.js po načtení písma.
   Pořadí: rám a hlavička, nadpis vyjede zpod hrany po řádcích, káva přijede, text a tlačítka, nakonec se přilepí stamp. */
@keyframes uvod-ram { from { opacity: 0; } }
@keyframes uvod-dolu { from { opacity: 0; transform: translateY(-0.75rem); } }
@keyframes uvod-radek { from { transform: translateY(0.55em); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(-0.5em); } }
@keyframes uvod-nahoru { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes uvod-foto { from { opacity: 0; transform: translateY(3rem) scale(0.9) rotate(-4deg); } }
@keyframes uvod-stamp { 0% { opacity: 0; scale: 1.6; } 60% { opacity: 1; scale: 0.94; } 100% { scale: 1; } }

.uvod .hero, .uvod .header, .uvod .hero__r1, .uvod .hero__r2, .uvod .hero__foto,
.uvod .hero__perex, .uvod .hero__hodnoceni, .uvod .hero__akce, .uvod .hero__stitek { opacity: 0; }

.uvod-jede .hero, .uvod-jede .header, .uvod-jede .hero__r1, .uvod-jede .hero__r2, .uvod-jede .hero__foto,
.uvod-jede .hero__perex, .uvod-jede .hero__hodnoceni, .uvod-jede .hero__akce, .uvod-jede .hero__stitek { opacity: 1; }

.uvod-jede .hero { animation: uvod-ram 1.1s var(--ease-out) both; }
.uvod-jede .header { animation: uvod-dolu 0.9s var(--ease-out) 0.35s both; }
.uvod-jede .hero__r1 { animation: uvod-radek 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.uvod-jede .hero__r2 { animation: uvod-radek 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
.uvod-jede .hero__foto { animation: uvod-foto 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
.uvod-jede .hero__perex { animation: uvod-nahoru 0.9s var(--ease-out) 1s both; }
.uvod-jede .hero__hodnoceni { animation: uvod-nahoru 0.9s var(--ease-out) 1.1s both; }
.uvod-jede .hero__akce { animation: uvod-nahoru 0.9s var(--ease-out) 1.15s both; }
.uvod-jede .hero__stitek { animation: uvod-stamp 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 1.45s both; }

/*-----------------------------------------------------------------------------------
	KONEC: 03. Vstup hero
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 04. Tlačítko Nahoru
-----------------------------------------------------------------------------------*/

/* drží se nad preview lištou (--lista-h z main.js); bez JS zůstává skryté */
.nahoru {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: calc(var(--lista-h, 0px) + 1rem);
	z-index: 60;
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--c-apricot-500);
	color: var(--c-espresso-900);
	box-shadow: 0 0.25rem 0 var(--c-espresso-900);
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem) scale(0.8);
	transition: opacity 0.4s var(--ease-out), transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0.4s, box-shadow 0.2s var(--ease-out);
}
.nahoru.je-videt { opacity: 1; visibility: visible; transform: none; }
.nahoru:hover { transform: translateY(-0.2rem); box-shadow: 0 0.45rem 0 var(--c-espresso-900); }
.nahoru:active { transform: translateY(0.15rem); box-shadow: 0 0.1rem 0 var(--c-espresso-900); transition-duration: 0.1s; }
.nahoru svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.nahoru__stopa { stroke-width: 2.5; opacity: 0.2; }
.nahoru__prubeh { stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--prubeh, 0)); transform: rotate(-90deg); transform-origin: 50% 50%; }
.nahoru__sipka { stroke-width: 3; transition: transform 0.35s var(--ease-out); }
.nahoru:hover .nahoru__sipka { transform: translateY(-0.2rem); }

/*-----------------------------------------------------------------------------------
	KONEC: 04. Tlačítko Nahoru
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 05. Omezený pohyb
-----------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	.zarovka__houpe, .zare, .kosik svg, .nalepka--2::before, .stav__ikona .para, .pecet__text { animation: none !important; }
	.js .vstup { opacity: 1; transform: none; transition: none; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 05. Omezený pohyb
-----------------------------------------------------------------------------------*/