/* ═══════════════════════════════════════════════════════════════════════════
   Úvod na celou obrazovku — noční město a film (app/templates/uvod/film.php)
   ═══════════════════════════════════════════════════════════════════════════

   TŘI VRSTVY, ŽÁDNÝ RÁMEČEK
     1. .f-scena      pozadí od okraje k okraji: obloha, hvězdy, paprsky,
                      dvě vrstvy panelákového města, perspektivní podlaha,
                      stoupající jiskry. Okna na obzoru se rozsvěcují
                      v téže vteřině, kdy ve filmu přijde platba.
     2. .film-okno    plátno s oknem aplikace ve 3D perspektivě; sleduje
                      kurzor (skript nastavuje --px / --py).
     3. .f-titulky    titulky se mění vlevo pod nadpisem. Bez lišty přehrávače.
   Prvek `figure.film` má `display: contents`, takže tyhle vrstvy leží
   přímo v mřížce úvodu — a skript přesto hlídá JEDNU společnou časovou osu.

   JEDNA ČASOVÁ OSA, 20 s. Procenta v keyframes jsou čas filmu: 1 % = 200 ms.
     0–17,5 %     dřív          17,5–40 %   Nemovitosti    40–62,5 %  Finance
     62,5–82,5 %  Přehled       82,5–100 %  Tenants
   Postupné nástupy dělá `--zp` (posun prvku v ose). POZOR: zpoždění platí
   jen na první průchod, ale protože se celá osa posune o stejnou hodnotu,
   posun drží i v dalších smyčkách.

   PLÁTNO V JEDNOTKÁCH `em`. Font-size plátna = šířka / 56, takže se okno
   zvětšuje jako obraz a text zůstává ostrý.
     na šířku   56 × 42 em        na výšku (telefon)   40 × 38 em

   PRAVIDLA KLIDNÉHO POHYBU
     • žádný přechod kratší než 0,6 s, přesuny 0,7–0,9 s, nic nepřestřeluje,
     • mezi dvěma změnami aspoň 0,7 s klidu, titulek visí ≥ 3 s,
     • jen transform a opacity; velké vrstvy mají will-change.
   Mimo obrazovku film i pozadí stojí (skript), při omezeném pohybu je
   vidět jeden snímek.
   ═══════════════════════════════════════════════════════════════════════════ */

.film {
  display: contents;
  --film-t: 20s;
  --ef-in:   cubic-bezier(.22, .61, .36, 1);   /* dosednutí */
  --ef-move: cubic-bezier(.65, 0, .35, 1);     /* přesun ze stavu do stavu */
  --ef-sani: cubic-bezier(.55, 0, .75, .2);    /* zrychlující nasátí útržků */
  --f-noc: #12203A;
  --f-tlum: #B4BFD3;
  --f-lime: #C8F250;
  --f-fial: #A48BE0;
  /* barvy aplikace (assets/pm.css) — okno má vypadat jako ona */
  --ap-platno: #ECEEF3;
  --ap-ink: #0D1117;
  --ap-ink-2: #55606C;
  --ap-ink-3: #68717E;
  --ap-linka: #E5E8EC;
  --ap-noc: #12203A;
  --ap-akce: #C8F250;
  --ap-pos: #1F7A52;  --ap-pos-bg: #E6F2EC;
  --ap-neg: #C43A33;  --ap-neg-bg: #FBEBEA;
  --ap-warn: #A85E0A; --ap-warn-bg: #FBF1E0;
  --ap-acc: #12203A;  --ap-acc-bg: #EAEEF4;
}

/* Společná časová osa */
.a {
  animation-duration: var(--film-t);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--ef-in);
  animation-delay: var(--zp, 0s);
}

/* ═══ 1. POZADÍ ═══════════════════════════════════════════════════════════ */
.f-scena {
  --podlaha: 19%;
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #040814 0%, #0A1330 36%, #13214A 68%, #12203A 100%);
}
/* Atmosféra: fialová záře nad městem, slabá limetka vlevo dole, mlha u země. */
.sc-nebe {
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 58% at 74% 44%, rgba(91, 63, 163, .42), transparent 70%),
    radial-gradient(38% 40% at 14% 80%, rgba(200, 242, 80, .07), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(110, 79, 160, .38), transparent 72%);
}
/* Hvězdy: stíny jednoho 2px bodu (generuje PHP), druhá skupina bliká jinak. */
.sc-hvezdy { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%;
             animation-name: f-sc-mrk; animation-duration: var(--dur, 8s); animation-timing-function: ease-in-out; }
