/* Gardune Audio, coming soon v2: úvodní film s oponou, pak smyčka, kód ve vzduchu a formulář jako vstupenka.
   Tokeny, tlačítka a dialog jako na plném webu (GarduneAudio/assets/site.css). */

/* ---------- písma: hostovaná u nás (dřív Google Fonts) ----------
   Soubory jsou z Google Fonts (25. 10. 2026), všechna pod SIL Open Font License 1.1. Bez Googlu se adresa návštěvníka
   nikam nepředává (GDPR) a odpadá spojení na dvě cizí domény. Sady podle unicode-range: prohlížeč stáhne jen ty,
   jejichž znaky stránka opravdu potřebuje (angličtina a čeština ~95 kB). Geist a Readex Pro jsou proměnná písma,
   jeden soubor kryje řez 300 i 400. Znovu stáhnout: fonts.googleapis.com/css2?family=Geist:wght@300;400
   &family=Geist+Mono:wght@400&family=Michroma&family=Unbounded:wght@300&family=Readex+Pro:wght@300;400&display=swap
   s User-Agentem Chromu (jinak nedá woff2), soubory pojmenovat rodina-sada.woff2. */
@font-face { font-family: 'Geist'; font-weight: 300 400; font-display: swap; src: url(fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-weight: 300 400; font-display: swap; src: url(fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-weight: 300 400; font-display: swap; src: url(fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist'; font-weight: 300 400; font-display: swap; src: url(fonts/geist-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-weight: 300 400; font-display: swap; src: url(fonts/geist-latin.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: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-symbols2.woff2) format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-latin.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: 'Michroma'; font-weight: 400; font-display: swap; src: url(fonts/michroma-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Michroma'; font-weight: 400; font-display: swap; src: url(fonts/michroma-latin.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: 'Readex Pro'; font-weight: 300 400; font-display: swap; src: url(fonts/readex-pro-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Readex Pro'; font-weight: 300 400; font-display: swap; src: url(fonts/readex-pro-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Readex Pro'; font-weight: 300 400; font-display: swap; src: url(fonts/readex-pro-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Readex Pro'; font-weight: 300 400; font-display: swap; src: url(fonts/readex-pro-latin.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: 'Unbounded'; font-weight: 300; font-display: swap; src: url(fonts/unbounded-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url(fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url(fonts/unbounded-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url(fonts/unbounded-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url(fonts/unbounded-latin.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; }

:root {
  --bg: #020103;
  --surface: #110e12;
  --ink: #ece7df;
  --ink-2: #b9b2a9;
  --muted: #847d75;
  --garnet: #a32638;
  --garnet-hi: #c9445a;
  --line: rgba(236, 231, 223, .12);
  --line-2: rgba(236, 231, 223, .24);

  --display: 'Michroma', 'Unbounded', 'Readex Pro', 'Segoe UI', system-ui, sans-serif;   /* Michroma nemá azbuku ani arabštinu: Unbounded, Readex Pro */
  --sans: 'Geist', 'Readex Pro', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'Readex Pro', monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r: 2px;
  --gutter: clamp(18px, 4.2vw, 72px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;                    /* starší prohlížeče bez svh */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-2);
  font: 300 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                   /* starší Safari bez clip */
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
::selection { background: var(--garnet); color: var(--ink); }
:focus-visible { outline: 1px solid var(--garnet-hi); outline-offset: 3px; }

/* ---------- filmové zrno (schová i pásy v tmavých přechodech videa) ---------- */

/* Vrstva je jen o jednu dlaždici (220 px) větší než okno: posun o 0–219 px vpravo dolů vypadá stejně jako
   libovolný jiný. Posouvá ji cs.js nejvýš 24× za sekundu spolu s plátnem; CSS animace se steps(8) na každý
   úsek klíčových snímků dřív posouvala zrno v každém snímku a nutila prohlížeč skládat celé okno 60× za sekundu. */
.grain {
  position: fixed;
  top: -220px;
  left: -220px;
  right: 0;
  bottom: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}
.q-2 .grain { display: none; }           /* nejnižší stupeň kvality (cs.js): o vrstvu přes celé okno méně */

/* ---------- uvítání ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity .9s var(--ease), visibility .9s;
}
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { width: 74px; height: 74px; overflow: visible; }
.loader-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease-io) .15s forwards; }
.loader-sand { opacity: 0; transform: translateY(30px); animation: sand .9s var(--ease) .8s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sand { to { opacity: 1; transform: none; } }
.loader-word {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .6em;
  margin-right: -.6em;
  color: var(--ink);
  opacity: 0;
  animation: word 1.2s var(--ease) .5s forwards;
}
@keyframes word { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: .6em; } }
.loader-bar { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--garnet-hi); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }

/* ---------- jeviště ---------- */

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.stage-media { position: absolute; inset: 0; transform: scale(1.05); will-change: transform; }
.stage-poster, .stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-video { opacity: 0; transition: opacity .5s linear; }
.is-intro #vIntro { opacity: 1; }
.is-loop #vLoop { opacity: 1; transition: none; }
.is-loop #vIntro { opacity: 0; transition: opacity .2s linear .1s; }
/* bez mix-blend-mode: prach a kód jsou světlé a sčítané už v plátně, výsledek je stejný; režim screen
   nutil prohlížeč skládat celé jeviště přes mezivrstvu v každém snímku */
.stage-fx { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform; }
.stage-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s var(--ease);
  background:
    linear-gradient(90deg, rgba(2, 1, 3, .9) 0%, rgba(2, 1, 3, .66) 26%, rgba(2, 1, 3, .16) 48%, transparent 62%),
    linear-gradient(0deg, rgba(2, 1, 3, .7) 0%, transparent 20%),
    radial-gradient(120% 90% at 62% 55%, transparent 55%, rgba(2, 1, 3, .55) 100%);
}
.ui-1 .stage-shade { opacity: 1; }
.stage::after {                         /* během otázek se jeviště ztlumí */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--ease);
}
.is-survey .stage::after { opacity: .5; }

/* rohové značky jako na výkresu */
.tick { position: fixed; z-index: 30; width: 14px; height: 14px; opacity: 0; transition: opacity 1.4s var(--ease) .3s; pointer-events: none; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--line-2); }
.tick::before { width: 14px; height: 1px; } .tick::after { width: 1px; height: 14px; }
.tick.tl { top: 14px; left: 14px; } .tick.tr { top: 14px; right: 14px; transform: scaleX(-1); }
.tick.bl { bottom: 14px; left: 14px; transform: scaleY(-1); } .tick.br { bottom: 14px; right: 14px; transform: scale(-1); }
.ui-1 .tick { opacity: 1; }

/* ---------- horní lišta ---------- */

.bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top)) var(--gutter) 18px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ui-1 .bar { opacity: 1; transform: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand svg { width: 30px; height: 30px; }
.wordmark { font-family: var(--display); font-size: 13px; letter-spacing: .32em; }
.bar-right { display: flex; align-items: center; gap: 22px; }
.bar-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.lang-btn {
  min-width: 44px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(2, 1, 3, .4); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  cursor: pointer; transition: color .3s, border-color .3s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-2); }
.lang { position: relative; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;   /* 16 jazyků se na telefonu na šířku nevejde */
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(2, 1, 3, .92); backdrop-filter: blur(10px);
}
.lang-menu button {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 10px; border: 0; border-radius: var(--r); background: none;
  color: var(--ink-2); font: 400 13px/1.3 var(--sans); text-align: left; cursor: pointer;
}
.lang-menu button i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255, 255, 255, .06); color: var(--ink); outline: none; }
.lang-menu button[aria-current="true"] { color: var(--ink); }
.lang-menu button[aria-current="true"] i { color: var(--garnet-hi); }

/* ---------- obsah ---------- */

.main { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; }
.hero { width: min(100%, 680px); margin-left: var(--gutter); padding: 96px 0 34px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--garnet-hi); margin: 0 0 24px; }
h1 {
  margin: 0 0 26px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 54px);   /* nadpis „člověk + AI“ je delší, v 10 jazycích nesmí nic oříznout */
  line-height: 1.12;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ink);
}
h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
h1 .line > span { display: inline-block; }
.lede { max-width: 29em; margin-bottom: 38px; color: var(--ink-2); text-wrap: pretty; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * .14s); }
.js h1 .reveal { transform: translateY(110%); opacity: 1; }
.ui-1 .reveal, .ui-1 h1 .reveal { opacity: 1; transform: none; }

