/* Dýchání webu: decentní pohyb v jednom rytmu, 5 s nádech a 5 s výdech (6 dechů za minutu).
   Studie a specifikace: tools/remotion-dychani (README), CHANGELOG LIII. Prvky dýchají spolu, jen
   s posunem fáze (záporné animation-delay = o kolik prvek „následuje“), ať to nepůsobí mechanicky.

   Všechno visí na `html.as-pohyb`. Třídu přidá skript v <head> (inc/pohyb.php) ještě před vykreslením,
   a jen bez omezení pohybu a bez úspory dat — bez JS web stojí a nic není schované. Hýbe se jen
   transform/opacity (žádný posun obsahu, CLS 0). Sekce mimo okno pauzuje assets/js/dech.js (`as-pauza`).
   Záměrně bez pohybu: zkušenosti, certifikace, laboratorní testy, ceny a výběr balení. Tah fixou
   v nadpisu úvodu je podtržený pevně od začátku, bez dokreslení (David 23. 10.). */

@keyframes as-dech-zare {
	0%, 100% { transform: scale(1); opacity: .78; }
	50% { transform: scale(1.04); opacity: 1; }
}
@keyframes as-dech-vznes {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes as-dech-odznak {
	0%, 100% { transform: rotate(2.6deg); }
	50% { transform: rotate(3.4deg); }
}
@keyframes as-dech-ilustrace {
	0%, 100% { transform: none; }
	50% { transform: translateY(-4px) scale(1.018); }
}
@keyframes as-dech-fajfka {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@keyframes as-dech-vlna {
	from { transform: scale(1); opacity: .7; }
	to { transform: scale(1.9); opacity: 0; }
}
@keyframes as-dech-tep {
	from { transform: scale(1); opacity: .55; }
	to { transform: scale(2.8); opacity: 0; }
}
@keyframes as-dech-nadech {
	0% { transform: scale(.86); }
	60% { transform: scale(1.03); }
	100% { transform: scale(1); }
}
/* Kroužek hlavního tlačítka: jednou za dech, v nádechu (37–63 % cyklu) se rozplyne o 14 px. Kroužek je
   statický stín pseudoprvku a hýbe se jen transform/opacity — animovaný box-shadow by se překresloval
   každý snímek (README studie). Měřítko po osách je z tlačítka 206 × 52 px (14 px do stran i nahoru
   a dolů); na mobilu je tlačítko přes celou šířku a do stran roste jen o 4 %, ať nevyjede z okraje 20 px. */
@keyframes as-dech-tlacitko {
	0%, 37% { transform: scale(1); opacity: 0; }
	40% { transform: scale(1); opacity: .7; }
	63%, 100% { transform: scale(1.136, 1.538); opacity: 0; }
}
@keyframes as-dech-tlacitko-m {
	0%, 37% { transform: scale(1); opacity: 0; }
	40% { transform: scale(1); opacity: .7; }
	63%, 100% { transform: scale(1.04, 1.538); opacity: 0; }
}

/* Úvod: záře za balením dýchá, balení ji o 0,8 s později následuje, odznak se pohupuje kolem svých 3°. */
.as-pohyb .as-hero__zare { animation: as-dech-zare 10s ease-in-out infinite; }
.as-pohyb .as-hero__baleni { animation: as-dech-vznes 10s ease-in-out -9.2s infinite; }
.as-pohyb .as-hero__odznak { animation: as-dech-odznak 10s ease-in-out -8s infinite; }

/* 7 důvodů: ilustrace jsou celé PNG, dýchá tedy celý obrázek, o 1 s za rytmem. */
.as-pohyb .as-duvod__obraz img { animation: as-dech-ilustrace 10s ease-in-out -9s infinite; }

/* Číslo důvodu se při příjezdu do okna jednou ohlásí vlnkou (is-v-okne dává dech.js). */
.as-duvod__cislo { position: relative; }
.as-duvod__cislo::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--as-merunka);
	opacity: 0;
	pointer-events: none;
}
.as-pohyb .as-duvod.is-v-okne .as-duvod__cislo::after { animation: as-dech-vlna 1.2s ease-out .15s both; }

/* Tečka „jsme online“ (horní lišta, patička) tepe třikrát za dech. */
.as-lista__tecka { position: relative; }
.as-pohyb .as-lista__tecka.is-online::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: as-dech-tep 3.333s ease-out infinite;
	pointer-events: none;
}

