/* ═══════════════════════════════════════════════════════════════════════
   ELASRA — sdílená brandová vrstva (Gen 3 „Zatmění")
   ───────────────────────────────────────────────────────────────────────
   Načítá ji index.html i join.html. Všechno, co má na obou stránkách
   vypadat STEJNĚ, patří sem — ne do inline <style> jednotlivých stránek.
   Do stránky patří jen to, co má opravdu jen ona (hero, modal, kód pozvánky).

   Proč: /join vznikl copy-pastem homepage a během pár buildů se rozešel
   (jiné pozadí, jiná tlačítka, a hlavně — odkazoval na 'Bodoni Moda',
   kterou si vůbec nenačetl, takže padal na Georgii). Jeden soubor =
   podstránka nemůže driftovat, aniž by se změnila i homepage.

   Vyžaduje: <link> na Google Fonts (Bodoni Moda + Inter) v <head> stránky
   a /brand.js pro hvězdné pole + pointer auru + přepínač jazyků.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

/* `hidden` musí přebít i třídu, která nastavuje display. Bez tohohle zůstal
   po úspěšném odeslání formulář viset vedle poděkování — `.beta-form
   { display:flex }` je specifičtější než `[hidden]` z UA stylesheetu. */
[hidden] { display: none !important; }

:root {
  --bg-start: rgb(7, 5, 24);
  --bg-end: rgb(1, 4, 14);
  --aura-one: 58, 222, 255;
  --aura-two: 255, 91, 189;
  --aura-three: 156, 112, 255;
  --aura-four: 255, 186, 116;
  --aura-five: 100, 255, 215;
  --pointer: 255, 230, 166;
  --aura-size: min(84vw, 1040px);
  --blend: screen;
  /* Brandové tokeny — ať se hex kódy netahají ručně po stránkách. */
  --ink: #fffaf2;
  --gold: #ffe6a6;
  --cyan: rgba(147, 237, 255, 0.86);
  --serif: 'Bodoni Moda', Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Kam smí sahat obsah stránky shora. Přepínač jazyků je `fixed` a je vysoký
     78 px (top 20 + 6 padding + 44 dotykový cíl + 6 padding + 2 rám), takže
     stránka, která začne dřív, si pod něj schová vlastní wordmark — na úzkém
     nebo nízkém displeji, kde se obsah opře o horní odsazení. Odsazují se o to
     .join-page / .reset-page / .sync-page / .doc-page. */
  --lang-switcher-clearance: 88px;
  color-scheme: dark;
}

html {
  min-height: 100%;
  background: #01040e;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(42deg, var(--bg-start), var(--bg-end));
  font-family: var(--sans);
}

/* ── Pozadí: gradient + hvězdy + aury ─────────────────────────────────── */

.landing {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.gradient-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(42deg, var(--bg-start), var(--bg-end));
  animation: backgroundBreath 8s ease-in-out infinite;
}

.gradient-field::before {
  display: none; /* nahrazeno canvas hvězdami */
}

#starCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.gradient-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 4, 14, 0.72), transparent 24%, transparent 72%, rgba(1, 4, 14, 0.62)),
    linear-gradient(180deg, rgba(1, 4, 14, 0.14), transparent 42%, rgba(1, 4, 14, 0.76));
  pointer-events: none;
}

.aura {
  position: absolute;
  top: calc(50% - var(--aura-size) / 2);
  left: calc(50% - var(--aura-size) / 2);
  width: var(--aura-size);
  height: var(--aura-size);
  border-radius: 999px;
  mix-blend-mode: var(--blend);
  filter: blur(46px);
  opacity: 0.86;
  transform-origin: center center;
  will-change: transform;
}

.aura-one {
  background: radial-gradient(circle at center, rgba(var(--aura-one), 0.88), rgba(var(--aura-one), 0) 58%);
  animation: moveVertical 12s ease-in-out infinite, auraPulse 6s ease-in-out infinite;
}

.aura-two {
  background: radial-gradient(circle at center, rgba(var(--aura-two), 0.78), rgba(var(--aura-two), 0) 58%);
  transform-origin: calc(50% - 360px) center;
  animation: moveInCircle 13s reverse infinite, auraPulse 7s ease-in-out infinite;
}