/* ---------- vstupenka (formulář) ---------- */

.ticket {
  position: relative;
  width: min(100%, 520px);
  padding: 22px 26px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(20, 15, 19, .62), rgba(8, 6, 9, .5));
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(236, 231, 223, .06);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ui-2 .ticket { opacity: 1; transform: none; }
/* Rozmazání pozadí se počítá znovu s každým snímkem videa i plátna (ve 4K víc než celé plátno). Na nižších
   stupních kvality (cs.js) a v prohlížečích bez backdrop-filter ho nahradí hustší pozadí: opona za vstupenkou
   pak prosvítá jen slabě, místo aby byla vidět ostře. */
.q-1 .ticket, .q-2 .ticket {
  background: linear-gradient(180deg, rgba(20, 15, 19, .74), rgba(8, 6, 9, .64));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ticket { background: linear-gradient(180deg, rgba(20, 15, 19, .74), rgba(8, 6, 9, .64)); }
}
.ticket::before {                       /* perforace mezi zářezy */
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  border-top: 1px dashed rgba(236, 231, 223, .07);
  pointer-events: none;
}
.ticket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.ticket-head label, .open-q, legend {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ticket-no { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--garnet-hi); white-space: nowrap; }
.field-row { display: flex; gap: 10px; position: relative; z-index: 1; }
.field-row input, .survey textarea {
  flex: 1;
  min-width: 0;
  height: 52px;
  min-height: 52px;                     /* pod sebou (mobil) by ho flex: 1 smrskl */
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(2, 1, 3, .55);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .3s;
}
.field-row input:focus, .survey textarea:focus { outline: none; border-color: var(--garnet-hi); }
.consent, .form-status { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.form-status:empty { display: none; }
.form-status.is-err { color: var(--garnet-hi); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 52px;
  padding: 0 1.7em;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-primary { background: var(--garnet); color: var(--ink); box-shadow: 0 0 0 0 rgba(201, 68, 90, 0); }
.btn-primary::after {                  /* odlesk přejede přes tlačítko */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 236, .28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn-primary:hover { background: var(--garnet-hi); box-shadow: 0 10px 40px -12px rgba(201, 68, 90, .7); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: rgba(2, 1, 3, .35); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .6; cursor: progress; }
.ui-2 .signup .btn-primary { animation: invite 2.6s var(--ease) 1.4s 1; }
@keyframes invite { 30% { box-shadow: 0 0 0 6px rgba(201, 68, 90, .18); } 100% { box-shadow: 0 0 0 0 rgba(201, 68, 90, 0); } }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: rgba(2, 1, 3, .45); color: var(--ink); font-size: 20px; cursor: pointer;
}
.link-btn, .legal-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.link-btn:hover, .legal-link:hover { color: var(--ink); }

/* nepovinné otázky */
.survey, .done { animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.survey[hidden], .done[hidden], .signup[hidden] { display: none; }
.survey-title { font-family: var(--display); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.survey-sub { font-size: 14.5px; color: var(--ink-2); margin-bottom: 18px; }
.survey fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.survey legend { padding: 0; margin-bottom: 9px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(2, 1, 3, .5);
  font-size: 13.5px; color: var(--ink-2); transition: border-color .25s, background .25s, color .25s;
}
.chips label:hover span { border-color: var(--ink-2); }
.chips input:checked + span { border-color: var(--garnet-hi); background: rgba(163, 38, 56, .38); color: var(--ink); }
.chips input:focus-visible + span { outline: 1px solid var(--garnet-hi); outline-offset: 3px; }
.open-q { color: var(--muted); margin-bottom: 9px; }
.survey textarea { display: block; width: 100%; height: auto; padding: 11px 16px; resize: vertical; line-height: 1.5; }
.survey-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.done { outline: none; }

.social { list-style: none; display: flex; gap: 22px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.social a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); transition: color .3s;
}
.social a:hover { color: var(--garnet-hi); }

/* ---------- živý stav, přeskočení úvodu, patička ---------- */

.live {
  position: fixed;
  right: var(--gutter);
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1.5s var(--ease);
  pointer-events: none;
}
.fx-on .live { opacity: 1; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--garnet-hi); box-shadow: 0 0 10px var(--garnet-hi); animation: pulse 1.6s ease-in-out infinite; }
.q-2 .live i { animation: none; }
.live b { font-weight: 400; color: var(--ink-2); letter-spacing: .12em; text-transform: none; }
@keyframes pulse { 50% { opacity: .35; } }

.skip {
  position: fixed;
  right: var(--gutter);
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(2, 1, 3, .35);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  animation: rise 1s var(--ease) 1.2s both;
}
.skip:hover { color: var(--ink); border-color: var(--line-2); }
.skip[hidden] { display: none; }

.foot {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1.2s var(--ease) .4s;
}
.ui-2 .foot { opacity: 1; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .link-btn { font-size: inherit; letter-spacing: inherit; }

/* ---------- dialog se zásadami ---------- */

dialog { border: 0; padding: 0; color: var(--ink-2); }
dialog::backdrop { background: rgba(2, 1, 3, .92); }
.dialog-close { position: absolute; top: 16px; right: 16px; }
.legal-dialog { width: min(92vw, 720px); max-height: 86vh; padding: 48px clamp(22px, 4vw, 48px); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: auto; }
.legal-dialog h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 20px; text-transform: uppercase; color: var(--ink); }
.legal-dialog h4 { margin: 26px 0 8px; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.legal-dialog p, .legal-dialog li { font-size: 15px; }
.legal-updated { font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* prohlížeče bez <dialog> (Safari před 15.4): cs.js jen přepíná atribut open */
.no-dialog dialog:not([open]) { display: none; }
.no-dialog .legal-dialog[open] { position: fixed; z-index: 100; top: 7vh; left: 0; right: 0; margin: 0 auto; }

/* ---------- mobil (video na výšku): titulek pod lambrekýnem, vstupenka dole na jevišti ---------- */

[data-f="port"] .stage-shade {
  background:
    linear-gradient(180deg, rgba(2, 1, 3, .7) 0%, rgba(2, 1, 3, .35) 30%, transparent 44%),
    linear-gradient(0deg, rgba(2, 1, 3, .96) 0%, rgba(2, 1, 3, .7) 30%, transparent 46%);
}
[data-f="port"] .main { align-items: stretch; }
[data-f="port"] .hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  min-height: calc(100svh - 30px);
  margin: 0 var(--gutter);
  padding: calc(88px + env(safe-area-inset-top)) 0 18px;
}
[data-f="port"] .lede { font-size: 15.5px; margin-bottom: 0; max-width: 24em; }
[data-f="port"] .bar-meta, [data-f="port"] .live { display: none; }
[data-f="port"] .foot { justify-content: center; text-align: center; }
[data-f="port"] .ticket { margin-top: 22px; padding: 18px 18px 16px; width: 100%; }
[data-f="port"] .signup:not([hidden]) ~ .social { display: none; }   /* na telefonu sítě až po zápisu, ať je vidět podstavec */
[data-f="port"] .ticket-head { margin-bottom: 10px; }
@media (max-width: 560px) {
  .field-row { flex-direction: column; }
  .field-row .btn { width: 100%; }
  h1 { font-size: clamp(26px, 7.8vw, 36px); }
  .wordmark { font-size: 12px; }
}

/* ---------- arabština: celá stránka zrcadlená zprava doleva (video, prach a kód zrcadlí cs.js) ---------- */

[dir="rtl"] body *:not(.wordmark):not(.loader-word) { letter-spacing: 0 !important; }   /* prostrkání rozpojí arabská písmena */
[dir="rtl"][data-f="land"] .hero { margin-left: 0; margin-right: var(--gutter); }
[dir="rtl"] .stage-shade { transform: scaleX(-1); }                     /* ztmavení pod textem na druhou stranu */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-menu button { text-align: right; }
[dir="rtl"] .live, [dir="rtl"] .skip { right: auto; left: var(--gutter); }
[dir="rtl"] .dialog-close { right: auto; left: 16px; }
[dir="rtl"] .loader-bar i { transform-origin: right; }
[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }   /* adresa se píše zleva, zarovnaná jako zbytek */

/* zrno tu dřív bylo ve stejném výběru a dostalo opacity: 1, takže při vypnutých animacích v systému
   (Windows „Efekty animace“, macOS „Omezit pohyb“) zakryl celou stránku šedý šum; teď jen stojí */
@media (prefers-reduced-motion: reduce) {
  .loader-stroke, .loader-sand, .loader-word { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
  .js .reveal, .js h1 .reveal, .ticket, .bar, .foot, .tick, .stage-shade { transition: none; }
}