/* 3D karta (three.js) — úvod / a /karta (kotva [data-karta=hero] vo výreze .hero-vizual[data-platno])
 * a skúšobná karta na /karta#sablony (kotva .vyskusat-karta). Logika zdroj-js/karta-3d.js → js/.
 *
 * Plátno vloží JS do kontajnera karty (canvas.scena, trieda .ma-platno). Vrstvy úvodu: oblúky (.ciary, z 0)
 * → 3D plátno (z 1) → kotva s obrázkom (z 2). Obrázok stojí, kým 3D kartu nenakreslí (.je-3d-karta),
 * potom je priehľadný (kvôli alt textu ostáva). Pri stratenej grafike (html.bez-3d-zatial) sa vráti.
 * Plátno je priehľadné, svetlo a lesk sú len na karte — okolo nej nič. */

/* ── Úvod ──
   Výrez .hero-rez ostáva (výška, spodný orez aj bočný orez oblúkov na telefóne); 3D karta pri otočke
   a náklone potrebuje navrchu rezervu (bližšia hrana je v perspektíve vyššia), inak by jej roh
   odrezala horná hrana výrezu. Preto len s 3D: orez cez clip-path s 64 px navrchu (= medzera nad výrezom). */
html.ma-3d .hero-rez { overflow: visible; clip-path: inset(-64px 0 0); }
.hero-vizual > canvas.scena {
  position: absolute; z-index: 1; left: 0; top: -64px; width: 100%; height: calc(100% + 64px);
  max-width: none; pointer-events: none;
}
.hero-vizual > [data-karta="hero"] { z-index: 2; }

/* ── Skúšobná karta: rezerva plátna 90 px na náklon a otočku. Nesmie rozšíriť stránku — na telefóne
   by sa dalo posúvať do strán (overflow-x body to nezastaví), preto orez na hrane sekcie ako na starom webe. ── */
#sablony { overflow: hidden; overflow: clip; }
#sablony .vyskusat-karta { position: relative; }
#sablony .vyskusat-karta > canvas.scena {
  position: absolute; z-index: 1; left: -90px; top: -90px; width: calc(100% + 180px); height: calc(100% + 180px);
  max-width: none; pointer-events: none;
}
#sablony .vyskusat-karta:not(.je-3d-karta) > canvas.scena { visibility: hidden; }

/* ── Prevzatie: obrázok / 2D plátno zmizne bez prechodu, až keď 3D karta stojí na jeho mieste ── */
html.je-3d:not(.bez-3d-zatial) .je-3d-karta > :is(img, .karta-zaloha) { opacity: 0; transition: none; }
html.bez-3d-zatial canvas.scena { visibility: hidden; }