/* Pochlubit se odznakem — efekty při příjezdu karty (core/brag-fx.js). Předloha 1:1: docs/mockups/src/2026-10-21-pochlubit-se/template.html
   ř. 289–329 (Hologram přes chat) a 375–386 (vlna, otřes, chroma). Selektory makety uzavřené pod jádro: .stage → .ucfx-shell,
   .cw → .ucfx-cw, .chat.hit → .ucfx-hit, .msg.wave → .ucfx-wave; animace s prefixem ucfx-. Dopad karty (.brag.holo.land)
   je v core/badge-brag.css. Místo dopadu = --ucfx-hy (px ode spodu překryvu, maketa 70 px). Jen tmavé téma. */
@property --ucfx-ba { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ucfx-bspin { to { --ucfx-ba: 360deg } }

/* ── Hologram: efekt přes celý chat při příjezdu karty (~4 s) ── */
.ucfx-cw { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; animation: ucfx-cwOut .6s ease-in 3.6s forwards; }
.ucfx-cw * { box-sizing: border-box; }
@keyframes ucfx-cwOut { to { opacity: 0 } }
/* Časová osa: 0–1,3 s nabíjení (tma, energie se stahuje do místa dopadu, sloup sjíždí), 1,3 s DOPAD (záblesk, vlny, výbuch, otřes), pak déšť. */
.ucfx-cw .cw-dim { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 80%, rgba(40, 24, 0, .35), rgba(0, 0, 0, .8)); opacity: 0; animation: ucfx-cwDim 2.6s ease-in-out both; }
@keyframes ucfx-cwDim { 0% { opacity: 0 } 20% { opacity: 1 } 50% { opacity: 1 } 55% { opacity: .3 } 100% { opacity: 0 } }
.ucfx-cw .cw-hit { position: absolute; left: 50%; bottom: var(--ucfx-hy, 70px); width: 0; height: 0; }
.ucfx-cw .cw-hit .chg { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c), 0 0 3px #fff; opacity: 0; animation: ucfx-charge var(--cd) cubic-bezier(.55, 0, 1, .55) var(--dl) both; }
@keyframes ucfx-charge { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.6) } 25% { opacity: 1 } 99% { opacity: 1; transform: translate(0, 0) scale(.3) } 100% { opacity: 0; transform: translate(0, 0) scale(.3) } }
.ucfx-cw .cw-hit .hcore { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255, 220, 130, .85) 35%, transparent 70%); mix-blend-mode: plus-lighter; opacity: 0; animation: ucfx-cwCore 1.6s ease-in .2s both; }
@keyframes ucfx-cwCore { 0% { opacity: 0; transform: scale(.2) } 68% { opacity: 1; transform: scale(1.1) } 72% { opacity: 1; transform: scale(3.2) } 100% { opacity: 0; transform: scale(4.5) } }
.ucfx-cw .cw-hit .ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 24px var(--c), inset 0 0 24px var(--c); opacity: 0; animation: ucfx-cwRing 1.2s cubic-bezier(.1, .7, .3, 1) var(--dl) forwards; }
@keyframes ucfx-cwRing { 0% { opacity: 1; transform: scale(.2) } 100% { opacity: 0; transform: scale(7); border-width: 1px } }
.ucfx-cw .cw-hit .bst { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) / -2); width: var(--w); height: var(--w); border-radius: 50%; opacity: 0; animation: ucfx-cwBurst var(--d) cubic-bezier(.15, .8, .3, 1) 1.3s forwards; }
.ucfx-cw .cw-hit .bst.sp { background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 2px #fff; }
.ucfx-cw .cw-hit .bst.cn { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc83d 45%, #b06d00); box-shadow: 0 0 10px rgba(255, 200, 60, .8); }
@keyframes ucfx-cwBurst { 0% { opacity: 1; transform: translate(0, 0) scale(1.4) } 70% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5) } }
.ucfx-cw .cw-hit .stk { position: absolute; left: -320px; top: -3px; width: 640px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--ha) 25%, #fff 50%, var(--hb) 75%, transparent); mix-blend-mode: plus-lighter; opacity: 0; animation: ucfx-streak 1s ease-out 1.3s both; }
@keyframes ucfx-streak { 0% { opacity: 0; transform: scaleX(.05) } 18% { opacity: 1; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1.25) scaleY(.3) } }
.ucfx-cw .cw-flash { position: absolute; inset: 0; mix-blend-mode: plus-lighter; opacity: 0; background: radial-gradient(90% 60% at 50% calc(100% - var(--ucfx-hy, 70px)), #fff, rgba(255, 215, 120, .7) 30%, rgba(180, 90, 255, .25) 60%, transparent 85%); animation: ucfx-cwFlash .9s ease-out 1.3s forwards; }
@keyframes ucfx-cwFlash { 0% { opacity: 1 } 100% { opacity: 0 } }
.ucfx-cw .cw-edge { position: absolute; inset: 0; border-radius: 14px; padding: 3px; background: conic-gradient(from var(--ucfx-ba), #ff3c9f, #ffcf3c, #4dffae, #3cb1ff, #b45cff, #ff3c9f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 10px rgba(255, 200, 80, .8)); opacity: 0; animation: ucfx-cwEdge 3.6s ease-in-out both, ucfx-bspin 1.6s linear infinite; }
@keyframes ucfx-cwEdge { 0% { opacity: 0 } 12% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 } }
.ucfx-cw .cw-prism { position: absolute; inset: -30% -80%; mix-blend-mode: plus-lighter; opacity: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 60, 160, .4) 44%, rgba(255, 210, 60, .4) 47.5%, rgba(80, 255, 170, .4) 51%, rgba(60, 170, 255, .4) 54.5%, rgba(190, 90, 255, .4) 58%, transparent 62%);
  animation: ucfx-cwPrism 1.3s ease-in-out .25s both; }
@keyframes ucfx-cwPrism { 0% { opacity: 1; transform: translateX(-50%) } 99% { opacity: 1; transform: translateX(50%) } 100% { opacity: 0 } }
.ucfx-cw .cw-beam { position: absolute; left: 50%; top: 0; width: 160px; height: calc(100% - var(--ucfx-hy, 70px)); margin-left: -80px; transform-origin: 50% 0; opacity: 0; mix-blend-mode: plus-lighter;
  background: linear-gradient(to bottom, rgba(255, 220, 120, 0), rgba(255, 200, 80, .5) 45%, rgba(255, 240, 200, .95) 80%, rgba(255, 250, 235, .7));
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, #000 72%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, #000 72%, transparent); mask-composite: intersect;
  animation: ucfx-cwBeam 1.7s cubic-bezier(.45, 0, .55, 1) .5s both; }
.ucfx-cw .cw-pool { position: absolute; left: 50%; bottom: var(--ucfx-hy, 70px); width: 320px; height: 110px; margin: 0 0 -55px -160px; border-radius: 50%; opacity: 0; mix-blend-mode: plus-lighter; filter: blur(8px);
  background: radial-gradient(closest-side, rgba(255, 250, 230, .95), rgba(255, 210, 110, .55) 45%, rgba(255, 170, 60, .18) 75%, transparent);
  animation: ucfx-cwPool 2.4s ease-out .5s both; }
@keyframes ucfx-cwPool { 0% { opacity: 0; transform: scale(.3, .5) } 25% { opacity: .75; transform: scale(.8, .8) } 33% { opacity: 1; transform: scale(1.25, 1.1) } 60% { opacity: .55; transform: scale(1.05, .9) } 100% { opacity: 0; transform: scale(1.4, .8) } }
@keyframes ucfx-cwBeam { 0% { opacity: 0; transform: scaleY(0) scaleX(.25) } 10% { opacity: .8 } 44% { opacity: .9; transform: scaleY(1) scaleX(.45) } 49% { opacity: 1; transform: scaleY(1) scaleX(1.6) } 70% { opacity: .8; transform: scaleY(1) scaleX(.6) } 100% { opacity: 0; transform: scaleY(1) scaleX(.2) } }
.ucfx-cw .cw-rain i { position: absolute; top: -18px; opacity: 0; animation: ucfx-cwFall var(--d) linear var(--dl) both; }
.ucfx-cw .cw-rain i.coin { width: var(--w); height: var(--w); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc83d 45%, #b06d00); box-shadow: 0 0 8px rgba(255, 200, 60, .7); }
.ucfx-cw .cw-rain i.conf { width: 6px; height: 11px; border-radius: 1px; background: var(--c); }
@keyframes ucfx-cwFall { 0% { opacity: 0; transform: translateY(0) rotate(0) rotateY(0) } 8% { opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0; transform: translateY(760px) rotate(400deg) rotateY(900deg) } }

/* ── Vlna přes zprávy od karty, otřes celého chatu, barevné rozdvojení chatu ── */
.ucfx-wave { animation: ucfx-msgWave .7s ease-out var(--ucfx-wd, 0s) both; }
@keyframes ucfx-msgWave { 0% { transform: none; filter: none } 30% { transform: translateY(-3px); filter: brightness(1.8) drop-shadow(0 0 6px rgba(255, 200, 80, .8)) } 100% { transform: none; filter: none } }
/* Otřes musí vyhrát nad rámem vylepšeného chatu (.ucfx-shell.heavenly.p4h = 3 třídy, chat-upgrade.css) — vylepšení trvá
   celý den, karta tedy často přijede do už vylepšeného chatu. Zdvojené třídy = specificita 4, nezávisle na pořadí CSS
   (hlídá scripts/test-brag-fx.js). Po otřesu (třída se sundá) rám pokračuje. */
.ucfx-shell.qk3.qk3.qk3 { animation: ucfx-qk3 .45s ease-out .22s both; }
.ucfx-shell.qk4.qk4.qk4 { animation: ucfx-qk4 .7s cubic-bezier(.3, .8, .4, 1) .22s both; }
.ucfx-shell.qkh.qkh.qkh { animation: ucfx-qkh .75s cubic-bezier(.3, .8, .4, 1) .36s both, ucfx-qkr .09s linear 0s 4; }
@keyframes ucfx-qk3 { 0% { transform: none } 20% { transform: translate(-2px, 2px) } 45% { transform: translate(2px, -1px) } 70% { transform: translate(-1px, 1px) } 100% { transform: none } }
@keyframes ucfx-qk4 { 0% { transform: none } 10% { transform: translate(-6px, 4px) rotate(-.3deg) } 24% { transform: translate(5px, -4px) rotate(.25deg) } 40% { transform: translate(-4px, 2px) } 58% { transform: translate(3px, -2px) } 78% { transform: translate(-1px, 1px) } 100% { transform: none } }
/* Hologram: otřes jako v odhalení (nejsilnější hned v okamžiku dopadu, pak doznívá), jen větší; před dopadem jemné chvění. */
@keyframes ucfx-qkh { 0% { transform: none } 8% { transform: translate(-11px, 7px) rotate(-.6deg) } 20% { transform: translate(10px, -8px) rotate(.5deg) } 34% { transform: translate(-7px, 5px) rotate(-.3deg) } 50% { transform: translate(5px, -3px) } 68% { transform: translate(-2px, 2px) } 100% { transform: none } }
@keyframes ucfx-qkr { 0% { transform: none } 25% { transform: translate(-1px, 1px) } 50% { transform: translate(1px, -1px) } 75% { transform: translate(-1px, 0) } 100% { transform: translate(1px, 1px) } }
.ucfx-hit { animation: ucfx-chroma 1s ease-out .36s both; }
@keyframes ucfx-chroma { 0% { filter: drop-shadow(-9px 0 0 rgba(255, 40, 120, .9)) drop-shadow(9px 0 0 rgba(40, 220, 255, .9)) } 30% { filter: drop-shadow(-4px 1px 0 rgba(255, 40, 120, .7)) drop-shadow(4px -1px 0 rgba(40, 220, 255, .7)) } 100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) } }
/* Systémové „omezit animace“ jen mimo OBS (body.uc-raw — v OBS efekty vždy). Shell = body (addon i web) i vnořený prvek. */
@media (prefers-reduced-motion: reduce) {
  body:not(.uc-raw) .ucfx-cw { display: none; }
  body:not(.uc-raw) .ucfx-wave, body:not(.uc-raw) .ucfx-hit,
  body:not(.uc-raw).ucfx-shell.qk3.qk3.qk3, body:not(.uc-raw).ucfx-shell.qk4.qk4.qk4, body:not(.uc-raw).ucfx-shell.qkh.qkh.qkh,
  body:not(.uc-raw) .ucfx-shell.qk3.qk3.qk3, body:not(.uc-raw) .ucfx-shell.qk4.qk4.qk4, body:not(.uc-raw) .ucfx-shell.qkh.qkh.qkh { animation: none; }
}