/* =========================================================
   app-zivo.css: pokret za elemente po kojima se Uslužionica
   prepoznaje. Tokeni, boost, oznake, omiljeni, znak.
   Pravila iz 05-pokret.md:
   - samo transform i opacity;
   - ambijentalne petlje 6 do 7 s, vidljiv pokret oko 15 %;
   - hover 160 do 220 ms, klik 120 ms;
   - prefers-reduced-motion (app-stanja.css) gasi sve, a svaki
     element i dalje ima svoj mirni, krajnji izgled.
   ========================================================= */

/* ---------- Token (TokenIkona) ---------- */
/* Mirovanje: dragulj se jednom u 7 s okrene oko svoje ose. */
.token { transform-origin: 50% 50%; animation: us-token-okret 7s var(--us-ease) infinite; }
/* Hover na mestu gde stoji stanje: odmah poskoči i okrene se */
.token-pil:hover .token,
.korisnik:hover .token,
.tok-veliko:hover .token,
.stanje-broj:hover .token { animation: us-token-skok 700ms var(--us-ease) both; }
.token-pil { transition: transform 120ms var(--us-ease), border-color var(--us-t-mikro) var(--us-ease); }
.token-pil:hover { border-color: var(--us-accent); }
.token-pil:active { transform: scale(.96); }

/* Veliki token u Novčaniku i na Početnoj: lebdi, sa sjajem iza */
.stanje-broj, .tok-veliko { position: relative; isolation: isolate; }
.stanje-broj::before, .tok-veliko::before {
  content: ""; position: absolute; z-index: -1; left: -14px; top: 50%;
  width: 64px; height: 64px; margin-top: -32px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,255,.38), transparent 70%);
  animation: us-sjaj-disanje 6s ease-in-out infinite;
}
.stanje-broj .token, .tok-veliko .token { animation: us-token-dragulj 7s var(--us-ease) infinite; }

/* Token koji odleti posle zarade ili kupovine: „+27" iznad dugmeta */
.token-let {
  position: absolute; z-index: 12; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--us-surface); border: 1px solid var(--us-accent);
  color: var(--us-fg); font: 700 15px/1 var(--us-font); font-variant-numeric: tabular-nums;
  box-shadow: var(--us-shadow-md); pointer-events: none;
  animation: us-token-let 1400ms var(--us-ease) both;
}
.token-let .token { width: 14px; height: 19px; animation: us-token-skok 700ms var(--us-ease) both; }

/* ---------- Boost (BoostMark, BoostChip, istaknut oglas) ---------- */
/* Munja kratko blesne jednom u 6 s */
.boost-znak svg { transform-origin: 50% 50%; animation: us-munja 6s var(--us-ease) infinite; }
.boost:hover .boost-znak svg,
.dugme-boost:hover .boost-znak svg,
.boost-glava:hover .boost-znak svg { animation: us-munja-odmah 520ms var(--us-ease) both; }

/* Sjaj preko čipa „Istaknuto": svetao pojas, 6 s, vidljiv 15 % */
.boost { position: relative; overflow: hidden; }
.boost::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: us-sjaj-prolaz 6s var(--us-ease) infinite 1.2s;
}

/* Istaknuta kartica oglasa: isti pojas preko cele kartice.
   Na tamnoj temi lajm, na svetloj beo, jer lajm na beloj nema kontrast. */
.lc[data-boost="da"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(217,249,157,.16) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: us-sjaj-prolaz 6s var(--us-ease) infinite;
}
[data-theme="light"] .lc[data-boost="da"]::after { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); }
.lc[data-boost="da"]:hover { box-shadow: 0 0 0 1px var(--us-boost-ivica), var(--us-senka-podignuta); }

/* Dugme „Istakni oglas": pojas prođe jednom na hover */
.dugme-boost { position: relative; overflow: hidden; }
.dugme-boost::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 700ms var(--us-ease);
}
.dugme-boost:hover::after { transform: translateX(130%); }

