/* =========================================================
   PODPOŘME KAMARÁDA — jednoobrazovkový layout
   Barvy měň nahoře v :root
   ========================================================= */

/* ===== FONT: Rubik Mono One (lokální, funguje offline) ===== */
@font-face {
  font-family: 'Rubik Mono One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/rubik-mono-one-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: 'Rubik Mono One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/rubik-mono-one-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== HK GROTESK (běžný text) — vlož soubor(y) do fonty/ ===== */
@font-face {
  font-family: 'HK Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/hk-grotesk-regular.woff2') format('woff2'),
       url('fonty/HKGrotesk-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'HK Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonty/hk-grotesk-bold.woff2') format('woff2'),
       url('fonty/HKGrotesk-Bold.otf') format('opentype');
}

/* ===== HORIZON (nadpis) — vlož soubor do fonty/ ===== */
@font-face {
  font-family: 'Horizon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonty/horizon.woff2') format('woff2'),
       url('fonty/horizon.otf') format('opentype');
}

:root {
  --papir:    #faf8f4;   /* pozadí */
  --papir-2:  #f2efe8;   /* pravý panel */
  --inkoust:  #1f1d1a;   /* text a nadpisy */
  --sedá:     #6b675f;   /* vedlejší text */
  --akcent:   #9a7b4f;   /* akcentová barva */
  --linka:    #e4e0d7;

  /* písma */
  --font-text:  'HK Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-title: 'Horizon', 'Rubik Mono One', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-text);
  background: var(--papir);
  color: var(--inkoust);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* pojistka proti přetečení kuželů */
}

img { max-width: 100%; display: block; }

/* ===== DROBNÝ NADPISEK ===== */
.eyebrow {
  font-family: var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--akcent);
  margin-bottom: 20px;
}

/* ===== SCÉNA (dva sloupce, celá obrazovka) ===== */
.stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

/* ===== LEVÝ SLOUPEC: PŘÍBĚH ===== */
.story {
  position: relative;
  z-index: 50;                 /* nad blackoutem — světla ho nasvítí */
  background: #1c1813;         /* tmavá „stěna", na které kužely světel vyniknou */
  color: #ece6d8;              /* světlý text na tmavém pozadí */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 88px);
  animation: storyReveal 3.6s ease forwards;
}
.story__title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  animation: textGlow 3.6s ease forwards;
}
.story__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  margin-bottom: 20px;
  animation: textGlow 3.6s ease forwards;
}
.story__body {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  color: #a89f8d;              /* tlumený světlý text na tmavém pozadí */
}

/* záře textu naskočí, jakmile na něj dosednou kužely reflektorů */
@keyframes textGlow {
  0%, 45% { text-shadow: 0 0 0 rgba(255,236,180,0); }
  62%     { text-shadow: 0 0 26px rgba(255,232,175,0.6), 0 0 8px rgba(255,240,200,0.5); }
  100%    { text-shadow: 0 0 18px rgba(255,232,175,0.42), 0 0 6px rgba(255,240,200,0.38); }
}

/* ===== PRAVÝ SLOUPEC: PŘISPĚT (stage) ===== */
.donate {
  position: relative;
  background: var(--papir-2);
  border-left: 1px solid var(--linka);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 4vw, 64px);
}
.donate__hint {
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--sedá);
  margin-top: 16px;
}

/* ===== QR ===== */
.qr {
  position: relative;
  z-index: 60;                 /* nad blackoutem — světla ho „prosvítí" */
  display: inline-block;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: 8px;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.4);
  animation: qrReveal 3.6s ease forwards;
}
.qr img { width: 200px; height: 200px; }
.qr__badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: system-ui, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sedá);
  background: var(--papir-2);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ===== ČÍSLO ÚČTU (nasvětlovací štítek) ===== */
.account {
  position: relative;
  z-index: 50;                 /* nad blackoutem — reflektor ho nasvítí */
  margin-top: 32px;
  padding: 16px 24px;
  border-radius: 8px;
  background: var(--papir);
  font-family: system-ui, sans-serif;
  animation: accountReveal 3.6s ease forwards;
}
.account__label {
  display: block;
  font-family: var(--font-text);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sedá);
  margin-bottom: 10px;
}
.account strong {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--inkoust);
  letter-spacing: 0.01em;
}

.donate__thanks {
  margin-top: 36px;
  max-width: 320px;
  font-style: italic;
  color: var(--sedá);
  font-size: 1rem;
}

/* ===== MOBIL: sloupce pod sebe, povolit scroll ===== */
@media (max-width: 820px) {
  .stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .story { max-width: none; padding: 56px 28px 40px; }
  .donate { border-left: none; border-top: 1px solid var(--linka); padding: 48px 28px 64px; }
}

