/* ==========================================================================
   Cosmetics: name effects, avatar frames, animated profile backgrounds.
   Canvas-driven backgrounds are painted by assets/js/fx.js.
   ========================================================================== */

/* ---------- name effects (shown everywhere a username appears) ---------- */
.nfx { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.nfx--gold { background-image: linear-gradient(100deg, #8a5a14 0%, #f7d774 22%, #b8862b 40%, #ffe9a8 58%, #9a6a1c 80%, #f7d774 100%); animation: nfx-pan 6s linear infinite; filter: drop-shadow(0 0 6px rgba(247, 200, 90, .25)); }
.nfx--blood { background-image: linear-gradient(180deg, #ff6b6b, #c1121f 55%, #5c0000); filter: drop-shadow(0 1px 0 #2a0000) drop-shadow(0 0 6px rgba(255, 30, 30, .35)); }
.nfx--neon { color: #fff !important; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 0 2px #fff, 0 0 8px #ff2bd6, 0 0 16px #ff2bd6, 0 0 28px #b300ff; animation: nfx-flicker 4s infinite; }
.nfx--glitch { color: var(--text) !important; -webkit-text-fill-color: currentColor; background: none; text-shadow: 1.5px 0 rgba(0, 255, 255, .8), -1.5px 0 rgba(255, 0, 200, .8); animation: nfx-glitch 2.6s steps(1) infinite; display: inline-block; }
.nfx--prism { background-image: linear-gradient(90deg, #ff6b9e, #ffb86b, #f9f871, #6bffb8, #6bc8ff, #b36bff, #ff6b9e); animation: nfx-pan 3s linear infinite; }
.nfx--chrome { background-image: linear-gradient(180deg, #ffffff 0%, #b8c0cc 45%, #5b6573 50%, #dfe5ee 75%, #ffffff 100%); background-size: auto; position: relative; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.nfx--fire { background-image: linear-gradient(0deg, #ff3d00, #ff9100 40%, #ffea00 70%, #fff3a0); background-size: auto 200%; animation: nfx-rise 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(255, 120, 0, .55)); }
.nfx--shimmer { background-image: linear-gradient(110deg, #c89b3c 0%, #f5d27a 35%, #ffffff 45%, #f5d27a 55%, #c89b3c 100%); background-size: 250% auto; animation: nfx-pan 3.2s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 215, 120, .35)); }
@keyframes nfx-pan { to { background-position: 200% center; } }
@keyframes nfx-rise { to { background-position: center 100%; } }
@keyframes nfx-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes nfx-glitch { 0%, 100% { transform: none; } 92% { transform: translate(1px, -1px) skewX(8deg); } 94% { transform: translate(-2px, 1px); } 96% { transform: none; } }

/* ---------- avatar frames ---------- */
.avatar::before, .avatar::after { content: ""; position: absolute; pointer-events: none; }
.frame--ring::before { inset: -4px; border-radius: 50%; border: 2px solid var(--line-2); }
.frame--brass::before, .frame--steel::before, .frame--gold::before, .frame--diamond::before, .frame--family::before, .frame--blood::before, .frame--neon::before {
  inset: calc(var(--s) * -.07); border-radius: 50%; padding: calc(var(--s) * .055);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.frame--brass::before { background: conic-gradient(from 30deg, #6b4a1f, #d9a95b, #7a5424, #f2cf8a, #6b4a1f, #c9954a, #6b4a1f); }
.frame--steel::before { background: conic-gradient(#3b4048, #aeb6c2, #4a5059, #d7dde6, #3b4048, #8c95a1, #3b4048); }
.frame--steel::after { inset: calc(var(--s) * -.07); border-radius: 50%; background: radial-gradient(circle at 50% 3%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 97% 50%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 50% 97%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 3% 50%, #e8edf3 1.5%, transparent 2.5%); }
.frame--family::before { background: linear-gradient(#7a0d12, #7a0d12) padding-box, conic-gradient(#caa24a, #7a0d12, #caa24a, #7a0d12, #caa24a); box-shadow: 0 0 0 2px #caa24a inset; }
.frame--neon::before { background: linear-gradient(135deg, #ff2bd6, #7a5cff, #00e5ff); animation: frame-pulse 2.2s ease-in-out infinite; }
.frame--neon { filter: drop-shadow(0 0 10px rgba(255, 43, 214, .45)); }
.frame--blood::before { background: conic-gradient(#5c0000, #e5484d, #8b0000, #ff6b6b, #5c0000); }
.frame--blood::after { left: 22%; bottom: calc(var(--s) * -.16); width: calc(var(--s) * .08); height: calc(var(--s) * .14); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: #b3121a; box-shadow: calc(var(--s) * .38) calc(var(--s) * -.03) 0 -1px #b3121a, calc(var(--s) * .5) calc(var(--s) * -.07) 0 -2px #8b0000; animation: frame-drip 3.5s ease-in infinite; }
.frame--gold::before { background: conic-gradient(from var(--a, 0deg), #8a5a14, #ffe39a, #b8862b, #fff4cf, #9a6a1c, #f7d774, #8a5a14); animation: frame-spin 4s linear infinite; }
.frame--gold { filter: drop-shadow(0 0 12px rgba(247, 200, 90, .35)); }
.frame--diamond::before { background: conic-gradient(from var(--a, 0deg), #b9f3ff, #ffffff, #c7a6ff, #ffffff, #9ee7ff, #ffe0f7, #b9f3ff); animation: frame-spin 3s linear infinite; }
.frame--diamond { filter: drop-shadow(0 0 14px rgba(190, 230, 255, .5)); }
.frame--diamond::after { top: calc(var(--s) * -.3); left: 50%; width: calc(var(--s) * .42); height: calc(var(--s) * .26); transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d1'/%3E%3Cstop offset='1' stop-color='%23d8a54a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 22 L5 6 L13 14 L20 2 L27 14 L35 6 L38 22 Z' fill='url(%23g)' stroke='%237a5424' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='15' r='2.4' fill='%23b9f3ff'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes frame-spin { to { --a: 360deg; } }
@keyframes frame-pulse { 50% { opacity: .55; } }
@keyframes frame-drip { 0%, 60% { transform: translateY(0) scaleY(1); opacity: 1; } 100% { transform: translateY(6px) scaleY(1.3); opacity: 0; } }

/* ==========================================================================
   Profile backdrops: looping, seamless tiled GIFs (assets/img/bg/{key}.gif),
   ========================================================================== */
.pbg { position: absolute; inset: 0; overflow: hidden; z-index: 0; background-color: #07080c; background-repeat: repeat; background-position: 0 0; }
.pbg--x { background-repeat: repeat-x; background-size: auto 100%; background-position: 0 100%; }
.pbg__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.6)), linear-gradient(180deg, transparent 50%, rgba(0,0,0,.78)); }

@media (prefers-reduced-motion: reduce) {
  .nfx, .avatar::before, .avatar::after { animation: none !important; }
}