/* Zaglavlje Boost ekrana: lajm obod diše (opacity sloja, ne senke) */
.boost-glava { position: relative; isolation: isolate; }
.boost-glava::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(217,249,157,.35), 0 10px 28px rgba(132,204,22,.18);
  animation: us-sjaj-disanje 6s ease-in-out infinite;
}

/* ---------- Oznake, nepročitano, omiljeni ---------- */
/* Oznaka sa brojem iskoči kad se pojavi */
.broj { animation: us-oznaka-ulaz var(--us-t-ulaz) var(--us-ease) both; }
/* Tačka nepročitanog: talas jednom u 6 s */
.tacka { position: relative; }
.tacka::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: us-talas 6s ease-out infinite; }

/* Omiljeni: srce se popuni i iskoči na klik */
.lc-omiljeni { transition: transform var(--us-t-mikro) var(--us-ease); }
.lc-omiljeni:hover { transform: scale(1.08); }
.lc-omiljeni:active { transform: scale(.92); }
.lc-omiljeni[aria-pressed="true"] { color: #E11D48; }
.lc-omiljeni[aria-pressed="true"] svg { fill: #E11D48; animation: us-srce 420ms var(--us-ease) both; }

/* ---------- Ljuska ---------- */
.traka-znak svg { transition: transform var(--us-t-stanje) var(--us-ease); }
.traka-znak:hover svg { transform: rotate(-8deg) scale(1.06); }
.stavka .ik { transition: transform var(--us-t-mikro) var(--us-ease); }
.stavka:hover .ik { transform: translateX(2px); }
.stavka[aria-current="page"] .ik { animation: us-oznaka-ulaz var(--us-t-ulaz) var(--us-ease) both; }

/* ForYouCard „ističe": peščanik se okrene jednom u 6 s */
.fy-i.warn svg { animation: us-pescanik 6s var(--us-ease) infinite; }

/* Paket tokena i kartica posla na hover */
.paket { transition: transform 220ms var(--us-ease), border-color var(--us-t-mikro) var(--us-ease); }
.paket:hover { transform: translateY(-3px); }
.paket[aria-pressed="true"] b { display: inline-block; animation: us-oznaka-ulaz var(--us-t-ulaz) var(--us-ease) both; }

/* Uspeh: kvačica iskoči, pa jedan talas */
.uspeh-znak { position: relative; isolation: isolate; }
.uspeh-znak::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--us-ok-fg); animation: us-talas 1.4s ease-out 2 both; }

/* =========================================================
   Keyframe-ovi (samo transform i opacity)
   ========================================================= */
@keyframes us-token-okret { 0%, 84% { transform: perspective(80px) rotateY(0); } 100% { transform: perspective(80px) rotateY(360deg); } }
@keyframes us-token-skok { 0% { transform: perspective(80px) translateY(0) rotateY(0); } 45% { transform: perspective(80px) translateY(-4px) rotateY(180deg); } 100% { transform: perspective(80px) translateY(0) rotateY(360deg); } }
@keyframes us-token-dragulj { 0% { transform: perspective(120px) translateY(0) rotateY(0); } 40% { transform: perspective(120px) translateY(-4px) rotateY(0); } 80% { transform: perspective(120px) translateY(0) rotateY(0); } 100% { transform: perspective(120px) translateY(0) rotateY(360deg); } }
@keyframes us-token-let { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 30% { transform: translateY(-4px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(.96); } }
@keyframes us-sjaj-disanje { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes us-munja { 0%, 10%, 100% { transform: scale(1) rotate(0); } 4% { transform: scale(1.28) rotate(-10deg); } 7% { transform: scale(.94) rotate(4deg); } }
@keyframes us-munja-odmah { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-12deg); } 70% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes us-sjaj-prolaz { 0% { transform: translateX(-130%); } 15%, 100% { transform: translateX(130%); } }
@keyframes us-oznaka-ulaz { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes us-talas { 0% { opacity: .55; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes us-srce { 0% { transform: scale(.6); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes us-pescanik { 0%, 88% { transform: rotate(0); } 100% { transform: rotate(180deg); } }