/* Maskoti Múdreho Košíka.
 *
 * Objavia sa pri niektorých úkonoch, chvíľu sa pohupujú a odídu. Zámerne
 * NIE sú interaktívne - `pointer-events: none` na celom kontajneri, aby
 * postavička nikdy neprekryla tlačidlo, na ktoré chce používateľ kliknúť.
 *
 * Pohyb je čisto CSS. Zdrojové obrázky sú 3D rendery, nie 3D modely, takže
 * WebGL by tu nič nepridalo - len by pridalo knižnicu a čas načítania.
 */

.mascot-layer {
  position: fixed;
  right: clamp(8px, 3vw, 28px);
  bottom: clamp(8px, 3vw, 28px);
  z-index: 60;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.mascot {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(28px) scale(0.92);
}

.mascot img {
  display: block;
  height: clamp(96px, 14vw, 148px);
  width: auto;
  /* Mäkký tieň pod postavičkou - bez neho pôsobí nalepene na stránke. */
  filter: drop-shadow(0 10px 14px rgba(12, 20, 36, 0.22));
}

.mascot-bubble {
  max-width: 190px;
  margin-bottom: 14px;
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  background: #0c1424;
  color: #f8fafc;
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(12, 20, 36, 0.28);
  opacity: 0;
  transform: translateY(6px);
}

/* --- prichod, pohupovanie, odchod ---------------------------------------- */
.mascot.is-in {
  animation: mascot-prichod 620ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}

.mascot.is-in img {
  /* Pohupovanie sa spusti az po prichode, aby sa animacie neprekryvali. */
  animation: mascot-pohupovanie 2.6s ease-in-out 620ms infinite;
}

.mascot.is-in .mascot-bubble {
  animation: mascot-bublina 320ms ease-out 380ms forwards;
}

.mascot.is-out {
  animation: mascot-odchod 420ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes mascot-prichod {
  0%   { opacity: 0; transform: translateY(46px) scale(0.86) rotate(-6deg); }
  70%  { opacity: 1; transform: translateY(-6px) scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes mascot-pohupovanie {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.5deg); }
}

@keyframes mascot-bublina {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mascot-odchod {
  to { opacity: 0; transform: translateY(34px) scale(0.94); }
}

/* --- varianty pohybu podla postavicky ------------------------------------ */
/* Behajuci sportovec sa hyba rychlejsie, superhrdina sa vznasa pomaly. */
.mascot[data-mascot="sportovec"].is-in img {
  animation-duration: 1.1s;
}

.mascot[data-mascot="superhrdina"].is-in img {
  animation: mascot-vznasanie 3.4s ease-in-out 620ms infinite;
}

@keyframes mascot-vznasanie {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}

/* Objavitel sa jemne nakloni, akoby cez lupu skumal. */
.mascot[data-mascot="objavitel"].is-in img {
  animation: mascot-skumanie 2.2s ease-in-out 620ms infinite;
}

@keyframes mascot-skumanie {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-5px) rotate(-4deg); }
  70%      { transform: translateY(-3px) rotate(3deg); }
}

/* --- pristupnost ---------------------------------------------------------- */
/* Kto si vypol animacie, ma na to dovod. Postavicka sa stale zobrazi, ale
   bez pohybu - informacia zostane, pohyb zmizne. */
@media (prefers-reduced-motion: reduce) {
  .mascot.is-in,
  .mascot.is-in img,
  .mascot.is-in .mascot-bubble,
  .mascot.is-out {
    animation: none !important;
  }
  .mascot.is-in,
  .mascot.is-in .mascot-bubble {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease;
  }
  .mascot.is-out { opacity: 0; transition: opacity 200ms ease; }
}

@media (max-width: 520px) {
  /* Na mobile by bublina zabrala pol obrazovky. */
  .mascot-bubble { display: none; }
}