/* ─────────────────────────────────────────────────────────────────────────────
   Ukážka appky zmaturuj.app v službe 02 „Aplikácie Android a iOS“ (sluzby.html).
   Makety telefónov sú prevzaté 1:1 z webu zmaturuj.app (light mode) a žijú
   v shadow DOM (štýly v assets/zmx-phone.css), aby sa nebili s globálnymi
   triedami tohto webu (.tag, .chip, .in …) a naopak. Tento súbor rieši len to,
   čo shadow DOM nevie: písmo (@font-face musí byť v dokumente) a rozmer
   telefónov odvodený od javiska .svcx__stage (container units).
   ───────────────────────────────────────────────────────────────────────────── */

/* Space Grotesk – nadpisové písmo appky (SIL OFL, assets/fonts/SpaceGrotesk-OFL.txt). */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/space-grotesk-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Hostiteľ vypĺňa javisko. Telefóny ostávajú v natívnej veľkosti z webu zmaturuj.app
   (domov 300 × 626,29 px, prehliadka 330 × 691,25 px) a zmenšujú sa celé cez scale();
   mierka k = želaná výška na javisku (cqh = .svcx__stage) / natívna výška. tan(atan2())
   prevedie pomer dvoch dĺžok na číslo; prehliadače bez nej dostanú k z assets/zmx.js. */
.zmx-host {
  position: absolute; inset: 0;
  /* Premenné paluby (--u, --sc, --x …), ktoré app.js prepisuje každý snímok, sa tu zastavia na
     konštantách – inak by sa dedili do celého shadow DOM a každý snímok by prepočítaval štýly
     všetkých prvkov telefónu (sekanie pri prepínaní panelov). Rozmer slotov a mierku telefónov
     nastavuje assets/zmx.js priamo na prvkoch; CSS vzorce nižšie sú len východisko pred skriptom. */
  --u: 0px; --deck-u: 0px; --sc: 1; --x: 0; --ry: 0deg; --op: 1;
  --zmx-gap: 3cqw;
  --zmx-pad: 4cqh;
  --zmx-h-hero: 78cqh;
  --zmx-h-tour: 92cqh;
  --zmx-k-hero: tan(atan2(var(--zmx-h-hero), 626.29px));
  --zmx-k-tour: tan(atan2(var(--zmx-h-tour), 691.25px));
}

/* Úzke javisko (telefón v doku, tablet na výšku): jeden telefón v strede, popisok nad ním. */
@container (max-width: 520px) {
  .zmx-host { --zmx-hero-display: none; --zmx-h-tour: 82cqh; --zmx-pad: 3cqh; }
}

/* Paluba na domovskej stránke (index.html): telefón appky je jeden z panelov. Panel nie je
   okno prehliadača, má pomer strán rámu telefónu (330 × 691,25 px ≈ 20,3 × 42,5 jednotky --u)
   a jediný telefón ho vyplní celý.
   Paluba zväčšuje aktívny panel cez --sc (na mobile až 2,8×). Keby to ostalo v transformácii
   panelu, telefón by sa rasterizoval malý a iba roztiahol – bol by rozmazaný. Panel si preto
   zväčšenie berie do rozloženia: jeho --u je --u paluby × --sc, transformácia posúva podľa
   pôvodnej jednotky paluby a scale() v nej nie je. Mierku telefónu (--zmx-k-tour) potom
   dopočíta assets/zmx.js z výšky panelu – bez container-query jednotiek, ktoré sa v shadow DOM
   nesprávajú vo všetkých prehliadačoch rovnako. */
.deck { --deck-u: var(--u); }
.deck__item.side--zmx {
  --pw: 20.3;
  --u: calc(var(--deck-u) * var(--sc, 1));
  transform: translate3d(calc(var(--deck-u) * var(--x, 0)), 0, 0) rotateY(var(--ry, 0deg));
}
/* Obsah panelu je plochá 2D skupina, nie súčasť 3D scény paluby – kreslí sa všade rovnako. */
.deck__item.side--zmx > .zmx-host { transform-style: flat; isolation: isolate; }
.zmx-host--one { --zmx-hero-display: none; --zmx-pad: 0; --zmx-k-tour: .5; }

/* Popisok: ktorú časť appky práve ukazuje pravý telefón. */
.zmx-cap {
  position: absolute; left: 3.2cqw; top: 3.2cqw; z-index: 2;
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0; padding: .55em .95em;
  border-radius: 999px; border: 1px solid rgba(27, 22, 38, .10);
  background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #1B1626; font: 500 clamp(10px, 2.05cqw, 13px)/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: .01em; white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms ease;
}
.zmx-cap i { width: .5em; height: .5em; border-radius: 50%; background: #534AB7; box-shadow: 0 0 0 0 rgba(83, 74, 183, .45); animation: zmxPulse 2.2s ease-out infinite; }
.zmx-cap.is-swap { opacity: 0; transform: translateY(-.25em); }
@keyframes zmxPulse { 0% { box-shadow: 0 0 0 0 rgba(83, 74, 183, .45); } 70% { box-shadow: 0 0 0 .55em rgba(83, 74, 183, 0); } 100% { box-shadow: 0 0 0 0 rgba(83, 74, 183, 0); } }
@container (max-width: 520px) {
  .zmx-cap { left: 0; right: 0; top: 2.5cqh; width: max-content; margin: 0 auto; font-size: clamp(9px, 2.6cqw, 12px); }
}
/* Dva telefóny (javisko širšie než 520 px): popisok sedí nad stredom ľavého, nižšieho telefónu,
   takže oba stĺpce začínajú približne v rovnakej výške a popisok nevisí v rohu javiska.
   Rozmery počíta assets/zmx.js z výšky javiska h: ľavý telefón má výšku .78h a šírku
   300/626.29 × .78h = .37364h, pravý šírku 330/691.25 × .92h = .43920h, medzera --zmx-gap 3cqw,
   spodný okraj --zmx-pad 4cqh. Stred ľavého = 50cqw − (šírka skupiny)/2 + polovica ľavého
   = 48.5cqw − 21.96cqh; jeho vrch = 100 − 4 − 78 = 18cqh od vrchu javiska. Pri zmene týchto
   pomerov v zmx.js alebo vyššie treba prepočítať aj tieto dve čísla.
   Medzera nad telefónom rastie s javiskom (14 px pri výške 588 px, najmenej 8 px).
   Posun na stred cez `translate`, nie `transform` – ten používa výmena popisku (.is-swap). */
@container (min-width: 521px) {
  .zmx-cap { top: auto; right: auto; bottom: calc(82cqh + max(8px, 2.4cqh)); left: calc(48.5cqw - 21.96cqh); translate: -50% 0; }
}