/* asia.com.ge — animated names of VIP members (2026-10-12)
   <span class="nx-fx nx-fx-fire">name</span>; the class is put on by js/nx-vipfx.js (comments, profile) and
   js/nx-chat.js (chat) from the list window.NXFX. Picker: .nx-fxbox in the "ჩემი VIP" box.
   Only text-shadow / background / transform are animated, so a page full of names stays light. */
.nx-fx { position: relative; display: inline-block; font-weight: 800; letter-spacing: .01em; text-decoration: none !important; -webkit-text-fill-color: currentColor; }
.nx-fx::before, .nx-fx::after { pointer-events: none; }

/* 1. fire: hot letters, flames licking upwards, embers */
.nx-fx-fire { color: #FFF4C4 !important; text-shadow: 0 0 .12em #FFE08A, 0 -.12em .2em #FFC233, .04em -.3em .28em #FF8A00, -.05em -.5em .38em #F25A00, .03em -.75em .5em #D62800, 0 -1em .7em rgba(160, 20, 0, .65); animation: nxfxFire .8s ease-in-out infinite alternate; }
@keyframes nxfxFire {
    0%   { text-shadow: 0 0 .12em #FFE08A, 0 -.12em .2em #FFC233, .04em -.3em .28em #FF8A00, -.05em -.5em .38em #F25A00, .03em -.75em .5em #D62800, 0 -1em .7em rgba(160, 20, 0, .65); }
    35%  { text-shadow: 0 0 .14em #FFE9A8, .05em -.16em .22em #FFC233, -.06em -.36em .3em #FF8A00, .08em -.6em .42em #F25A00, -.05em -.9em .55em #D62800, .04em -1.2em .75em rgba(160, 20, 0, .5); }
    70%  { text-shadow: 0 0 .1em #FFD166, -.05em -.1em .18em #FFB020, .07em -.28em .26em #FF7A00, -.08em -.46em .36em #E84300, .06em -.68em .48em #C62000, -.03em -.9em .65em rgba(160, 20, 0, .6); }
    100% { text-shadow: 0 0 .16em #FFF4C4, 0 -.18em .24em #FFC94D, -.07em -.4em .32em #FF8F1F, .05em -.66em .44em #F25A00, -.02em -.98em .58em #D62800, 0 -1.3em .8em rgba(160, 20, 0, .45); }
}
.nx-fx-fire::after { content: ""; position: absolute; left: 10%; bottom: 60%; width: 2px; height: 2px; border-radius: 50%; background: #FFD166; box-shadow: 1.1em .2em 0 #FF9F1C, 2.3em -.1em 0 #FFE08A, 3.4em .25em 0 #FF7A00, .5em -.3em 0 #FFB020; animation: nxfxEmber 1.6s linear infinite; }
@keyframes nxfxEmber { 0% { transform: translateY(.3em) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-1.1em) translateX(.25em) scale(.3); opacity: 0; } }

/* 2. 4D: letters with depth that swing towards the viewer, red / cyan split like 3D glasses */
.nx-fx-4d { color: #fff !important; text-shadow: 1px 1px 0 #C4A5FF, 2px 2px 0 #9B6DFF, 3px 3px 0 #7C3AED, 4px 4px 0 #5B21B6, 6px 7px 9px rgba(0, 0, 0, .55), -2px 0 0 rgba(0, 240, 255, .75), 2px 0 0 rgba(255, 0, 128, .6); animation: nxfx4d 2.6s ease-in-out infinite; transform-origin: 50% 60%; will-change: transform; }
@keyframes nxfx4d {
    0%, 100% { transform: perspective(240px) rotateY(-16deg) rotateX(6deg) scale(1); text-shadow: 1px 1px 0 #C4A5FF, 2px 2px 0 #9B6DFF, 3px 3px 0 #7C3AED, 4px 4px 0 #5B21B6, 6px 7px 9px rgba(0, 0, 0, .55), -2px 0 0 rgba(0, 240, 255, .75), 2px 0 0 rgba(255, 0, 128, .6); }
    25%      { transform: perspective(240px) rotateY(0deg) rotateX(0deg) scale(1.08); text-shadow: 0 1px 0 #C4A5FF, 0 2px 0 #9B6DFF, 0 3px 0 #7C3AED, 0 4px 0 #5B21B6, 0 9px 12px rgba(0, 0, 0, .6), -1px 0 0 rgba(0, 240, 255, .5), 1px 0 0 rgba(255, 0, 128, .4); }
    50%      { transform: perspective(240px) rotateY(16deg) rotateX(-6deg) scale(1); text-shadow: -1px 1px 0 #C4A5FF, -2px 2px 0 #9B6DFF, -3px 3px 0 #7C3AED, -4px 4px 0 #5B21B6, -6px 7px 9px rgba(0, 0, 0, .55), 2px 0 0 rgba(0, 240, 255, .75), -2px 0 0 rgba(255, 0, 128, .6); }
    75%      { transform: perspective(240px) rotateY(0deg) rotateX(0deg) scale(1.08); text-shadow: 0 1px 0 #C4A5FF, 0 2px 0 #9B6DFF, 0 3px 0 #7C3AED, 0 4px 0 #5B21B6, 0 9px 12px rgba(0, 0, 0, .6), 1px 0 0 rgba(0, 240, 255, .5), -1px 0 0 rgba(255, 0, 128, .4); }
}

/* 3. digital sparks: a cyan screen glow that glitches, sparks jumping off the letters */
.nx-fx-digi { color: #9CFBFF !important; text-shadow: 0 0 5px #00E5FF, 0 0 12px #0091FF; animation: nxfxDigi 2.8s steps(1, end) infinite; }
@keyframes nxfxDigi {
    0%, 100% { text-shadow: 0 0 5px #00E5FF, 0 0 12px #0091FF; transform: none; }
    44% { text-shadow: -2px 0 0 #FF2BD6, 2px 0 0 #00FFC8, 0 0 10px #00E5FF; transform: skewX(-8deg); }
    47% { text-shadow: 2px 0 0 #FF2BD6, -2px 0 0 #00FFC8, 0 0 10px #00E5FF; transform: skewX(6deg) translateX(1px); }
    50% { text-shadow: 0 0 5px #00E5FF, 0 0 12px #0091FF; transform: none; }
    82% { text-shadow: -1px 0 0 #FF2BD6, 1px 0 0 #00FFC8, 0 0 14px #7DF9FF; transform: translateX(-1px); }
    85% { text-shadow: 0 0 5px #00E5FF, 0 0 12px #0091FF; transform: none; }
}
.nx-fx-digi::before, .nx-fx-digi::after { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; background: #fff; box-shadow: .4em -.5em 0 #7DF9FF, 1.5em .45em 0 #fff, 2.6em -.4em 0 #00FFC8, 3.7em .5em 0 #7DF9FF, 4.6em -.55em 0 #fff, .9em .55em 0 #FF2BD6; animation: nxfxSpark 1.3s steps(4, end) infinite; }
.nx-fx-digi::after { left: .5em; animation-duration: 1.9s; animation-delay: -.6s; box-shadow: .2em .5em 0 #fff, 1.2em -.55em 0 #00FFC8, 2.2em .5em 0 #7DF9FF, 3.2em -.5em 0 #fff, 4.2em .45em 0 #FF2BD6; }
@keyframes nxfxSpark { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.15); } 50% { opacity: .2; transform: scale(1.35) translateY(-1px); } 75% { opacity: 1; transform: scale(1.5) translateY(1px); } 100% { opacity: 0; transform: scale(1.8); } }

/* 4. glitter: gold and pink foil with a light running over it, stars that twinkle */
.nx-fx-glit { color: #FFD76A !important; filter: drop-shadow(0 0 3px rgba(255, 205, 80, .55)); }
.nx-fx-glit::before, .nx-fx-glit::after { content: "✦"; position: absolute; top: -.55em; left: -.35em; font-size: .62em; line-height: 1; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 5px #FFE9A8, 0 0 9px #FF9BE0; animation: nxfxTwinkle 1.5s ease-in-out infinite; }
.nx-fx-glit::after { content: "✧"; top: auto; bottom: -.5em; left: auto; right: -.4em; animation-delay: -.75s; animation-duration: 1.9s; }
@keyframes nxfxTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(90deg); } }

/* 5. neon tube that hums and blinks */
.nx-fx-neon { color: #FFE3FB !important; text-shadow: 0 0 4px #fff, 0 0 9px #FF4FD8, 0 0 18px #FF4FD8, 0 0 30px #B026FF; animation: nxfxNeon 3.2s linear infinite; }
@keyframes nxfxNeon {
    0%, 18%, 22%, 54%, 58%, 100% { text-shadow: 0 0 4px #fff, 0 0 9px #FF4FD8, 0 0 18px #FF4FD8, 0 0 30px #B026FF; opacity: 1; }
    20%, 56% { text-shadow: 0 0 2px #FF9BE8; opacity: .72; }
}

/* 6. rainbow that keeps flowing; 7. ice with a cold breath; 8. gold that is polished again and again */
.nx-fx-rain { color: #FF7AD9 !important; }
.nx-fx-ice { color: #D8F6FF !important; text-shadow: 0 0 4px #A5ECFF, 0 0 10px #4CC9F0, 0 2px 0 rgba(13, 71, 161, .55); animation: nxfxIce 2.4s ease-in-out infinite alternate; }
@keyframes nxfxIce { 0% { text-shadow: 0 0 3px #A5ECFF, 0 0 8px #4CC9F0, 0 2px 0 rgba(13, 71, 161, .55); } 100% { text-shadow: 0 0 6px #fff, 0 0 16px #7FDBFF, 0 0 26px #4CC9F0, 0 2px 0 rgba(13, 71, 161, .55); } }
.nx-fx-ice::after { content: "❄"; position: absolute; top: -.5em; right: -.75em; font-size: .6em; line-height: 1; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 5px #7FDBFF; animation: nxfxSnow 2.6s linear infinite; }
@keyframes nxfxSnow { 0% { transform: translateY(-.3em) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(1.5em) rotate(180deg); opacity: 0; } }
.nx-fx-gold { color: #F7C948 !important; }

/* letters painted with a moving picture: only where the browser can cut a background to the text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .nx-fx-glit, .nx-fx-rain, .nx-fx-gold { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; background-repeat: repeat-x; }
    .nx-fx-glit { background-image: linear-gradient(110deg, #FFD23F 0%, #FFF7CC 14%, #FF8AD8 30%, #FFD23F 46%, #FFFFFF 58%, #FFB347 72%, #FF8AD8 86%, #FFD23F 100%); background-size: 220% 100%; animation: nxfxSlide 2.4s linear infinite; }
    .nx-fx-rain { background-image: linear-gradient(90deg, #FF4D6D, #FF9F1C, #FFE14D, #4ADE80, #38BDF8, #A78BFA, #FF4D6D); background-size: 200% 100%; animation: nxfxSlide 3s linear infinite; filter: drop-shadow(0 0 3px rgba(167, 139, 250, .45)); }
    .nx-fx-gold { background-image: linear-gradient(105deg, #B8860B 0%, #F7C948 22%, #FFF4C2 38%, #F7C948 50%, #A8740A 68%, #F7C948 86%, #B8860B 100%); background-size: 220% 100%; animation: nxfxSlide 3.4s linear infinite; filter: drop-shadow(0 1px 0 rgba(90, 60, 0, .7)) drop-shadow(0 0 4px rgba(247, 201, 72, .45)); }
}
@keyframes nxfxSlide { 0% { background-position: 0 0; } 100% { background-position: -220% 0; } }
.nx-fx-rain { animation-name: nxfxSlideR; }
@keyframes nxfxSlideR { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }

/* who asked the system for less motion gets the colours without the movement */
@media (prefers-reduced-motion: reduce) { .nx-fx, .nx-fx::before, .nx-fx::after { animation: none !important; } }

/* ---------- the picker in the profile ---------- */
.nx-fxbox .nx-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nx-fxbox .nx-fx-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 96px; padding: 20px 10px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #120E22; color: #fff; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.nx-fxbox .nx-fx-opt:hover { border-color: rgba(183, 140, 255, .6); transform: translateY(-1px); }
.nx-fxbox .nx-fx-opt.is-on { border-color: #B78CFF; box-shadow: 0 0 0 2px rgba(183, 140, 255, .35); }
.nx-fxbox .nx-fx-opt:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nx-fxbox .nx-fx-prev { display: block; max-width: 100%; padding: 6px 12px; font-size: 17px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.nx-fxbox .nx-fx-opt small { margin-top: 10px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .62); }
.nx-fxbox .nx-fx-opt.is-on small { color: #D8C4FF; }
.nx-fxbox .nx-fx-opt.is-on small::before { content: "✓ "; }
.nx-fxbox[data-can="0"] .nx-fx-opt { cursor: default; }
.nx-fxbox .nx-fx-msg { font-weight: 700; }
.nx-fxbox .nx-fx-msg.is-bad { color: #FF8A8A; }
@media (max-width: 520px) { .nx-fxbox .nx-fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-fxbox .nx-fx-prev { font-size: 15px; } }