/* ═══ ÚVOD HP · stoh kariet: mamografia a vyšetrenie krvi (nasadené 29. 9. 2026) ══════════
   Generuje _zdroj/_skripty/uvod_stoh.py zo sekcie F v assets/uvod-navrhy.css — needitovať ručne.
   Len transform a opacity; nič, čo sa hýbe, nemá backdrop-filter. Pri podržaní myši alebo fokuse
   stojí, pri obmedzenom pohybe je statické. Keď opona (#dokaz) úvod zakryje, premium.css mu dá
   visibility: hidden. Mobil: úvod je zarovnaný na spodok a nad textom je tvár z videa, preto karta
   berie miesto riadka faktov a úvod je odľahčený (Marek 29. 9.: „aby hero nebola taká preplnená"). */

/* ─── F · stoh kariet ───────────────────────────────────────────────────
   v1 bolo prelínanie dvoch obrázkov. v2: predná karta 5,3 s ukazuje vyšetrenie (fotka sa pomaly
   usádza, dole beží čas), potom odletí doľava a zo stohu sa vysunie druhá; jej texty nabehnú až
   po dosadnutí, riadok po riadku. Zadná karta vykukuje nad prednou, zahalená do farby papiera.
   Druhá karta beží s posunom pol cyklu (--f). Odlietajúca je navrchu, prichádzajúca pod ňou. */
.uv-stoh {
  position: absolute; z-index: 3;
  right: var(--br-okraj);
  bottom: clamp(128px, calc(15vh / var(--z, 1)), 184px);
  width: 440px; height: 294px;
}
.uv-stoh-karta {
  --f: 0s;
  position: absolute; left: 0; right: 0; bottom: 0; height: 272px;
  border-radius: 28px; overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 80px -44px rgba(51, 65, 92, .7);
  color: var(--br-atrament); text-decoration: none;
  transform-origin: 50% 0;
  animation: uv-stoh 12s cubic-bezier(.7, 0, .2, 1) var(--f) infinite;
}
.uv-stoh-karta--2 { --f: -6s; }
/* odlet je kratší než príchod (0,5 s oproti 0,7 s) a zrýchľuje sa — odchádzajúca karta ostane
   krytá, kým kryje, a zmizne naraz; pri rovnomernom miznutí sa oba texty dlho prelínali */
