/* Telefon Mo.one: předrenderované tělo z Blenderu (scena-telefon.py, displej = díra)
   + živá obrazovka v perspektivě a rekonstrukce obrazovek aplikace.
   Sdílí /platby-a2a, podstránky pro podnikatele i domovská stránka. Skript: js/tel3d.js. */

/* ---------- telefon: předrenderované tělo (Blender, displej = díra) + živá HTML obrazovka ----------
   .tel3d-box má pevných 900 x 1200 px (rozlišení snímků), --k ho škáluje na šířku .tel3d; .tel-screen
   (585 x 1268 px) natáčí JS přes matrix3d z rohů displeje daného snímku (rohy.json). */
.tel3d { position: relative; width: 100%; aspect-ratio: 900 / 1200; --k: .3; overflow: hidden; }
.tel3d-box { position: absolute; left: 0; top: 0; width: 900px; height: 1200px; transform: scale(var(--k)); transform-origin: 0 0; }
.tel3d-canvas { position: absolute; inset: 0; width: 900px; height: 1200px; display: block; }
.tel-bezel { position: absolute; left: 0; top: 0; width: 585px; height: 1268px; background: #050507; border-radius: 104px; transform-origin: 0 0; }
.tel-screen {
  position: absolute; left: 0; top: 0; width: 585px; height: 1268px; overflow: hidden; background: #000; border-radius: 78px;
  transform-origin: 0 0;
  font-family: var(--font-sans); color: #16181D; font-size: 22px; line-height: 1.35;
}
.tel-obr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
/* skutečný screenshot z aplikace vložený do modelu (bez fází, vidět je pořád) */
.tel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tel-island { position: absolute; left: 34%; top: 1.1%; width: 32%; height: 4.1%; border-radius: 40px; background: #020204; }
.tel-html { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; background: #fff; padding: 0 30px; }
/* sklo: jemný přechod světla přes celý displej, ať obrazovka nesplývá s tělem */
.tel-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 38%, rgba(255,255,255,0) 60%, rgba(24,38,68,.05) 100%); }
.tel-status { display: flex; justify-content: space-between; padding: 26px 12px 0 22px; font-size: 26px; font-weight: 600; height: 92px; }
.tel-status--svetly { color: #fff; }
.tel-status-r { letter-spacing: .04em; }
.tel-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tel-back { font-size: 32px; font-weight: 600; }
.tel-pill { background: #16181D; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .06em; padding: 9px 16px; border-radius: 40px; }
.tel-mut { color: #6B7280; font-size: 22px; }
.tel-spin { width: 60px; height: 60px; border-radius: 50%; border: 5px solid #E3E6F2; border-top-color: var(--blue); margin: 420px auto 28px; }
.tel-spin--mala { display: inline-block; width: 22px; height: 22px; border-width: 3px; border-color: #F3D3B8; border-top-color: #E07B2A; margin: 0 0 -3px 6px; vertical-align: baseline; }
.tel-zaplatit .tel-mut { text-align: center; }
.tel-moneta { background: linear-gradient(170deg, #E2437A 0%, #B02A7D 38%, #5F2E9E 100%); padding: 0; }
.tel-moneta-karta { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; background: #fff; border-radius: 40px 40px 0 0; padding: 40px 36px 0; text-align: center; }
.tel-x { position: absolute; right: 30px; top: 24px; font-size: 30px; color: #9CA3AF; }
.tel-moneta-ikona { display: inline-block; font-size: 34px; color: #2F5BEA; margin-bottom: 4px; }
.tel-moneta-karta b { display: block; font-weight: 600; font-size: 26px; }
.tel-moneta-karta .tel-mut { display: block; font-size: 18px; margin-top: 6px; }
.tel-radky { display: grid; grid-template-columns: auto 1fr; gap: 28px 18px; margin: 40px 0 0; text-align: left; font-size: 21px; }
.tel-radky dt { color: #6B7280; margin: 0; }
.tel-radky dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.tel-moneta-btn { position: absolute; left: 36px; right: 36px; bottom: 70px; padding: 26px 0; border-radius: 22px; background: #2F5BEA; color: #fff; font-weight: 600; font-size: 24px; }
.tel-moneta-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.tel-odeslano { background: linear-gradient(180deg, #DDE7FF 0%, #F7F7F8 40%); }
.tel-odeslano-telo { position: absolute; left: 0; right: 0; top: 300px; text-align: center; }
.tel-check { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 40px; background: #2BB673; color: #fff; font-size: 84px; margin: 0 auto 36px; }
.tel-odeslano-telo b { font-size: 28px; font-weight: 600; }
.tel-radky--app { margin-top: 48px; gap: 34px 18px; font-size: 22px; }
.tel-status-lbl { display: block; text-align: center; margin-top: 90px; font-size: 20px; }
.tel-st { display: block; text-align: center; font-size: 34px; font-weight: 600; margin-top: 12px; }
.tel-st--bezi { color: #E07B2A; }
.tel-st--ok { color: #1E9E5A; display: none; }
.tel-st--ok i { vertical-align: -3px; }


/* fáze obrazovky (kořen s data-faze je .propoj nebo .tel3d) */
[data-faze="0"] .tel-obr--zamek { opacity: 1; }
[data-faze="1"] .tel-obr--nfc { opacity: 1; }
[data-faze="2"] .tel-obr--start { opacity: 1; }
[data-faze="3"] .tel-zaplatit { opacity: 1; }
[data-faze="3"] .tel-spin { animation: telSpin 1s linear infinite; }
[data-faze="4"] .tel-moneta { opacity: 1; }
[data-faze="5"] .tel-odeslano { opacity: 1; }
[data-faze="5"] .tel-moneta-btn::after { animation: klepnuti .7s ease-out forwards; }
[data-faze="6"] .tel-odchozi, [data-faze="7"] .tel-odchozi { opacity: 1; }
[data-faze="6"] .tel-spin--mala { animation: telSpin 1s linear infinite; }
[data-faze="7"] .tel-st--bezi { display: none; }
[data-faze="7"] .tel-st--ok { display: block; }
@keyframes telSpin { to { transform: rotate(360deg); } }
@keyframes klepnuti { 0% { transform: translate(-50%, -50%) scale(0); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }

/* ---------- obrazovky Mo.one App 1:1 podle screenshotů z 19. 9. ----------
   Plocha .tel-screen je 585 x 1268 px = iPhone 393 x 852 pt, měřítko 1,49. Písmo Outfit
   a modrá #006AFF jsou z appky (Components/Layout/Themes/Colors.ts). */
.core { position: absolute; inset: 0; font-family: 'Outfit', var(--font-sans); color: #16181D; background: #F2F2F4; display: flex; flex-direction: column; }
/* Pokladna má v appce tmavé pozadí s jemnými hvězdami, ne tapetu zamykací obrazovky */
.core--tmava { background: radial-gradient(120% 80% at 30% 0%, #1B2436 0%, #0B0F17 60%), #0B0F17; }
.core--tmava::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 18% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 7%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 33% 26%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 32%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 38%, #fff, transparent);
}
.core > * { position: relative; }
.core-status { display: flex; justify-content: space-between; align-items: center; padding: 26px 34px 0; font-size: 26px; font-weight: 500; flex: none; height: 86px; }
.core-status--tmavy { color: #fff; }
.core-status i { font-size: 20px; vertical-align: -1px; }
.core-stav-r { display: inline-flex; align-items: center; gap: 8px; }
.core-stav-r b { font-size: 17px; font-weight: 600; background: currentColor; color: #F2F2F4; border-radius: 20px; padding: 3px 9px; }
.core--tmava .core-stav-r b { color: #0B0F17; }
.core-podpora { position: absolute; right: 30px; top: 92px; z-index: 3; background: #2A2A2E; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .04em; padding: 10px 18px; border-radius: 40px; display: inline-flex; align-items: center; gap: 8px; }
.core-podpora i { font-size: 18px; }
.core-nadpis { display: flex; align-items: center; gap: 14px; padding: 46px 30px 26px; font-size: 40px; font-weight: 600; letter-spacing: -.01em; flex: none; }
.core-nadpis i { font-size: 40px; }
.core-karta { margin: 0 26px; background: #fff; border-radius: 26px; padding: 30px 28px; display: grid; gap: 22px; align-content: start; }
.core-karta--pokladna { margin-top: 26px; padding: 26px 20px 24px; gap: 18px; }
.core-legend { font-size: 26px; font-weight: 600; letter-spacing: .01em; }
.core-pole { display: grid; gap: 10px; }
.core-pole small { font-size: 24px; color: #16181D; }
.core-pole em { display: block; height: 66px; border: 1px solid #D7D7DB; border-radius: 10px; background: #fff; font-style: normal; }
.core-pole--tel { grid-template-columns: 190px 1fr; align-items: end; column-gap: 12px; }
.core-pole--tel small { grid-column: 1 / -1; }
.core-predvolba { display: flex !important; align-items: center; gap: 8px; padding: 0 14px; font-size: 24px; font-weight: 500; }
.core-predvolba i { font-size: 18px; color: #8A8A90; margin-left: auto; }
.core-castka { text-align: center; font-size: 62px; font-weight: 700; letter-spacing: -.02em; padding: 26px 0 30px; font-variant-numeric: tabular-nums; }
.core-keypad { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ECECEF; }
.core-keypad span { height: 92px; display: grid; place-items: center; font-size: 38px; font-weight: 500; border-bottom: 1px solid #ECECEF; border-right: 1px solid #ECECEF; }
.core-keypad span:nth-child(3n) { border-right: 0; }
.core-keypad span:nth-child(n+13) { border-bottom: 0; }
.core-keypad .core-plus { color: #006AFF; font-size: 44px; }
.core-pp { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 500; padding: 6px 4px 0; }
.core-pp i { font-size: 26px; }
.core-pp span { margin-left: 8px; }
.core-pp-sipka { margin-left: auto; color: #8A8A90; }
.core-btn { margin-top: 8px; padding: 26px 12px; border-radius: 12px; background: #006AFF; color: #fff; font-size: 27px; font-weight: 600; text-align: center; letter-spacing: .01em; }
.core-btn--ghost { background: #fff; color: #006AFF; border: 1px solid #A9CCFF; display: flex; align-items: center; justify-content: center; gap: 12px; }
.core-radek { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; font-size: 25px; }
.core-radek small { font-size: 25px; color: #16181D; }
.core-radek b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.core-stav-lbl { display: block; text-align: center; font-size: 22px; font-weight: 600; margin-top: 10px; }
.core-ok { display: block; text-align: center; font-size: 38px; font-weight: 700; color: #00A843; }
.core-ok i { vertical-align: -4px; margin-left: 6px; }
.core-tabs { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid #E6E6EA; padding: 14px 8px 22px; }
.core-tab { display: grid; justify-items: center; gap: 6px; font-size: 18px; color: #16181D; }
.core-tab i { font-size: 28px; }
.core-tab.is-akt { color: #fff; }
.core-tab.is-akt i { background: #006AFF; color: #fff; border-radius: 10px; padding: 8px 18px; }
.core-tab.is-akt { color: #006AFF; }
.rada-foto { display: block; width: 100%; height: 150px; object-fit: contain; margin-bottom: 16px; }
.prod-media--softpos img { max-height: 380px; width: auto; }
.hero-media--foto { display: flex; align-items: center; justify-content: center; }
.hero-media--foto img { width: min(100%, 400px); height: auto; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(24, 38, 68, .35); }
@media (max-width: 860px) { .hero-media--foto { margin-top: 28px; } .hero-media--foto img { width: min(100%, 320px); } }

/* telefon v pilíři na domovské stránce a v sekci Tři kroky */
.pillar-media .tel3d, .pillar-media--has3d .tel3d { width: min(360px, 100%); margin: 0 auto; }