/* Pruh výhod: kolečka se při příjezdu postupně nadechnou (jednou, pružina). Do příjezdu jsou jen
   menší — viditelná; pojistka časem a posunem je v dech.js. */
.as-pohyb .as-vyhody:not(.is-v-okne) .as-vyhoda > :first-child { transform: scale(.86); }
.as-pohyb .as-vyhody.is-v-okne .as-vyhoda > :first-child { animation: as-dech-nadech .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.as-pohyb .as-vyhody.is-v-okne .as-vyhoda:nth-child(2) > :first-child { animation-delay: 90ms; }
.as-pohyb .as-vyhody.is-v-okne .as-vyhoda:nth-child(3) > :first-child { animation-delay: 180ms; }
.as-pohyb .as-vyhody.is-v-okne .as-vyhoda:nth-child(4) > :first-child { animation-delay: 270ms; }

/* Hlavní tlačítko úvodu jednou za dech jemně zazáří — kroužek je na ::after, tlačítko samo se nepřekresluje. */
.as-pohyb .as-hero__cta .as-btn--primarni { position: relative; }
.as-pohyb .as-hero__cta .as-btn--primarni::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 3px rgb(245, 192, 154);
	opacity: 0;
	pointer-events: none;
	animation: as-dech-tlacitko 10s linear infinite;
}
@media (max-width: 768px) {
	.as-pohyb .as-hero__cta .as-btn--primarni::after { animation-name: as-dech-tlacitko-m; }
}

/* Fajfka u „Skladem > 50 ks“ dýchá s rytmem. */
.as-pohyb .as-vyber__sklad-ikona { animation: as-dech-fajfka 10s ease-in-out infinite; }

/* Doprava zdarma ve vysouvacím košíku (varianta C ze studie LXIII, David 23. 10.). Dokud práh chybí,
   přejede výplní pruhu jednou za dech lesk — v nádechu, 37–63 % cyklu jako kroužek tlačítka úvodu.
   Pás je ::after přes celou výplň s bílým gradientem v levých 32 %: jede od začátku viditelné výplně
   (100 % − --as-pruh, minus pás) po její konec a výplň ho ořízne. Jen v otevřeném košíku, takže smyčka
   začíná otevřením a první lesk přijde za 3,7 s. Po splnění prahu je klid. */
@keyframes as-dech-lesk {
	0%, 37% { transform: translateX(calc(68% - var(--as-pruh, 0%))); opacity: 0; }
	50% { opacity: 1; }
	63%, 100% { transform: translateX(100%); opacity: 0; }
}
.as-pohyb .as-kosik-panel.is-otevreno .as-kosik-panel__doprava:not(.is-splneno) .as-kosik-panel__pruh span::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 16%, rgba(255, 255, 255, 0) 32%);
	pointer-events: none;
	animation: as-dech-lesk 10s linear infinite;
}
/* Po změně košíku se výplň doplní z předchozí hodnoty pružinou (přestřelí o necelá 3 % a usadí se).
   is-plni přidává a sundává dech.js; na prvním vykreslení se nic nehýbe. */
.as-pohyb .as-kosik-panel__pruh span.is-plni { transition: transform .65s cubic-bezier(.3, 1.3, .6, 1); }
/* Ve chvíli splnění prahu se fajfka jednou nadechne a za ní se rozplyne zelený kroužek (is-prave-splneno
   dává dech.js jen při přechodu z „chybí“ na „splněno“, ne při každém vykreslení košíku). */
.as-pohyb .as-kosik-panel__doprava.is-prave-splneno .as-kosik-panel__doprava-fajfka {
	position: relative;
	z-index: 0;
	animation: as-dech-nadech .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.as-pohyb .as-kosik-panel__doprava.is-prave-splneno .as-kosik-panel__doprava-fajfka::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--as-zelena);
	opacity: 0;
	pointer-events: none;
	animation: as-dech-vlna 1.2s ease-out .1s both;
}

/* Sekce mimo okno stojí — nekonečné smyčky by jinak držely GPU i tam, kam nikdo nekouká. */
.as-pohyb .as-pauza,
.as-pohyb .as-pauza *,
.as-pohyb .as-pauza *::after { animation-play-state: paused; }