@keyframes f-sc-mrk { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Světelné paprsky: dva široké pásy, které se pomalu kývají. */
.sc-paprsek {
  position: absolute; top: -25%; height: 160%; width: 20vw; transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(164, 139, 224, .11), transparent);
  animation-name: f-sc-paprsek; animation-timing-function: ease-in-out;
}
.sc-p1 { left: 40%; --a: 17deg; }
.sc-p2 { left: 66%; --a: 27deg; width: 13vw; --zp: -8s; }
@keyframes f-sc-paprsek { 0%, 100% { transform: rotate(calc(var(--a) - 5deg)); } 50% { transform: rotate(calc(var(--a) + 6deg)); } }

/* Město: dvě vrstvy, vzdálenější světlejší a pomalejší. */
.sc-mesto { position: absolute; left: 0; right: 0; bottom: calc(var(--podlaha) - 1px); height: 46%; }
.sc-vrstva { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.sc-daleko { opacity: .95; animation-name: f-sc-drift-d; animation-timing-function: ease-in-out; }
.sc-blizko { animation-name: f-sc-drift-b; animation-timing-function: ease-in-out; }
@keyframes f-sc-drift-d { 0%, 100% { transform: translateX(-.7%); } 50% { transform: translateX(.7%); } }
@keyframes f-sc-drift-b { 0%, 100% { transform: translateX(.9%); }  50% { transform: translateX(-.9%); } }

/* Pomalu se rozsvěcující a zhasínající okna (ostatní nájemníci). */
.sc-jiskra { opacity: 0; animation-name: f-sc-jiskra; animation-timing-function: ease-in-out; }
.sc-j-a { fill: #FFD27A; } .sc-j-v { fill: #A48BE0; } .sc-j-w { fill: #DDE6FF; }
@keyframes f-sc-jiskra { 0%, 38% { opacity: 0; } 46%, 62% { opacity: .85; } 72%, 100% { opacity: 0; } }

/* Okna, která se rozsvítí v den platby. Zpoždění --zp = rozestup plateb. */
.sc-platba { opacity: 0; animation-name: f-sc-platba; }
.sc-pl-pay  { fill: var(--f-lime); filter: drop-shadow(0 0 5px #C8F250) drop-shadow(0 0 14px rgba(200, 242, 80, .7)); }
.sc-pl-chyb { fill: #FF6B5E;       filter: drop-shadow(0 0 5px #FF6B5E) drop-shadow(0 0 14px rgba(255, 107, 94, .7)); }
@keyframes f-sc-platba { 0%, 46.4% { opacity: 0; } 48%, 82% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* Podlaha: perspektivní rovina, po které se k divákovi sune mřížka. */
.sc-podlaha {
  position: absolute; left: -30%; right: -30%; bottom: 0; height: var(--podlaha); overflow: hidden; perspective: 260px;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 100%);
          mask-image: linear-gradient(to top, #000 25%, transparent 100%);
}
.sc-podlaha::before { /* obzor */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--f-fial), var(--f-lime), var(--f-fial), transparent); opacity: .8; filter: blur(.6px);
}
.sc-rovina { position: absolute; left: 0; right: 0; top: 0; height: 280%; transform-origin: 50% 0; transform: rotateX(66deg); overflow: hidden; }
.sc-jizda {
  position: absolute; left: 0; right: 0; top: -56px; bottom: 0; will-change: transform;
  background:
    linear-gradient(rgba(164, 139, 224, .55) 1.5px, transparent 1.5px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(164, 139, 224, .42) 1.5px, transparent 1.5px) 50% 0 / 96px 100%;
  animation-name: f-sc-jizda; animation-duration: 3.2s; animation-timing-function: linear;
}
@keyframes f-sc-jizda { from { transform: translateY(0); } to { transform: translateY(56px); } }

/* Jiskry: data stoupají městem vzhůru. */
.sc-mote {
  position: absolute; left: var(--x); bottom: 8%; width: var(--r); height: var(--r); border-radius: 50%;
  background: var(--f-fial); box-shadow: 0 0 8px var(--f-fial); opacity: 0;
  animation-name: f-sc-mote; animation-duration: var(--dur); animation-timing-function: linear;
}
.sc-mote-l { background: var(--f-lime); box-shadow: 0 0 8px var(--f-lime); }
@keyframes f-sc-mote { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .85; } 80% { opacity: .55; } 100% { opacity: 0; transform: translateY(calc(-1 * var(--v))); } }

/* Vinětace a jemné zrno — filmový dojem, nehýbe se. */
.sc-vinak {
  position: absolute; inset: 0;
  /* Zleva ztmaveno kvůli čitelnosti textu nad městem, k okrajům vinětace. */
  background:
    linear-gradient(90deg, rgba(3, 6, 16, .78) 0%, rgba(3, 6, 16, .5) 26%, transparent 46%),
    radial-gradient(125% 95% at 56% 46%, transparent 52%, rgba(2, 5, 12, .7) 100%);
}
.sc-zrno {
  position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ═══ 2. PLÁTNO S OKNEM APLIKACE ══════════════════════════════════════════ */
.film-okno {
  grid-area: stage; position: relative; z-index: 1; width: 100%; min-width: 0; align-self: center;
  aspect-ratio: 56 / 42; container-type: inline-size; perspective: 1700px;
}
/* Okno je nakloněné a jemně se otáčí za kurzorem (--px, --py ∈ <−1; 1>). */
.film-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateY(calc(-11deg + var(--px, 0) * 5deg)) rotateX(calc(4deg + var(--py, 0) * -4deg));
  transition: transform .7s var(--ef-in);
}
.film-platno { position: absolute; inset: 0; line-height: 1.3; font-size: 1.1vw; font-size: calc(100cqw / 56); }
:where(.film-platno) p { margin: 0; }   /* :where = nulová váha, třídy níž ji přebijí */
.film-platno .u-mono { word-spacing: -.3em; }

.f-utrzek, .f-app, .f-zaver {
  position: absolute; font-size: calc(var(--fs, 1) * 1em);
  left: calc(var(--x) * 1em / var(--fs, 1)); top: calc(var(--y) * 1em / var(--fs, 1));
}

/* Záře za oknem a rázové vlny: pokaždé, když přijde platba, se od okna rozběhne kruh. */
.f-zare {
  position: absolute; left: 50%; top: 50%; width: 78em; height: 62em; margin: -31em 0 0 -39em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 242, 80, .24), rgba(110, 79, 160, .26) 46%, transparent 72%);
  will-change: opacity; animation-name: f-zare;
}
@keyframes f-zare { 0%, 38% { opacity: .35; } 46%, 62% { opacity: .85; } 70%, 100% { opacity: .35; } }
.f-vlna {
  position: absolute; left: 50%; top: 50%; width: 30em; height: 30em; margin: -15em 0 0 -15em; border-radius: 50%;
  border: .16em solid var(--f-lime); opacity: 0; will-change: transform, opacity; animation-name: f-vlna;
}
@keyframes f-vlna { 0%, 46.4% { opacity: 0; transform: scale(.55); } 47.2% { opacity: .75; } 52.5%, 100% { opacity: 0; transform: scale(2.1); } }

/* ── Titulky vlevo pod nadpisem ────────────────────────────────────────── */
.f-titulky { grid-area: tit; align-self: start; min-width: 0; }
.f-titulky-okno { position: relative; height: 4.9em; font-size: clamp(21px, 1.95vw, 31px); }
.f-tit {
  position: absolute; left: 0; top: 0; width: 100%;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.16; color: #fff; text-wrap: balance;
  text-shadow: 0 .06em .7em rgba(4, 8, 20, .8);
}
.f-tit-1 { animation-name: f-tit-1; } .f-tit-2 { animation-name: f-tit-2; }
.f-tit-3 { animation-name: f-tit-3; } .f-tit-4 { animation-name: f-tit-4; } .f-tit-5 { animation-name: f-tit-5; }
@keyframes f-tit-1 { 0%, 2%  { opacity: 0; transform: translateY(.45em); } 5.5%, 14%    { opacity: 1; transform: none; } 16.5%, 100% { opacity: 0; transform: translateY(-.3em); } }
@keyframes f-tit-2 { 0%, 18% { opacity: 0; transform: translateY(.45em); } 21.5%, 37.5% { opacity: 1; transform: none; } 40%, 100%   { opacity: 0; transform: translateY(-.3em); } }
@keyframes f-tit-3 { 0%, 42% { opacity: 0; transform: translateY(.45em); } 45.5%, 60%   { opacity: 1; transform: none; } 62.5%, 100% { opacity: 0; transform: translateY(-.3em); } }
@keyframes f-tit-4 { 0%, 65% { opacity: 0; transform: translateY(.45em); } 68.5%, 80%   { opacity: 1; transform: none; } 82.5%, 100% { opacity: 0; transform: translateY(-.3em); } }
@keyframes f-tit-5 { 0%, 85% { opacity: 0; transform: translateY(.45em); } 88.5%, 97%   { opacity: 1; transform: none; } 99.8%, 100% { opacity: 0; transform: translateY(-.3em); } }
.film-pozn { margin: 1.2rem 0 0; max-width: 34ch; font-size: 12.5px; line-height: 1.5; color: #B4BFD3; text-shadow: 0 0 .8em rgba(4, 8, 20, .9); }

/* ── 1. Dřív: útržky ───────────────────────────────────────────────────── */
.f-utrzek {
  --fs: 1.25; color: #2B3440; background: #fff; padding: .8em 1em; border-radius: .25em;
  box-shadow: 0 1.2em 2.4em -1em rgba(0, 0, 0, .65); will-change: transform, opacity;
  animation-name: f-chaos;
}
.f-u1 { --x: 1;  --y: 5;  --r: -5deg; --ox: -2em;   --oy: 1.5em;  --dx: .9em;  --dy: -.4em; --cx: 22em;  --cy: 9em;
        --fs: 1.1; display: grid; grid-template-columns: repeat(3, auto); padding: 0;
        font-family: var(--u-mono); font-weight: 500; line-height: 1.2; }
.f-u1 span { padding: .5em .7em; border: 1px solid #C9D0D9; margin: -1px 0 0 -1px; }
.f-u1 .f-xls-hlava { grid-column: 1 / -1; background: #E8F0E9; color: #1D5E33; font-weight: 600; }
.f-xls-zluta { background: #FFF2A8; }
.f-xls-chyba { color: #B42318; font-weight: 600; }
.f-u2 { --x: 38; --y: 2;  --r: 5deg;  --ox: 2em;    --oy: -1.5em; --dx: -.7em; --dy: .5em;  --cx: -12em; --cy: 15em;
        background: #FFE873; font-weight: 600; line-height: 1.35; border-radius: .1em; }
.f-u3 { --x: 40; --y: 28; --r: -8deg; --ox: 2em;    --oy: 2em;    --dx: -.5em; --dy: -.6em; --cx: -15em; --cy: -9em;
        --fs: 1.05; font-family: var(--u-mono); font-weight: 500; line-height: 1.5; background: #F7F4EC; padding: 1em 1.2em;
        clip-path: polygon(0 0, 100% 0, 100% 94%, 90% 100%, 80% 94%, 70% 100%, 60% 94%, 50% 100%, 40% 94%, 30% 100%, 20% 94%, 10% 100%, 0 94%); }
.f-u4 { --x: 3;  --y: 29; --r: 4deg;  --ox: -1.5em; --oy: 2em;    --dx: .5em;  --dy: -.7em; --cx: 18em;  --cy: -10em;
        width: 9em; padding: 0; overflow: hidden; text-align: center; line-height: 1.35; }
.f-u4 b { display: block; background: #C43A33; color: #fff; padding: .35em; letter-spacing: .1em; }
.f-u4 span { display: block; padding: .7em .6em; font-style: italic; }
@keyframes f-chaos {
  0%    { opacity: 0; transform: translate(calc(var(--ox) / var(--fs)), calc(var(--oy) / var(--fs))) rotate(var(--r)) scale(1.04); }
  5%    { opacity: 1; transform: rotate(var(--r)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  12.5% { opacity: 1; transform: translate(calc(var(--dx) / var(--fs)), calc(var(--dy) / var(--fs))) rotate(calc(var(--r) * 1.3));
          animation-timing-function: var(--ef-sani); }
  17%, 100% { opacity: 0; transform: translate(calc(var(--cx) / var(--fs)), calc(var(--cy) / var(--fs))) rotate(0deg) scale(.2); }
}

/* ── Okno aplikace ─────────────────────────────────────────────────────── */
.f-app {
  --x: 5; --y: 3; width: 46em; height: 33em;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; color: var(--ap-ink);
  background: var(--ap-platno); border-radius: 1em; overflow: hidden;
  box-shadow: 0 0 0 .1em rgba(255, 255, 255, .16), 0 0 5em -.5em rgba(164, 139, 224, .55), 0 3.5em 6em -2em rgba(0, 0, 0, .75);
  will-change: transform, opacity; animation-name: f-app;
}
@keyframes f-app {
  0%, 13.5%  { opacity: 0; transform: translateY(1.2em) scale(.96); }
  17.5%, 82% { opacity: 1; transform: none; }
  86%, 100%  { opacity: 0; transform: scale(.96); }
}
.ap-telo { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); height: 100%; }

/* Panel — tmavý, s limetkovou dlaždicí aktivní stránky, jako v aplikaci. */
.ap-panel { background: var(--ap-noc); padding-top: 1em; display: flex; flex-direction: column; align-items: center; }
.ap-logo { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .7em; background: #1C0B36; margin-bottom: 1.6em; }
.ap-logo svg { width: 2em; height: 2em; }
.ap-nav { position: relative; display: flex; flex-direction: column; gap: .6em; }
.ap-nav-pol { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; color: #93A0B3; }
.ap-nav-pol svg { width: 1.2em; height: 1.2em; }
.ap-nav-akt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ap-noc); }
.ap-akt {
  position: absolute; left: 0; top: 0; width: 2.6em; height: 2.6em; border-radius: .75em; background: var(--ap-akce);
  box-shadow: 0 0 1.2em rgba(200, 242, 80, .55); will-change: transform; animation-name: f-ap-akt;
}
@keyframes f-ap-akt {
  0%, 39.8%    { transform: translateY(6.4em); animation-timing-function: var(--ef-move); }
  42%, 63.2%   { transform: translateY(9.6em); animation-timing-function: var(--ef-move); }
  65.6%, 99.5% { transform: none; }
  100%         { transform: translateY(6.4em); }
}
.ap-nav-akt-nem { animation-name: f-akt-nem; }
.ap-nav-akt-fin { animation-name: f-akt-fin; }
.ap-nav-akt-pre { animation-name: f-akt-pre; }
@keyframes f-akt-nem { 0%, 40%   { opacity: 1; } 41%, 99.5%   { opacity: 0; } 100%       { opacity: 1; } }
@keyframes f-akt-fin { 0%, 41.2% { opacity: 0; } 42%, 63.5%   { opacity: 1; } 64.3%, 100% { opacity: 0; } }
@keyframes f-akt-pre { 0%, 64.8% { opacity: 0; } 65.6%, 99.5% { opacity: 1; } 100%       { opacity: 0; } }

.ap-hlavni { position: relative; min-width: 0; }
.ap-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 3em; padding: 0 1.4em; background: #fff; border-bottom: 1px solid var(--ap-linka); }
.ap-hlavicka-znacka { font-weight: 800; font-size: .95em; letter-spacing: -.02em; }
.ap-hlavicka-znacka i { font-style: normal; color: #6E4FA0; }
.ap-hledat { display: flex; align-items: center; gap: .5em; width: 15em; white-space: nowrap; overflow: hidden; padding: .45em .8em; border: 1px solid var(--ap-linka); border-radius: .6em; font-size: .8em; color: var(--ap-ink-3); }
.ap-hledat svg { width: 1em; height: 1em; }
.ap-stranky { position: absolute; inset: 3em 0 0; }
.ap-str { position: absolute; inset: 0; padding: 1.2em 1.5em; will-change: transform, opacity; }

.ap-nadpis { font-size: 1.9em; font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-bottom: .45em; }
.ap-nadpis small { font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--ap-ink-2); margin-left: .5em; }

.ap-kpi-rada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; margin-bottom: .9em; }
.ap-kpi-rada-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ap-kpi { position: relative; padding: .8em 1em; background: #fff; border-radius: .8em; box-shadow: 0 0 0 1px var(--ap-linka); }
.ap-kpi small { display: block; font-size: .64em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ap-ink-3); }
.ap-kpi b { display: block; font-size: 1.45em; font-weight: 600; letter-spacing: -.03em; margin-top: .15em; white-space: nowrap; }
.ap-kpi b i { font-style: normal; font-size: .55em; }
.ap-kpi .ap-kpi-pod { margin-top: .3em; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ap-kpi-ikona { display: flex; align-items: center; gap: .7em; }
.ap-kpi-dlazdice { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; background: var(--ap-acc-bg); color: var(--ap-acc); }
.ap-kpi-dlazdice svg { width: 1.1em; height: 1.1em; }
.ap-kpi-tma { background: var(--ap-noc); box-shadow: none; color: #fff; }
.ap-kpi-tma small { color: #93A0B3; }
.ap-kpi-neg { background: #FFF6F5; box-shadow: 0 0 0 1px #F0CBC8; color: var(--ap-neg); }
.ap-kpi-neg small { color: var(--ap-neg); }
.ap-obsaz { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25em; margin-top: .45em; }
.ap-obsaz i { height: .3em; border-radius: .3em; background: var(--ap-pos); }

.ap-karta { padding: .9em 1.1em; background: #fff; border-radius: .8em; box-shadow: 0 0 0 1px var(--ap-linka); }
.ap-karta-nadpis { font-size: .95em; font-weight: 800; letter-spacing: -.01em; margin-bottom: .5em; display: flex; align-items: center; gap: .5em; }
.ap-pocet { font-size: .75em; font-weight: 700; padding: .05em .55em; border-radius: 1em; background: #F1F2F6; color: var(--ap-ink-2); }

/* Tabulka: každý řádek je vlastní mřížka se stejnými sloupci. */
.ap-tab { display: grid; font-size: .86em; isolation: isolate; }
.ap-tab-nem { --sloupce: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .85fr) 6.6em; }
.ap-tab-fin { --sloupce: minmax(0, 1.5fr) minmax(0, .8fr) 11em; }
.ap-tab-hlavy, .ap-tab-radek { position: relative; display: grid; grid-template-columns: var(--sloupce); align-items: center; }
.ap-tab-hlavy { padding: .3em 0 .5em; font-size: .78em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ap-ink-3); border-bottom: 1px solid var(--ap-linka); }
.ap-tab-radek { min-height: 3.3em; border-bottom: 1px solid #EEF0F3; }
.ap-tab-radek > span { display: flex; align-items: center; padding-right: .6em; min-width: 0; }
.ap-byt { gap: .7em; }
.ap-byt b { display: block; font-weight: 700; white-space: nowrap; }
.ap-byt small { display: block; font-size: .85em; color: var(--ap-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-byt-ikona { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: .5em; background: #F1F2F6; color: var(--ap-ink-3); }
.ap-byt-ikona svg { width: 1.1em; height: 1.1em; }
.ap-pill { display: inline-block; padding: .25em .7em; border-radius: 1em; font-size: .9em; font-weight: 700; white-space: nowrap; }
.ap-pill-ok   { color: var(--ap-pos); background: var(--ap-pos-bg); }
.ap-pill-neg  { color: var(--ap-neg); background: var(--ap-neg-bg); }
.ap-pill-ceka { color: var(--ap-ink-2); background: #F1F2F6; }

/* ── 2. Nemovitosti ────────────────────────────────────────────────────── */
.ap-str-nem { animation-name: f-str-nem; }
@keyframes f-str-nem { 0%, 40% { opacity: 1; transform: none; } 42.5%, 99.6% { opacity: 0; transform: translateY(-.5em); } 100% { opacity: 1; transform: none; } }
.ap-str-nem .ap-kpi       { animation-name: f-ap-vstup; }
.ap-str-nem .ap-tab-radek { animation-name: f-ap-radek; }
@keyframes f-ap-vstup { 0%, 16.5% { opacity: 0; transform: translateY(.6em); } 20%, 100% { opacity: 1; transform: none; } }
@keyframes f-ap-radek { 0%, 18.5% { opacity: 0; transform: translateY(.6em); } 22%, 100% { opacity: 1; transform: none; } }

/* ── 3. Finance ────────────────────────────────────────────────────────── */
.ap-str-fin { animation-name: f-str-fin; }
@keyframes f-str-fin { 0%, 41.5% { opacity: 0; transform: translateY(.6em); } 45%, 63.5% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-.5em); } }
.ap-cislo { position: relative; height: 1.25em; }
.ap-cislo span { position: absolute; left: 0; top: 0; }
.ap-c-prvni    { animation-name: f-c-prvni; }
.ap-c-krok     { animation-name: f-c-krok; }
.ap-c-posledni { animation-name: f-c-posledni; }
/* Číslo se přetočí s každou platbou: nové přichází zdola ve chvíli, kdy staré odchází nahoru. */
@keyframes f-c-prvni    { 0%, 46.4% { opacity: 1; transform: none; } 47.6%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes f-c-krok     { 0%, 46.4% { opacity: 0; transform: translateY(.35em); } 47.6%, 49.9% { opacity: 1; transform: none; } 51.1%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes f-c-posledni { 0%, 46.4% { opacity: 0; transform: translateY(.35em); } 47.6%, 100% { opacity: 1; transform: none; } }
.ap-pruh { display: block; height: .45em; margin-top: .55em; border-radius: 1em; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ap-pruh-plneni {
  display: block; height: 100%; border-radius: inherit; background: var(--ap-akce); transform-origin: 0 50%;
  animation-name: f-pruh; animation-timing-function: var(--ef-move);
}
@keyframes f-pruh {
  0%, 46.3%    { transform: scaleX(0); }
  47.8%, 49.8% { transform: scaleX(.227); }
  51.3%, 53.3% { transform: scaleX(.474); }
  54.8%, 56.8% { transform: scaleX(.633); }
  58.3%, 100%  { transform: scaleX(.968); }
}
.ap-fin-dluh { animation-name: f-fin-dluh; }
@keyframes f-fin-dluh { 0%, 57.5% { opacity: 0; transform: translateY(.6em); } 60.5%, 100% { opacity: 1; transform: none; } }
.ap-tab-radek > .ap-stav { display: grid; justify-items: start; }
.ap-stav > .ap-pill { grid-area: 1 / 1; }
.ap-pill-ceka.a { animation-name: f-pill-ceka; }
.ap-pill-novy   { animation-name: f-pill-novy; }
@keyframes f-pill-ceka { 0%, 46%   { opacity: 1; transform: none; } 47.2%, 100% { opacity: 0; transform: scale(.92); } }
@keyframes f-pill-novy { 0%, 46.6% { opacity: 0; transform: scale(.85); } 48.6%, 100% { opacity: 1; transform: none; } }
/* Řádek, do kterého právě přišla platba, krátce zesvětlá. */
.ap-zvyr {
  position: absolute; inset: 0 -.6em; z-index: -1; border-radius: .5em; background: rgba(200, 242, 80, .38);
  animation-name: f-zvyr; animation-timing-function: ease-in-out;
}
@keyframes f-zvyr { 0%, 45.8% { opacity: 0; } 47% { opacity: 1; } 50.5%, 100% { opacity: 0; } }

/* ── 4. Přehled ────────────────────────────────────────────────────────── */
.ap-str-pre { animation-name: f-str-pre; }
@keyframes f-str-pre { 0%, 64.5% { opacity: 0; transform: translateY(.6em); } 68%, 99.6% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ap-pozor { padding-bottom: .4em; }
.ap-pozor-pol {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8em; align-items: center;
  padding: .65em 0; border-top: 1px solid #EEF0F3; font-size: .88em;
  animation-name: f-pozor;
}
@keyframes f-pozor { 0%, 67.5% { opacity: 0; transform: translateX(1.2em); } 71%, 100% { opacity: 1; transform: none; } }
.ap-pozor-pol b { display: block; font-weight: 700; }
.ap-pozor-pol small { display: block; font-size: .85em; color: var(--ap-ink-2); }
.ap-pozor-ikona { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .55em; background: var(--t-bg); color: var(--t); }
.ap-pozor-ikona svg { width: 1.1em; height: 1.1em; }
.ap-pozor-meta { font-weight: 600; color: var(--t); white-space: nowrap; }
.ap-ton-neg  { --t: var(--ap-neg);  --t-bg: var(--ap-neg-bg); }
.ap-ton-warn { --t: var(--ap-warn); --t-bg: var(--ap-warn-bg); }
.ap-ton-acc  { --t: var(--ap-acc);  --t-bg: var(--ap-acc-bg); }
.ap-ton-ok   { --t: var(--ap-pos);  --t-bg: var(--ap-pos-bg); }

/* Kurzor: dojede k položce panelu, klikne, odejde. Souřadnice v em okna.
   Panel: první ikona (Přehled) má střed na 6,7 em, každá další o 3,2 em níž. */
.ap-kurzor {
  position: absolute; left: 0; top: 0; width: 1.6em; height: 1.6em; pointer-events: none;
  filter: drop-shadow(0 .15em .25em rgba(0, 0, 0, .3)); will-change: transform, opacity;
  animation-name: f-kurzor;
}
.ap-kurzor svg { width: 100%; height: 100%; }
@keyframes f-kurzor {
  0%, 34%      { opacity: 0; transform: translate(36em, 26em); }
  35.5%        { opacity: 1; transform: translate(36em, 26em); animation-timing-function: var(--ef-move); }
  39%          { opacity: 1; transform: translate(1.9em, 16.1em); animation-timing-function: ease-in-out; }
  39.6%        { opacity: 1; transform: translate(1.9em, 16.1em) scale(.8); }
  40.4%        { opacity: 1; transform: translate(1.9em, 16.1em); }
  42.5%, 57.5% { opacity: 0; transform: translate(5em, 18em); }
  57.6%        { opacity: 0; transform: translate(34em, 24em); }
  59%          { opacity: 1; transform: translate(34em, 24em); animation-timing-function: var(--ef-move); }
  62.6%        { opacity: 1; transform: translate(1.9em, 6.5em); animation-timing-function: ease-in-out; }
  63.2%        { opacity: 1; transform: translate(1.9em, 6.5em) scale(.8); }
  64%          { opacity: 1; transform: translate(1.9em, 6.5em); }
  66.5%, 100%  { opacity: 0; transform: translate(5em, 9em); }
}

/* ── 5. Tenants ────────────────────────────────────────────────────────── */
.f-zaver {
  --x: 0; --y: 0; right: 0; bottom: 0; display: grid; place-content: center; justify-items: center; text-align: center;
  will-change: transform, opacity; animation-name: f-zaver;
}
@keyframes f-zaver {
  0%, 84%     { opacity: 0; transform: scale(.94); }
  88.5%, 97%  { opacity: 1; transform: none; }
  99.8%, 100% { opacity: 0; transform: scale(1.02); }
}
.f-zaver-znacka { display: grid; place-items: center; width: 9em; height: 9em; border-radius: 2.1em; background: #1C0B36; padding: 1.5em;
                  box-shadow: 0 0 0 .12em rgba(255, 255, 255, .14), 0 0 6em rgba(164, 139, 224, .55); }
.f-zaver-znacka svg { width: 100%; height: 100%; }
.f-zaver-nazev { margin-top: .35em; font-size: 5.6em; font-weight: 800; letter-spacing: -.045em; color: #fff; line-height: 1; text-shadow: 0 0 .5em rgba(164, 139, 224, .5); }
.f-zaver-nazev span { color: #C6F135; }

/* ═══ 3. PAUZA ═══════════════════════════════════════════════════════════
   Lišta přehrávače je pryč. Zbývá klik na okno aplikace a tlačítko pro
   klávesnici, které se ukáže jen při zaostření (jako odkaz „Přeskočit"). */
.film-okno { cursor: default; }
.film-pauza { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.film-pauza[hidden] { display: none; }
.film-pauza:focus-visible {
  position: static; grid-area: tit; z-index: 2; width: auto; height: auto; clip-path: none; justify-self: start; align-self: end;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(10, 19, 48, .85);
  color: #fff; font: 600 14px/1 var(--u-pismo); cursor: pointer; outline-color: var(--f-lime);
}

/* ═══ TELEFON: plátno na výšku 40 × 38 em ═════════════════════════════════ */
@media (max-width: 899px) {
  .film-okno { aspect-ratio: 40 / 38; perspective: none; max-width: 600px; margin-inline: auto; }   /* na tabletu na výšku nesmí být okno větší než obrazovka telefonu */
  .film-tilt { transform: none; transition: none; }
  .film-platno { font-size: 2.5vw; font-size: calc(100cqw / 40); }

  .f-u1 { --x: 1.5; --y: 3;  --cx: 12em;  --cy: 11em; }
  .f-u2 { --x: 24;  --y: 2;  --cx: -9em;   --cy: 13em; }
  .f-u3 { --x: 22;  --y: 26; --cx: -6em;   --cy: -8em; }
  .f-u4 { --x: 3;   --y: 24; --cx: 12em;   --cy: -6em; }

  /* Okno je na telefonu „mobilní" aplikace: bez panelu, větší písmo. */
  .f-app { --x: 2; --y: 1.5; --fs: 1.3; width: calc(36em / 1.3); height: calc(34.6em / 1.3); }
  .ap-telo { grid-template-columns: minmax(0, 1fr); }
  .ap-panel, .ap-kurzor, .ap-hledat { display: none; }
  .ap-tab-radek > .ap-sl-v, .ap-tab-hlavy > .ap-sl-v { display: none; }   /* vedlejší sloupce; váha musí přebít `.ap-tab-radek > span` */
  .ap-pozor-pol:nth-of-type(n+4) { display: none; }                        /* čtvrté upozornění se do okna na výšku nevejde */
  .ap-str { padding: .9em 1em; }
  .ap-nadpis { font-size: 1.5em; }
  .ap-nadpis small { display: none; }
  .ap-kpi-rada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; margin-bottom: .6em; }
  .ap-kpi-rada > :nth-child(3) { display: none; }
  .ap-kpi { padding: .6em .7em; }
  .ap-kpi b { font-size: 1.25em; }
  .ap-kpi-ikona .ap-kpi-dlazdice { display: none; }
  .ap-tab-nem, .ap-tab-fin { --sloupce: minmax(0, 1fr) auto; }
  .ap-tab-radek { min-height: 2.45em; }
  .ap-kpi .ap-kpi-pod, .ap-pocet { display: none; }
  .ap-byt-ikona { display: none; }
  .ap-karta { padding: .7em .8em; }
  .ap-pozor-pol { padding: .5em 0; }
  .ap-pozor-pol small { display: none; }

  .f-zaver-znacka { width: 7em; height: 7em; }
  .f-zaver-nazev { font-size: 5em; }

  .f-titulky-okno { height: 4.6em; font-size: clamp(20px, 5.4vw, 28px); }
  .film-pozn { max-width: none; }
  .sc-paprsek { width: 40vw; }
  .sc-mesto { height: 34%; }
}

/* ═══ OMEZENÝ POHYB: jeden snímek (15,4 s — Přehled se všemi upozorněními) ═ */
@media (prefers-reduced-motion: reduce) {
  .a { animation-play-state: paused; animation-delay: calc(var(--zp, 0s) - 15.4s); }
  .film-tilt { transition: none; }
}