/* ===== MALÉ TELEFONY ===== */
@media (max-width: 420px) {
  .story { padding: 44px 22px 32px; }
  .story__title { font-size: 1.4rem; margin-bottom: 22px; }
  .story__lead { font-size: 1.08rem; }
  .donate { padding: 40px 22px 56px; }
  .qr { padding: 14px; }
  .qr img { width: min(200px, 60vw); height: min(200px, 60vw); }
  .account strong { font-size: 1.2rem; word-break: break-word; }
}

/* =========================================================
   SVĚTELNÁ SHOW — 6 otočných hlav (rig nad „pódiem" = QR stranou)
   Fáze 1: všechny hlavy show → Fáze 2: 2 hlavy nasvítí text (publikum)
   → Finále: hlavy dosednou na QR + účet, scéna zůstává potemnělá
   ========================================================= */

/* ztmavnutí celé stránky — zůstává tmavé (koncertní atmosféra) */
.blackout {
  position: fixed;
  inset: 0;
  background: #050505;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  animation: blackout 3.6s ease forwards;
}
@keyframes blackout {
  0%   { opacity: 0; }
  6%   { opacity: 0.92; }   /* rychle ztmavne */
  100% { opacity: 0.92; }   /* a tak už zůstane */
}

/* rig přes celý viewport */
.rig {
  position: fixed;
  inset: 0;
  overflow: hidden;         /* kužely ořízne na obrazovku, nezvětší stránku */
  z-index: 60;
  pointer-events: none;
}

/* poloha tyče = rozmezí pódia (QR) a placu (text) = šev sloupců (1.15fr : 0.85fr) */
.rig { --tower-x: 57.5%; }

/* ===== SVISLÁ TYČ (jen tyč, bez podstavce) ===== */
.pole {
  position: fixed;
  top: 2%;
  bottom: 2%;
  left: var(--tower-x);
  width: 9px;
  transform: translateX(-50%);
  z-index: 61;
  border-radius: 6px;
  background: linear-gradient(90deg, #0d0d10 0%, #46464e 40%, #74747e 50%, #46464e 60%, #0d0d10 100%);
  box-shadow: 3px 0 12px rgba(0,0,0,.5), -3px 0 12px rgba(0,0,0,.5);
  opacity: 0;
  animation: towerIn 3.6s ease forwards;
}
@keyframes towerIn { 0%,4% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 1; } }

/* hlavy navěšené na tyči (svisle: X = tyč, Y = --pos) */
.fixture {
  position: fixed;
  left: var(--tower-x);
  top: var(--pos);
  width: 0;
}

/* objímka hlavy na tyči */
.truss {
  position: absolute;
  top: -6px; left: 50%;
  width: 16px; height: 12px;
  transform: translateX(-50%);
  background: linear-gradient(#3a3a40, #17171b);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* otočná část (hlava + kužel) — pivotuje v místě hlavy */
.pan {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 50% 0;
}
/* start: krátká show do kruhu a pak dosednutí na cíl (úhel --end počítá JS:
   ob jednu hlavu na srdíčko v textu, zbytek doprostřed QR kódu) */
.rig.play .pan {
  animation: settle 3.6s cubic-bezier(.28,0,.12,1) forwards;
}
@keyframes settle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--end, 0deg)); }
}

/* čočka / světelný zdroj */
.lens {
  position: absolute;
  top: -6px; left: 50%;
  width: 20px; height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff, #ffe9b0 45%, #7a5a24 74%, #14100a 100%);
  box-shadow: 0 0 10px 2px rgba(255,236,180,.6);
}

/* kužel světla */
.beam {
  position: absolute;
  top: 4px; left: 50%;
  width: 150px;
  height: 820px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
              rgba(255,244,214,0.42) 0%,
              rgba(255,244,214,0.13) 40%,
              rgba(255,244,214,0.02) 80%,
              transparent 100%);
  clip-path: polygon(46% 0, 54% 0, 86% 100%, 14% 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: beamOn 3.6s ease forwards;
}

/* kužely: naběhnou a zůstanou svítit (scéna je tmavá) */
@keyframes beamOn {
  0%   { opacity: 0; }
  10%  { opacity: 0.6; }
  100% { opacity: 0.5; }
}

/* nasvícení TEXTU (publikum) — rozsvítí se ve fázi 2 */
@keyframes storyReveal {
  0%   { filter: brightness(0.12); }
  40%  { filter: brightness(0.12); }
  52%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}

/* nasvícení QR — rozzáří se až ve finále */
@keyframes qrReveal {
  0%   { filter: brightness(0.16); box-shadow: 0 20px 50px -30px rgba(0,0,0,.4); }
  66%  { filter: brightness(0.16); box-shadow: 0 20px 50px -30px rgba(0,0,0,.4); }
  78%  { filter: brightness(1.2);  box-shadow: 0 0 60px 14px rgba(255,232,170,.8); }
  100% { filter: brightness(1);    box-shadow: 0 0 34px 6px rgba(255,232,170,.4); }
}

