/* ============================================================
   ДВИЖЕНИЕ — общ език за анимациите в цялото приложение.

   Три правила, които важат навсякъде тук:
   1. Движи се САМО transform и opacity. Те се смятат от видеокартата и
      не карат браузъра да преизчислява разположението — затова остава
      плавно и на слаб телефон.
   2. Всичко минава през токените отдолу. Ако някога решим, че приложението
      трябва да е по-бързо или по-бавно, се пипа на едно място.
   3. Настройки → Анимации изключва всичко (html[data-motion="off"] в
      base.css). Затова нито една анимация тук не бива да е носител на
      смисъл — само на усещане.
   ============================================================ */

:root {
  /* Времена. Кратко за докосване, средно за поява, дълго за екран. */
  --dur-1: .12s;   /* реакция на пръст */
  --dur-2: .22s;   /* смяна на състояние */
  --dur-3: .34s;   /* поява на елемент */
  --dur-4: .5s;    /* смяна на екран */

  /* Криви. „out" пуска бързо и спира меко — така се усеща отзивчиво. */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.55, 0, 1, .45);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);   /* лек отскок */

  --stag: 42ms;    /* стъпка между съседни елементи в списък */
}

/* ============================================================
   ПОЯВА — един набор, ползва се навсякъде
   ============================================================ */
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px); } }
@keyframes dropIn   { from { opacity: 0; transform: translateY(-14px); } }
@keyframes fadeIn   { from { opacity: 0; } }
@keyframes zoomIn   { from { opacity: 0; transform: scale(.94); } }
@keyframes slideL   { from { opacity: 0; transform: translateX(18px); } }
@keyframes popIn    { from { opacity: 0; transform: scale(.86); } }
@keyframes sheetUp  { from { transform: translateY(100%); } }

/* ============================================================
   СМЯНА НА ЕКРАН
   Роутърът слага класа при всяко ново рисуване (js/router.js).
   ============================================================ */
.screen.enter { animation: riseIn var(--dur-4) var(--ease-out) both; }

/* ============================================================
   СТЪПАЛО — редовете влизат един след друг, а не наведнъж
   Слага се .stagger на контейнера. Без JavaScript: закъснението идва от
   поредността на детето. Дванадесет стигат — по-надолу вече се скролва.
   ============================================================ */
.stagger > * { animation: riseIn var(--dur-3) var(--ease-out) both; }
.stagger > *:nth-child(1)  { animation-delay: calc(var(--stag) * 0); }
.stagger > *:nth-child(2)  { animation-delay: calc(var(--stag) * 1); }
.stagger > *:nth-child(3)  { animation-delay: calc(var(--stag) * 2); }
.stagger > *:nth-child(4)  { animation-delay: calc(var(--stag) * 3); }
.stagger > *:nth-child(5)  { animation-delay: calc(var(--stag) * 4); }
.stagger > *:nth-child(6)  { animation-delay: calc(var(--stag) * 5); }
.stagger > *:nth-child(7)  { animation-delay: calc(var(--stag) * 6); }
.stagger > *:nth-child(8)  { animation-delay: calc(var(--stag) * 7); }
.stagger > *:nth-child(9)  { animation-delay: calc(var(--stag) * 8); }
.stagger > *:nth-child(10) { animation-delay: calc(var(--stag) * 9); }
.stagger > *:nth-child(11) { animation-delay: calc(var(--stag) * 10); }
.stagger > *:nth-child(n+12) { animation-delay: calc(var(--stag) * 11); }

/* ============================================================
   ДОКОСВАНЕ — всичко, което се натиска, реагира
   ============================================================ */
.btn, .list-item, .tile, .game-card, .promo-card, .qs, .cg, .pill, .pillbtn {
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}
.btn:active:not(:disabled),
.list-item:active, .tile:active, .qs:active, .cg:active,
.pill:active, .pillbtn:active { transform: scale(.965); }
.game-card:active, .promo-card:active { transform: scale(.975); }

@media (hover: hover) {
  .list-item:hover, .tile:hover { background: var(--surface-2); }
  .game-card:hover, .promo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
}

/* ============================================================
   ТАББАР — иконата подскача при избор
   ============================================================ */
.tabbar button .ic { transition: transform var(--dur-2) var(--ease-spring); }
.tabbar button[aria-current="page"] .ic { transform: translateY(-3px) scale(1.12); }
.tabbar button .dot { animation: popIn var(--dur-3) var(--ease-spring) both; }

/* ============================================================
   ЧИСЛА, КОИТО СЕ МЕНЯТ (монети, точки)
   Слага се за миг при промяна — вижда се, че се е случило нещо.
   ============================================================ */
@keyframes bump { 50% { transform: scale(1.22); } }
.bump { animation: bump var(--dur-3) var(--ease-spring); }

/* ============================================================
   ЛЕКО ДИШАНЕ за неща, които чакат внимание
   ============================================================ */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.breathe { animation: breathe 2.4s ease-in-out infinite; }