@keyframes uv-stoh {
  0%, 44%  { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; z-index: 2;
             animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  45%      { z-index: 3; }
  48%      { transform: translate3d(-120px, 16px, 0) rotate(-7deg) scale(.95); opacity: 0; z-index: 3; }
  50%      { transform: translate3d(0, -18px, 0) rotate(0deg) scale(.92); opacity: 0; z-index: 1; }
  60%, 94% { transform: translate3d(0, -18px, 0) rotate(0deg) scale(.92); opacity: 1; z-index: 1;
             animation-timing-function: cubic-bezier(.25, .1, .2, 1); }
  100%     { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; z-index: 2; }
}
/* závoj zadnej karty: tá istá farba ako papier, takže karta ustúpi do hĺbky a nezošedne */
.uv-stoh-karta::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #F2F8F9; opacity: 0;
  animation: uv-stoh-zavoj 12s cubic-bezier(.7, 0, .2, 1) var(--f) infinite;
}
@keyframes uv-stoh-zavoj { 0%, 50% { opacity: 0; } 60%, 94% { opacity: .5; animation-timing-function: cubic-bezier(.25, .1, .2, 1); } 100% { opacity: 0; } }
.uv-stoh-foto { position: absolute; inset: 0; }
.uv-stoh-foto img {
  width: 100%; height: 100%; object-fit: cover;
  animation: uv-stoh-foto 12s cubic-bezier(.25, .1, .25, 1) var(--f) infinite;
}
@keyframes uv-stoh-foto { 0% { transform: scale(1.08); } 44%, 48% { transform: scale(1); } 48.5%, 100% { transform: scale(1.08); } }
.uv-stoh-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, .97) 82%);
}
.uv-stoh-odznak {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px -14px rgba(51, 65, 92, .55);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.uv-stoh-odznak::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.uv-meik .uv-stoh-odznak::before { background: linear-gradient(135deg, #A79DE0, #6F63C9); }
.uv-amp .uv-stoh-odznak::before { background: linear-gradient(135deg, #8FC9D0, #3E7FA8); }
.uv-stoh-text {
  position: absolute; left: 22px; right: 92px; bottom: 22px; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px;
}
.uv-stoh-text small { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--br-akcent-text); }
.uv-stoh-text b { font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.uv-stoh-text > span { font-size: 13px; line-height: 1.35; color: var(--br-tlmene); }
/* texty a odznak nabehnú po dosadnutí karty, riadok po riadku (--o) */
.uv-stoh-text > *, .uv-stoh-odznak {
  --o: 0s;
  animation: uv-stoh-riadok 12s cubic-bezier(.2, .8, .2, 1) calc(var(--f) + var(--o)) infinite both;
}
.uv-stoh-text > :nth-child(2) { --o: .08s; }
.uv-stoh-text > :nth-child(3) { --o: .16s; }
.uv-stoh-odznak { --o: .22s; }
@keyframes uv-stoh-riadok {
  0%        { transform: translateY(14px); opacity: 0; }
  7%, 48%   { transform: translateY(0); opacity: 1; }
  48.5%, 100% { transform: translateY(14px); opacity: 0; }
}
.uv-stoh-cta {
  position: absolute; right: 22px; bottom: 24px; z-index: 2;
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  color: #fff; font-size: 18px;
  animation: uv-stoh-cta 12s cubic-bezier(.2, .8, .2, 1) calc(var(--f) + .18s) infinite both;
}
.uv-meik .uv-stoh-cta { background: linear-gradient(135deg, #A79DE0, #6F63C9); box-shadow: 0 14px 30px -14px rgba(111, 99, 201, .8); }
.uv-amp .uv-stoh-cta { background: linear-gradient(135deg, #8FC9D0, #3E7FA8); box-shadow: 0 14px 30px -14px rgba(62, 127, 168, .8); }
@keyframes uv-stoh-cta {
  0%        { transform: scale(.6); opacity: 0; }
  8%, 48%   { transform: scale(1); opacity: 1; }
  48.5%, 100% { transform: scale(.6); opacity: 0; }
}
.uv-stoh-cas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(51, 65, 92, .08); }
.uv-stoh-cas::after {
  content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  animation: uv-stoh-cas 12s linear var(--f) infinite;
}
.uv-meik .uv-stoh-cas::after { background: linear-gradient(90deg, #A79DE0, #6F63C9); }
.uv-amp .uv-stoh-cas::after { background: linear-gradient(90deg, #8FC9D0, #3E7FA8); }
@keyframes uv-stoh-cas { 0% { transform: scaleX(0); } 44%, 48% { transform: scaleX(1); } 48.5%, 100% { transform: scaleX(0); } }
.uv-stoh-karta:focus-visible { outline: 2px solid #3E5DAE; outline-offset: 3px; }
.uv-stoh:hover *, .uv-stoh:hover *::after, .uv-stoh:focus-within *, .uv-stoh:focus-within *::after { animation-play-state: paused; }
/* klávesnica: zaostrená karta stojí vpredu, druhá za ňou */
.uv-stoh:has(:focus-visible) *, .uv-stoh:has(:focus-visible) *::after { animation: none; }
.uv-stoh:has(.uv-stoh-karta--1:focus-visible) .uv-stoh-karta--2,
.uv-stoh:has(.uv-stoh-karta--2:focus-visible) .uv-stoh-karta--1 { transform: translate3d(0, -18px, 0) scale(.92); z-index: 1; }
.uv-stoh:has(.uv-stoh-karta--1:focus-visible) .uv-stoh-karta--2::after,
.uv-stoh:has(.uv-stoh-karta--2:focus-visible) .uv-stoh-karta--1::after { opacity: .5; }
.uv-stoh:has(:focus-visible) .uv-stoh-karta:focus-visible { z-index: 2; }

/* mobil a obmedzený pohyb: karta ako riadok (fotka vľavo, text, šípka) */
@media (max-width: 1100px), (prefers-reduced-motion: reduce) {
  .uv-stoh-karta { height: 84px; border-radius: 20px; box-shadow: 0 16px 32px -22px rgba(51, 65, 92, .6); }
  .uv-stoh-foto { right: auto; width: 84px; }
  .uv-stoh-foto::after, .uv-stoh-odznak { display: none; }
  .uv-stoh-text { left: 98px; right: 56px; top: 0; bottom: 0; align-content: center; gap: 1px; }
  .uv-stoh-text small { font-size: 10px; letter-spacing: .12em; }
  .uv-stoh-text b { font-size: 15px; }
  .uv-stoh-text > span { font-size: 12px; }
  .uv-stoh-cta { right: 12px; bottom: auto; top: 50%; width: 34px; height: 34px; margin-top: -17px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .hx-fakty { display: none !important; }
  .uv-stoh { position: relative; right: auto; bottom: auto; width: 100%; height: 96px; margin-top: 18px; }
  .uv-stoh-karta { animation-name: uv-stoh-m; }
  .uv-stoh:has(.uv-stoh-karta--1:focus-visible) .uv-stoh-karta--2,
  .uv-stoh:has(.uv-stoh-karta--2:focus-visible) .uv-stoh-karta--1 { transform: translate3d(0, -12px, 0) scale(.93); }
}
@keyframes uv-stoh-m {
  0%, 44%  { transform: translate3d(0, 0, 0) scale(1); opacity: 1; z-index: 2;
             animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  45%      { z-index: 3; }
  48%      { transform: translate3d(-64px, 0, 0) scale(.97); opacity: 0; z-index: 3; }
  50%      { transform: translate3d(0, -12px, 0) scale(.93); opacity: 0; z-index: 1; }
  60%, 94% { transform: translate3d(0, -12px, 0) scale(.93); opacity: 1; z-index: 1;
             animation-timing-function: cubic-bezier(.25, .1, .2, 1); }
  100%     { transform: translate3d(0, 0, 0) scale(1); opacity: 1; z-index: 2; }
}

/* mobil: nadtitulok na jeden riadok, podnadpis len prvá veta */
.hx-kicker-kratke { display: none; }
@media (max-width: 860px) {
  .hx-kicker-dlhe, .hx-sub-dlhe { display: none; }
  .hx-kicker-kratke { display: inline; }
}
/* úzky telefón: v karte sa štítok, názov aj údaj nezmestili (pri 360 px pretiekli hore aj dole) —
   štítok preč, menšia fotka, názov na jeden riadok, údaj najviac na dva */
@media (max-width: 560px) {
  .uv-stoh-foto { width: 72px; }
  .uv-stoh-text { left: 84px; right: 54px; }
  .uv-stoh-text small { display: none; }
}

/* LCP: fotky v kartách sú najväčšie obrázky v úvode. Keď nabiehali z nuly (kontajner cez .hin od 0,8 s,
   zadná karta vo fáze 50→60 % cyklu až v 1,2 s), stala sa LCP fotka v 1,2 s namiesto nadpisu v 0,6 s
   (lcp.mjs 1440 px, 29. 9.). Preto: kontajner len dosadne pohybom bez priehľadnosti a cyklus štartuje
   o 1,2 s ďalej, keď už je predná karta vpredu a zadná za ňou — obe viditeľné od prvého vykreslenia.
   Odstup kariet ostáva pol cyklu, takže sa striedajú rovnako ako v návrhu. */
@keyframes uv-stoh-dosad { from { transform: translateY(22px); } to { transform: none; } }
.uv-stoh.hin { opacity: 1; animation: uv-stoh-dosad 1s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both; }
.uv-stoh .uv-stoh-karta { --f: -1.2s; }
.uv-stoh .uv-stoh-karta--2 { --f: -7.2s; }

/* obmedzený pohyb: nič sa neposúva, obe vyšetrenia viditeľné naraz */
@media (prefers-reduced-motion: reduce) {
  .uv-stoh *, .uv-stoh *::after { animation: none !important; }
  .uv-stoh { height: auto; display: grid; gap: 10px; }
  .uv-stoh-karta { position: relative; inset: auto; }
}