.aura-three {
  background: radial-gradient(circle at center, rgba(var(--aura-three), 0.78), rgba(var(--aura-three), 0) 55%);
  transform-origin: calc(50% + 420px) calc(50% - 120px);
  animation: moveInCircle 18s cubic-bezier(0, 0, 0.1, 1) infinite, driftScale 9s cubic-bezier(0, 0, 0.1, 1) infinite;
}

.aura-four {
  background: radial-gradient(circle at center, rgba(var(--aura-four), 0.42), rgba(var(--aura-four), 0) 58%);
  opacity: 0.72;
  transform-origin: calc(50% - 220px) calc(50% + 260px);
  animation: moveHorizontal 14s ease-in-out infinite, auraPulse 7s ease-in-out infinite;
}

.aura-five {
  background: radial-gradient(circle at center, rgba(var(--aura-five), 0.42), rgba(var(--aura-five), 0) 60%);
  opacity: 0.64;
  transform-origin: calc(50% + 720px) calc(50% + 520px);
  animation: moveInCircle 15s ease-in-out infinite, driftScale 10s ease-in-out infinite reverse;
}

.aura-pointer {
  position: absolute;
  top: -35vmax;
  left: -35vmax;
  width: 70vmax;
  height: 70vmax;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(var(--pointer), 0.34), rgba(var(--pointer), 0) 48%);
  mix-blend-mode: screen;
  filter: blur(36px);
  opacity: 0.8;
  transform: translate(var(--pointer-x, 50vw), var(--pointer-y, 48vh));
  transition: opacity 220ms ease;
  will-change: transform;
}

/* ── Typografie značky ────────────────────────────────────────────────── */

.brand-mark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 12vw, 8.9rem);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: clamp(0.18em, 2.5vw, 0.42em);
  text-indent: clamp(0.18em, 2.5vw, 0.42em);
  text-shadow:
    0 0 18px rgba(255, 235, 186, 0.8),
    0 0 58px rgba(255, 163, 220, 0.36),
    0 0 120px rgba(69, 225, 255, 0.28);
}

.brand-line {
  max-width: 820px;
  margin: -20px 0 18px;
  color: rgba(255, 220, 166, 0.72);
  font-family: var(--sans);
  font-size: clamp(0.73rem, 1.32vw, 1.03rem);
  font-weight: 300;
  letter-spacing: clamp(0.18em, 1.4vw, 0.32em);
  line-height: 1.8;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Karta „nech nám e-mail" ──────────────────────────────────────────────
   Sdílená homepage sekcí #beta i pozvánkou /join — je to tentýž formulář
   na tentýž endpoint, takže i tytéž třídy. */

.beta-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 230, 166, 0.16);
  border-radius: 22px;
  padding: clamp(24px, 5vw, 38px) clamp(20px, 4.5vw, 32px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 64px rgba(255, 220, 166, 0.06);
}

.beta-eyebrow {
  margin: 0 0 12px;
  color: rgba(255, 230, 166, 0.85);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.beta-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.beta-lead {
  margin: 0 0 26px;
  color: rgba(255, 250, 242, 0.7);
  font-size: 0.9rem;
  line-height: 1.7;
}

.beta-form { display: flex; flex-direction: column; gap: 16px; }

.beta-form input[type=email] {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--ink);
  padding: 15px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 200ms;
}
.beta-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.32); }
.beta-form input[type=email]:focus { border-color: rgba(255, 230, 166, 0.55); }

/* Volba platformy — rozhoduje, kam zájemce zařadit (Play / TestFlight). */
.beta-platform { border: 0; margin: 0; padding: 0; }
.beta-platform legend {
  padding: 0 0 10px;
  color: rgba(255, 250, 242, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.beta-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beta-pill {
  position: relative;  /* ukotvi absolutně poziciovaný (skrytý) radio input */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 250, 242, 0.75);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
/* Radio schovaný jen vizuálně — zůstává fokusovatelný a v původní velikosti,
   aby k němu prohlížeč uměl ukotvit bublinu nativní validace. */
.beta-pill input { position: absolute; opacity: 0; pointer-events: none; }
.beta-pill:hover { border-color: rgba(255, 230, 166, 0.4); }
.beta-pill:has(input:checked) {
  background: rgba(255, 230, 166, 0.1);
  border-color: rgba(255, 230, 166, 0.65);
  color: var(--gold);
}
.beta-pill:has(input:focus-visible) { outline: 2px solid rgba(147, 237, 255, 0.7); outline-offset: 2px; }

.beta-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: rgba(255, 250, 242, 0.6);
  font-size: 0.78rem;
  line-height: 1.6;
  cursor: pointer;
}
.beta-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #ffe6a6;
  cursor: pointer;
}
.beta-consent a { color: rgba(255, 230, 166, 0.9); }

