/* Doplnky k Tailwindu — hlavne swipovacia karta a mobilné výšky. */

/* Farby sú definované v tailwind.config.js; tu sú len tie, ktoré treba
   mimo utilít — v @keyframes, v tieni pečiatky a v podfarbení grafu. */
:root {
  --nendi-tmava: #1F4E57;
  --nendi-tyrkys: #4E9A9A;
  --nendi-oranzova: #E0784A;
  --nendi-licko: #F3ADA8;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
  overscroll-behavior-y: contain;   /* aby ťahanie karty neťahalo stránku */
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* výška viewportu na mobile bez skákania adresného riadka */
.vyska-obrazovky {
  min-height: 100vh;
  min-height: 100dvh;
}

.bezpecny-spodok {
  padding-bottom: calc(1rem + var(--safe-bottom));
}

/* ── swipovacia karta ─────────────────────────────────────────────── */

.karta {
  touch-action: pan-y;
  will-change: transform;
  user-select: none;
}

.karta-plynulo {
  transition: transform .28s ease-out, opacity .28s ease-out;
}

.karta-prec-vpravo {
  transform: translateX(140%) rotate(22deg) !important;
  opacity: 0;
}

.karta-prec-vlavo {
  transform: translateX(-140%) rotate(-22deg) !important;
  opacity: 0;
}

/* pečiatky ÁNO / NIE, ktoré presvitajú počas ťahania */
.peciatka {
  opacity: 0;
  transition: opacity .12s linear;
  pointer-events: none;
}

/* ── drobnosti ────────────────────────────────────────────────────── */

.velke-tlacidlo {
  min-height: 56px;               /* pohodlné jednou rukou */
}

.dotykove {
  min-width: 44px;
  min-height: 44px;
}

/* ── maskot ───────────────────────────────────────────────────────── */
/* Bocian je obrázok (public/img/bocian*.webp), kedysi to bolo vkladané
   SVG — preto animácia sedí na .bocian-pluje img, nie na svg. */

@keyframes vznesenie {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.bocian-pluje img {
  animation: vznesenie 3.4s ease-in-out infinite;
}

/* Maskot je stojaci bocian — vysoký a úzky (v zdroji 323×697). Veľkosť
   preto riadi VÝŠKA, nie šírka: pri šírkovom rozmere by pri 260 px zabral
   na výšku 561 px a na telefóne by vytlačil tlačidlá pod okraj.
   Pod bocianom musí zostať logo, slogan a dve tlačidlá, to je asi 250 px.

   Kresba má v zdroji 697 px na výšku, väčšie odvodeniny sú dopočítané —
   nad túto hranicu ho preto nezväčšujeme, len by zmäkol. */
.bocian-velky {
  height: min(42vh, 330px);
  width: auto;
}

.bocian-stredny {
  height: min(26vh, 200px);
  width: auto;
}

@media (max-height: 700px) {
  .bocian-velky { height: min(36vh, 220px); }
  .bocian-stredny { height: min(22vh, 140px); }
}

/* ── oznámenie novej zhody ────────────────────────────────────────── */
/* Prichádza zdola, nad ovládacími tlačidlami. Kartu s menom neprekrýva. */

@keyframes zhoda-prichod {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.oznam-zhoda > div {
  animation: zhoda-prichod .28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bocian-pluje img { animation: none; }
  .karta-plynulo { transition: none; }
  .oznam-zhoda > div { animation: none; }
}