/* asia.com.ge — UFASOFILMEBI apps banner above the player (2026-10-12), engine/modules/asia_neon/ufabanner.php
   A still aurora ground behind glass, a ring of light running round the edge, the app coin with a pulsing ring,
   a light that follows the mouse (--mx / --my from js/ufa-banner.js), words that fall in one by one, a button with a body.
   (The ground and the coin do not move: the owner found the leaning stage and the turning coin restless.)
   Both faces are free fonts of BPG-InfoTech, taken from mol.ge. */
@font-face { font-family: "BPG ExtraSquare"; src: url("../fonts/bpg-extrasquare/BPG-ExtraSquare.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "BPG ExtraSquare Mtavruli"; src: url("../fonts/bpg-extrasquare/BPG-ExtraSquare-Mtavruli.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@property --ufab-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.ufab { --mx: 50%; --my: 50%; position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0 0 14px; padding: 1.5px; border-radius: 18px; color: #fff; font-family: "BPG ExtraSquare", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; isolation: isolate;
    /* the edge: a comet of light that keeps going round */
    background: conic-gradient(from var(--ufab-a), rgba(124, 92, 255, .25) 0deg, #7C5CFF 60deg, #22D3EE 110deg, #F0ABFC 150deg, rgba(124, 92, 255, .25) 210deg, rgba(124, 92, 255, .18) 360deg);
    animation: ufabRing 6s linear infinite; box-shadow: 0 18px 44px rgba(8, 6, 28, .6), 0 0 34px rgba(124, 92, 255, .22); }
@keyframes ufabRing { to { --ufab-a: 360deg; } }
.ufab *, .ufab *::before, .ufab *::after { box-sizing: border-box; }

/* ---------- the ground: deep blue-violet glass with slow aurora lights ---------- */
.ufab-bg { position: absolute; z-index: 0; top: 1.5px; right: 1.5px; bottom: 1.5px; left: 1.5px; overflow: hidden; border-radius: 16.5px; background: linear-gradient(120deg, #0B0B1E 0%, #12102B 45%, #170F2E 100%); }
.ufab-orb { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .75; }
.ufab-o1 { left: -6%; top: -70%; width: 38%; height: 190%; background: radial-gradient(closest-side, #6D4BFF, transparent); }
.ufab-o2 { left: 38%; top: 10%; width: 34%; height: 170%; background: radial-gradient(closest-side, rgba(34, 211, 238, .75), transparent); opacity: .42; }
.ufab-o3 { right: -8%; top: -80%; width: 40%; height: 200%; background: radial-gradient(closest-side, #E879F9, transparent); opacity: .6; }
/* a floor of fine lines running into the distance */
.ufab-grid { position: absolute; left: -10%; right: -10%; bottom: -60%; height: 150%; background-image: linear-gradient(rgba(180, 170, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 170, 255, .16) 1px, transparent 1px); background-size: 34px 34px; transform: perspective(260px) rotateX(64deg); transform-origin: 50% 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 45%, transparent 100%); }
/* the light under the mouse, and a streak that crosses the glass now and then */
.ufab-spot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .13), transparent 65%); opacity: 0; transition: opacity .3s; }
.ufab.is-live .ufab-spot { opacity: 1; }
.ufab-shine { position: absolute; top: -30%; bottom: -30%; left: -25%; width: 16%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-20deg); animation: ufabShine 6s ease-in-out infinite; }
@keyframes ufabShine { 0%, 55% { left: -25%; } 100% { left: 125%; } }
/* embers rising, small and few: they give the picture air */
.ufab-sparks { position: absolute; z-index: 1; top: 1.5px; right: 1.5px; bottom: 1.5px; left: 1.5px; overflow: hidden; border-radius: 16.5px; pointer-events: none; }
.ufab-sparks i { position: absolute; bottom: -8px; width: var(--z, 2px); height: var(--z, 2px); border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 6px 1px rgba(255, 196, 80, .95), 0 0 12px 3px rgba(255, 110, 60, .45); opacity: 0; animation: ufabSpark linear infinite; will-change: transform, opacity; }
.ufab-sparks i:nth-child(3n) { background: #C7B8FF; box-shadow: 0 0 6px 1px rgba(150, 120, 255, .95), 0 0 12px 3px rgba(34, 211, 238, .4); }
@keyframes ufabSpark { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); } 12% { opacity: 1; } 60% { opacity: .8; transform: translate3d(var(--dx, 10px), -80px, 0) scale(.8); } 100% { opacity: 0; transform: translate3d(calc(var(--dx, 10px) * -.5), -150px, 0) scale(.2); } }

/* ---------- the stage ---------- */
.ufab-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; min-height: 112px; padding: 18px 26px; }

/* the app coin: still, a ring pulses round it */
.ufab-coin { position: relative; flex: 0 0 68px; width: 68px; height: 68px; margin-left: 6px; text-decoration: none; }
.ufab-coin-3d { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.ufab-coin-3d img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ufab-coin-ring { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: 50%; border: 1.5px solid rgba(160, 140, 255, .7); box-shadow: 0 0 18px rgba(124, 92, 255, .7), inset 0 0 14px rgba(34, 211, 238, .35); animation: ufabPulse 2.4s ease-out infinite; }
@keyframes ufabPulse { 0% { transform: scale(.86); opacity: .95; } 100% { transform: scale(1.28); opacity: 0; } }

.ufab-txt { flex: 1 1 0; min-width: 0; }
.ufab-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 214, 102, .55); background: linear-gradient(90deg, rgba(255, 196, 80, .2), rgba(255, 120, 200, .16)); font-family: "BPG ExtraSquare Mtavruli", "Noto Sans Georgian", sans-serif; font-size: 11.5px; line-height: 1.2; letter-spacing: .06em; color: #FFE08A; text-shadow: 0 0 10px rgba(255, 196, 80, .55); }
.ufab-tag i { width: 7px; height: 7px; border-radius: 50%; background: #FFD666; box-shadow: 0 0 0 0 rgba(255, 214, 102, .8); animation: ufabDot 1.6s ease-out infinite; }
@keyframes ufabDot { to { box-shadow: 0 0 0 9px rgba(255, 214, 102, 0); } }
.ufab .ufab-h { margin: 0; padding: 0; border: 0; background: none; font-family: "BPG ExtraSquare Mtavruli", "Noto Sans Georgian", sans-serif; font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: .03em; color: #fff; text-shadow: 0 1px 0 rgba(60, 40, 140, .9), 0 2px 0 rgba(40, 26, 100, .8), 0 8px 18px rgba(0, 0, 0, .55); }
.ufab .ufab-w.is-hi { color: #C9B8FF; }
.ufab-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 7px; }
.ufab .ufab-p { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; letter-spacing: .02em; color: rgba(226, 222, 255, .78); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ufab .ufab-w.is-hi { background-image: linear-gradient(100deg, #A78BFA 0%, #F0ABFC 30%, #FFE08A 50%, #67E8F9 72%, #A78BFA 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
    .ufab:not(.is-ready) .ufab-w.is-hi { animation: ufabHolo 4s linear infinite; }
}
@keyframes ufabHolo { to { background-position: -250% 0; } }

/* ---------- the words come down one by one: bam, bam, bam ----------
   Each drops from above, bigger than life, hits the line (it squashes, a ring of dust runs out, a flash), settles.
   js/ufa-banner.js sets .is-ready (words wait unseen) and .is-go (they fall) when the banner is on screen. */
.ufab-w { position: relative; display: inline-block; transform-origin: 50% 100%; }
.ufab.is-ready .ufab-w { opacity: 0; }
.ufab.is-go .ufab-w { animation: ufabBam .52s cubic-bezier(.3, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * .17s + .2s); }
.ufab.is-go .ufab-w.is-hi { animation: ufabBam .52s cubic-bezier(.3, 0, .2, 1) both, ufabHolo 4s linear infinite; animation-delay: calc(var(--i, 0) * .17s + .2s), 0s; }
@keyframes ufabBam {
    0%   { opacity: 0; transform: translate3d(0, -74px, 0) scale(2.1) rotate(-7deg); }
    42%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1.22, .72) rotate(0deg); text-shadow: 0 0 22px #fff, 0 0 40px rgba(167, 139, 250, .9); }
    62%  { transform: translate3d(0, -7px, 0) scale(.94, 1.1); }
    80%  { transform: translate3d(0, 0, 0) scale(1.04, .96); }
    100% { opacity: 1; transform: none; }
}
.ufab-w::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 120%; height: 8px; margin-left: -60%; border-radius: 50%; border: 1.5px solid rgba(220, 205, 255, .9); opacity: 0; pointer-events: none; }
.ufab.is-go .ufab-w::after { animation: ufabThud .5s ease-out both; animation-delay: calc(var(--i, 0) * .17s + .2s + .2s); }
@keyframes ufabThud { 0% { opacity: .95; transform: scale(.2, .6); } 100% { opacity: 0; transform: scale(1.5, 1.6); } }
/* the whole stage takes each hit a little */
.ufab.is-go .ufab-txt { animation: ufabShake .17s linear 9; animation-delay: .4s; }
@keyframes ufabShake { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }

/* ---------- the way out: the device's own download, and the other two ---------- */
.ufab-act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.ufab-chips { display: flex; gap: 7px; }
.ufab .ufab-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(235, 231, 255, .86); font-size: 11px; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.ufab .ufab-chip svg { width: 13px; height: 13px; }
.ufab .ufab-chip:hover, .ufab .ufab-chip.is-me { border-color: rgba(167, 139, 250, .9); background: rgba(124, 92, 255, .32); color: #fff; transform: translateY(-2px); }
.ufab .ufab-chip.is-me { box-shadow: 0 0 14px rgba(124, 92, 255, .55); }
/* a button with a body: it stands on its own shadow and goes down when pressed */
.ufab .ufab-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; overflow: hidden; border: 0; border-radius: 14px; background: linear-gradient(135deg, #7C5CFF 0%, #B14DFF 45%, #F0509C 100%); box-shadow: 0 5px 0 #4A2FB8, 0 14px 26px rgba(124, 92, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .45); color: #fff !important; font-family: "BPG ExtraSquare Mtavruli", "Noto Sans Georgian", sans-serif; font-size: 14.5px; font-weight: 400; line-height: 1.15; letter-spacing: .05em; white-space: nowrap; text-decoration: none; text-shadow: 0 1px 2px rgba(40, 10, 90, .6); transition: transform .15s ease, box-shadow .15s ease, filter .2s; }
.ufab .ufab-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #4A2FB8, 0 18px 32px rgba(176, 77, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .5); filter: brightness(1.08); }
.ufab .ufab-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #4A2FB8, 0 6px 14px rgba(124, 92, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ufab .ufab-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: ufabBtnShine 3s ease-in-out infinite; pointer-events: none; }
@keyframes ufabBtnShine { 0%, 50% { left: -70%; } 100% { left: 140%; } }
.ufab .ufab-btn svg { flex: 0 0 auto; width: 20px; height: 20px; animation: ufabDrop 1.3s ease-in-out infinite; }
@keyframes ufabDrop { 0%, 100% { transform: translateY(-12%); } 55% { transform: translateY(14%); } }
.ufab .ufab-btn:focus-visible, .ufab .ufab-chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) { .ufab .ufab-h { font-size: 16.5px; } }
/* phones: the coin and the words in one row, the buttons under them; no leaning (nothing to lean after) */
@media (max-width: 640px) {
    .ufab { margin-bottom: 10px; border-radius: 16px; } .ufab-bg, .ufab-sparks { border-radius: 14.5px; }
    .ufab-in { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 14px; }
    .ufab-coin { flex-basis: 48px; width: 48px; height: 48px; } .ufab-coin-ring { top: -6px; right: -6px; bottom: -6px; left: -6px; }
    .ufab-txt { flex: 1 1 0; } .ufab-tag { margin-bottom: 5px; padding: 3px 9px 3px 7px; font-size: 9.5px; }
    .ufab .ufab-h { font-size: 13px; line-height: 1.35; } .ufab .ufab-p { font-size: 12px; } .ufab-sub { margin-top: 6px; gap: 6px 10px; }
    .ufab-act { flex: 1 1 100%; }
    .ufab-chips { gap: 6px; } .ufab .ufab-chip { padding: 6px 8px; gap: 4px; font-size: 10.5px; } .ufab .ufab-chip svg { width: 14px; height: 14px; }
    .ufab .ufab-chip:not(.is-me) span { display: none; }   /* one row: only the visitor's own platform keeps its name */
    .ufab .ufab-btn { padding: 12px 10px; font-size: 13.5px; }
    .ufab-coin { margin-left: 0; } .ufab.is-go .ufab-txt { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ufab, .ufab-shine, .ufab-coin-ring, .ufab-tag i, .ufab-w, .ufab-w::after, .ufab-txt, .ufab .ufab-btn::after, .ufab .ufab-btn svg { animation: none !important; }
    .ufab-sparks { display: none; }
}