/* Honeypot — mimo viewport, ne display:none (ať ho bot v DOM najde). */
.beta-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-form button[type=submit] {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, rgba(124, 106, 247, 0.85), rgba(58, 222, 255, 0.65));
  border: 1px solid rgba(147, 237, 255, 0.3);
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 200ms, transform 150ms;
}
.beta-form button[type=submit]:hover { opacity: 0.88; transform: translateY(-1px); }
.beta-form button[type=submit]:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.beta-error {
  margin: -4px 0 0;
  color: rgba(229, 115, 115, 0.95);
  font-size: 0.78rem;
  text-align: center;
  min-height: 16px;
}
.beta-success p {
  margin: 0;
  color: rgba(147, 237, 255, 0.92);
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: center;
}

/* ── Přepínač jazyků ──────────────────────────────────────────────────────
   Dvě podoby téhož ovládacího prvku:
     <button>  — stránky s jedním souborem a data-i18n (index, join, reset, sync)
     <a>       — stránky s trojicí souborů a hreflang (delete-account cs/en/sk)
   Vypadají a chovají se stejně; liší se jen tím, jestli jazyk přepíná JS,
   nebo navigace na jinou URL. Obojí patří sem, aby se nerozešly. */

.lang-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(15, 17, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.lang-switcher button,
.lang-switcher a {
  /* 44 × 44 = dotykové minimum (WCAG 2.5.8 / HIG). Dřív tu bylo `padding:
     4px 8px` nad písmem 0.72rem → zásahová plocha ~22 px, tedy poloviční.
     Plochu dělá min-height + inline-flex centrování, NE větší písmo —
     přepínač má zůstat vizuálně nenápadný. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: rgba(255, 250, 242, 0.55);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms, background 180ms;
}
.lang-switcher button:hover,
.lang-switcher a:hover { color: rgba(255, 250, 242, 0.9); }
.lang-switcher button.active {
  color: var(--ink);
  background: rgba(124, 106, 247, 0.35);
}
/* Odkazová varianta si drží zlatou pilulku z původního delete-account —
   je to jediné, čím se od tlačítkové liší. */
.lang-switcher a.active {
  color: #04030f;
  background: var(--gold);
  font-weight: 700;
}

/* ── Animace ──────────────────────────────────────────────────────────── */

@keyframes moveHorizontal {
  0%, 100% { transform: translateX(-54%) translateY(-14%) scale(0.92); }
  50% { transform: translateX(54%) translateY(16%) scale(1.12); }
}

@keyframes moveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
  0%, 100% { transform: translateY(-46%) translateX(-8%) scale(0.95); }
  50% { transform: translateY(46%) translateX(8%) scale(1.12); }
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-174px, 118px, 0); }
}

@keyframes auraPulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 0.98; }
}

@keyframes driftScale {
  0%, 100% { transform: rotate(0deg) scale(0.86); }
  50% { transform: rotate(180deg) scale(1.16); }
}

@keyframes backgroundBreath {
  0%, 100% { filter: saturate(1) brightness(0.92); }
  50% { filter: saturate(1.28) brightness(1.14); }
}

@media (max-width: 760px) {
  :root {
    --aura-size: 110vw;
  }

  .brand-mark {
    font-size: clamp(3.1rem, 18vw, 5.5rem);
  }

  .brand-line {
    margin-top: -16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-field::before,
  .gradient-field,
  .aura {
    animation: none;
  }

  .aura-pointer {
    display: none;
  }
}

/* ── Modifikátory ─────────────────────────────────────────────────────────
   Dvojtřída schválně: přebije i `.brand-mark` uvnitř media query výš,
   takže na pořadí pravidel v souboru nezáleží. */

.brand-mark.brand-mark--compact {
  font-size: clamp(2.5rem, 11vw, 3.6rem);
  letter-spacing: clamp(0.16em, 2vw, 0.34em);
  text-indent: clamp(0.16em, 2vw, 0.34em);
}