/* Мек ореол — за бутона, който е следващата стъпка */
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95,208,114,.5); }
  70%      { box-shadow: 0 0 0 14px rgba(95,208,114,0); }
}
.halo { animation: halo 2.2s ease-out infinite; }

/* ============================================================
   ЗАРЕЖДАНЕ — вместо празен екран
   ============================================================ */
@keyframes shimmer { to { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 0%, var(--surface-3) 45%, var(--surface-2) 90%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-md);
}


/* ============================================================
   BELOTCHE — анимациите на новата визия
   Лаймът „диша", картите плават и се ветрилят, чиповете звънят.
   Всичко е само transform/opacity/box-shadow и се спира от
   Настройки → Анимации (html[data-motion="off"]).
   ============================================================ */

/* Неоново дишане — главното действие на екрана */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(95,208,114,.38), inset 0 1px 0 rgba(255,255,255,.45); }
  50%      { box-shadow: 0 0 30px rgba(95,208,114,.72), inset 0 1px 0 rgba(255,255,255,.45); }
}
.neon { animation: neonPulse 2.6s ease-in-out infinite; }

/* Отблясък, който минава през лайм бутона на всеки няколко секунди */
@keyframes shineSweep {
  0%, 62% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(230%) skewX(-18deg); }
}
.shine::after {
  content: ""; position: absolute; inset: -2px auto -2px 0; width: 42%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shineSweep 4.2s var(--ease-in) infinite; pointer-events: none;
}

/* Централният бутон „Играй" в навигацията — пулс + вълна при натискане */
@keyframes fabGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(95,208,114,.40); }
  50%      { box-shadow: 0 0 34px rgba(95,208,114,.75); }
}
.tabbar .tab-play { animation: fabGlow 2.8s ease-in-out infinite; transition: transform var(--dur-1) var(--ease-out); }
.tabbar .tab-play:active { transform: scale(.92); }
@keyframes ripple { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
.ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); pointer-events: none;
  animation: ripple .6s var(--ease-out) forwards; }
.tabbar .tab .bi { transition: transform var(--dur-2) var(--ease-spring); }
.tabbar .tab[aria-current="page"] .bi { transform: translateY(-2px) scale(1.08); }
.tabbar .tab .ind { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }

/* Точката „онлайн" — вълна около нея */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--brand); box-shadow: 0 0 8px rgba(95,208,114,.8); position: relative;
}
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--brand);
  animation: ripple 1.8s var(--ease-out) infinite;
}

/* Карти, които леко плават (вход, начало, герой) */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-7px) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
}
.float { animation: floatY 5s ease-in-out infinite; }

/* Ветрило: картите излизат от купчина и се разтварят по --rot и --tx */
@keyframes fanOut {
  from { transform: translate(0, 18px) rotate(0deg) scale(.92); opacity: 0; }
  to   { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)); opacity: 1; }
}
.fan-card { animation: fanOut .7s var(--ease-spring) both; }

/* Чипът се обръща като монета, когато сумата се смени */
@keyframes chipFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.chip.flip { animation: chipFlip .6s var(--ease-out); }

/* Пренасяне на число нагоре (+500) над портфейла */
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }
.float-num {
  position: fixed; z-index: 400; pointer-events: none; font-weight: 900; font-size: .9rem;
  color: var(--brand); text-shadow: 0 0 10px rgba(95,208,114,.7);
  animation: floatUp 1.1s var(--ease-out) forwards;
}

/* Конфети от бои и чипове (победа, ново ниво, печалба от колелото) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
.confetti i {
  position: absolute; top: -40px; left: var(--x); font-style: normal; font-size: var(--s, 22px);
  color: var(--c, var(--brand)); text-shadow: 0 0 10px currentColor;
  animation: confettiFall var(--d, 2.6s) cubic-bezier(.2,.6,.4,1) var(--delay, 0s) forwards;
}
@keyframes confettiFall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), 110vh) rotate(var(--r, 540deg)); opacity: 0; }
}

/* Лъчи зад голямо събитие (Белот!, Победа, колело) */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.rays {
  position: absolute; inset: -40%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(95,208,114,.22) 0deg 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%);
          mask: radial-gradient(circle, #000 20%, transparent 62%);
  animation: spinSlow 18s linear infinite;
}

/* Голямо заглавие, което „удря" на екрана */
@keyframes slam {
  0%   { transform: scale(2.2); opacity: 0; filter: blur(6px); }
  60%  { transform: scale(.94); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}
.slam { animation: slam .6s var(--ease-out) both; }

/* Лента, която се плъзга отгоре (обявени декларации, известия на масата) */
@keyframes bannerIn {
  0%   { transform: translateY(-16px) scale(.9); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.03); opacity: 1; }
  100% { transform: none; }
}
.banner-in { animation: bannerIn .5s var(--ease-spring) both; }

@media (prefers-reduced-motion: reduce) {
  .shine::after, .float, .rays, .live-dot::after { animation: none; }
}