/* nasvícení ČÍSLA ÚČTU — rozzáří se s QR ve finále */
@keyframes accountReveal {
  0%   { filter: brightness(0.16); box-shadow: none; }
  68%  { filter: brightness(0.16); box-shadow: none; }
  80%  { filter: brightness(1.15); box-shadow: 0 0 34px 8px rgba(255,232,170,.6); }
  100% { filter: brightness(1);    box-shadow: 0 0 20px 4px rgba(255,232,170,.3); }
}

/* =========================================================
   TRUSS RÁM kolem tmavé (QR) části + červené PARy
   Rám je vidět od začátku; PARy se rozsvítí (tělo .reds)
   až když hlavy dohýbou — a s nimi zčervená i text u QR.
   ========================================================= */
.frame {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: 57.5%;                 /* obklopuje pravou (černou) část = šev sloupců */
  z-index: 45;                 /* nad blackoutem, ale za QR i účtem */
  pointer-events: none;
  opacity: 0;
  animation: towerIn 3.6s ease forwards;
}

/* truss nosníky rámu */
.frame__bar {
  position: absolute;
  background:
    repeating-linear-gradient( 45deg, transparent 0 9px, #26262b 9px 12px, transparent 12px 21px),
    repeating-linear-gradient(-45deg, transparent 0 9px, #26262b 9px 12px, transparent 12px 21px),
    linear-gradient(#303036, #17171b);
  box-shadow: 0 0 8px rgba(0,0,0,.6);
}
.frame__bar--top    { top: 0; left: 0; right: 0; height: 15px; }
.frame__bar--bottom { bottom: 0; left: 0; right: 0; height: 15px; }
.frame__bar--left   { top: 0; bottom: 0; left: 0; width: 15px; }
.frame__bar--right  { top: 0; bottom: 0; right: 0; width: 15px; }

/* jemný červený nádech uvnitř rámu */
.redwash {
  position: absolute;
  inset: 15px;
  background: radial-gradient(120% 90% at 50% 50%, rgba(255,40,40,.08), rgba(170,12,12,.24) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .7s ease;
}
.reds .redwash { opacity: 1; }

/* PAR reflektor (párek) přímo na truss nosníku */
.par {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.reds .par { opacity: 1; }

/* červená čočka PARu */
.par__lens {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #ff6a6a 30%, #c31717 62%, #5a0a0a 100%);
  box-shadow: 0 0 8px 2px rgba(255,45,45,.8);
}

/* měkká červená záře do ztracena kolem PARu (žádný kužel) */
.par__lens::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255,50,50,0.55) 0%,
              rgba(255,35,35,0.22) 34%,
              rgba(255,30,30,0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* text na tmavé straně zčervená (a vystoupí nad blackout) spolu s PARy */
.reds .eyebrow,
.reds .donate__hint,
.reds .donate__thanks {
  position: relative;
  z-index: 46;
}
.reds .eyebrow,
.reds .donate__hint,
.reds .donate__thanks,
.reds .account__label,
.reds .account strong {
  color: #ff2e2e;
  transition: color .55s ease;
}

/* =========================================================
   TELEFON: sloupce jsou pod sebou, takže tyč jde VODOROVNĚ
   na rozhraní světlé (text) a tmavé (QR) části = dělící čára.
   --divide-y počítá JS (horní hrana .donate); rig/rám plují se
   stránkou (absolute), aby seděly i po odscrollování.
   ========================================================= */
@media (max-width: 820px) {
  body { position: relative; }
  .rig, .frame { position: absolute; }

  /* vodorovná tyč na dělící čáře */
  .pole {
    position: absolute;
    top: var(--divide-y, 50%);
    left: 4%; right: 4%; bottom: auto;
    width: auto; height: 9px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #0d0d10 0%, #46464e 40%, #74747e 50%, #46464e 60%, #0d0d10 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,.5), 0 -3px 12px rgba(0,0,0,.5);
  }

  /* hlavy visí na vodorovné tyči: X = --pos, Y = dělící čára */
  .fixture {
    position: absolute;
    top: var(--divide-y, 50%);
    left: var(--pos);
  }
  .truss { top: 0; }

  /* červený truss rám kolem spodní (tmavé) části; horní bar supluje tyč */
  .frame {
    top: var(--divide-y, 50%);
    left: 0; right: 0; bottom: 0;
  }
  .frame__bar--top { display: none; }
}

/* respekt k uživatelům, kteří nechtějí animace — rovnou světlá stránka */
@media (prefers-reduced-motion: reduce) {
  .blackout, .rig, .frame { display: none; }
  .story, .qr, .account { animation: none; filter: none; box-shadow: none; }
  .account { box-shadow: none; }
}