/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft profile background effects — shared by public profiles and the account style preview.
   Colours come from --pfx-a (accent) and --pfx-b (second colour). */

.pfx {
  --pfx-a: var(--profile-a, #6c4cff);
  --pfx-b: var(--profile-b, color-mix(in srgb, var(--pfx-a) 45%, #ff5a36));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.pfx.pfx-scope-page { position: fixed; }
.pfx i, .pfx b { position: absolute; display: block; }

/* ---------- glass ---------- */
.pfx-glass-a, .pfx-glass-b { width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .32; animation: pfx-drift 18s ease-in-out infinite alternate; }
.pfx-glass-a { left: -15%; top: -25%; background: var(--pfx-a); }
.pfx-glass-b { right: -20%; bottom: -30%; background: var(--pfx-b); animation-delay: -9s; }
.pfx-glass-sheen { inset: -50% -10%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .10) 48%, transparent 56%); animation: pfx-sheen 9s ease-in-out infinite; }

/* ---------- glow ---------- */
.pfx-glow-a { left: 50%; top: -20%; width: 90vmax; height: 60vmax; margin-left: -45vmax; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pfx-a) 60%, transparent), transparent); animation: pfx-breathe 6s ease-in-out infinite; }
.pfx-glow-b { right: -10%; bottom: -20%; width: 50vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pfx-b) 45%, transparent), transparent); animation: pfx-breathe 8s ease-in-out infinite reverse; }

/* ---------- aurora ---------- */
.pfx-aurora-a, .pfx-aurora-b, .pfx-aurora-c { left: -20%; width: 140%; height: 46%; border-radius: 50%; filter: blur(50px); mix-blend-mode: screen; opacity: .55; }
.pfx-aurora-a { top: -8%; background: linear-gradient(90deg, transparent, #2dffb0, var(--pfx-a), transparent); animation: pfx-aurora 14s ease-in-out infinite alternate; }
.pfx-aurora-b { top: 6%; background: linear-gradient(90deg, transparent, var(--pfx-b), #2de0ff, transparent); animation: pfx-aurora 18s ease-in-out infinite alternate-reverse; }
.pfx-aurora-c { top: 20%; height: 30%; background: linear-gradient(90deg, transparent, #b6ff6a, #ff6ad5, transparent); opacity: .3; animation: pfx-aurora 22s ease-in-out infinite alternate; }

/* ---------- stars ---------- */
.pfx-star { left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); animation: pfx-twinkle var(--d) ease-in-out var(--w) infinite; }
.pfx-shooting { top: 12%; right: -10%; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-20deg); animation: pfx-shoot 9s ease-in 2s infinite; opacity: 0; }

/* ---------- snow ---------- */
.pfx-flake { left: var(--x); top: -6%; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: pfx-fall var(--d) linear var(--w) infinite; }

/* ---------- sakura ---------- */
.pfx-petal { left: var(--x); top: -6%; width: var(--s); height: calc(var(--s) * .7); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fff2f7, #ffb3cf 55%, #ff7aa8); opacity: .9; animation: pfx-petal var(--d) linear var(--w) infinite; }

/* ---------- fireflies ---------- */
.pfx-firefly { left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff7b0; box-shadow: 0 0 10px 3px rgba(255, 230, 110, .75), 0 0 22px 8px color-mix(in srgb, var(--pfx-a) 40%, transparent); animation: pfx-firefly var(--d) ease-in-out var(--w) infinite alternate; }

/* ---------- bubbles ---------- */
.pfx-bubble { left: var(--x); bottom: -10%; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08) 40%, color-mix(in srgb, var(--pfx-a) 25%, transparent) 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); animation: pfx-rise var(--d) linear var(--w) infinite; }

/* ---------- neon grid ---------- */
.pfx-neon-sun { left: 50%; bottom: 34%; width: 34vmax; height: 34vmax; margin-left: -17vmax; border-radius: 50%; background: linear-gradient(180deg, #ffe14a, #ff3df2 60%, var(--pfx-a)); -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 18px); mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 18px); opacity: .45; filter: drop-shadow(0 0 30px #ff3df2); }
.pfx-neon-grid { left: -50%; right: -50%; bottom: -10%; height: 46%; background-image: linear-gradient(color-mix(in srgb, var(--pfx-a) 70%, #3df5ff) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--pfx-a) 70%, #3df5ff) 1.5px, transparent 1.5px); background-size: 60px 60px; transform: perspective(300px) rotateX(62deg); transform-origin: top; animation: pfx-grid 2.4s linear infinite; opacity: .55; -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); }

/* ---------- prism ---------- */
.pfx-prism-a, .pfx-prism-b { left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; }
.pfx-prism-a { background: conic-gradient(#ff4f6d, #ffb347, #ffe14a, #3dd68c, #3df5ff, var(--pfx-a), #ff6ad5, #ff4f6d); animation: pfx-spin 26s linear infinite; }
.pfx-prism-b { width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; background: conic-gradient(from 90deg, transparent, rgba(255, 255, 255, .6), transparent 30%, var(--pfx-b), transparent 70%); animation: pfx-spin 14s linear infinite reverse; opacity: .25; }
.pfx-prism-rays { inset: 0; background: repeating-conic-gradient(from 0deg at 50% -20%, rgba(255, 255, 255, .06) 0 4deg, transparent 4deg 14deg); animation: pfx-breathe 7s ease-in-out infinite; }

/* card scope (previews, thumbnails): sizes follow the card, never the viewport — huge blurred
   layers inside many small tiles would exhaust the GPU and blank the page. */
.pfx-scope-card :is(.pfx-glass-a, .pfx-glass-b) { width: 110%; height: auto; aspect-ratio: 1; filter: blur(18px); }
.pfx-scope-card .pfx-glow-a { width: 150%; height: 110%; margin-left: -75%; }
.pfx-scope-card .pfx-glow-b { width: 90%; height: auto; aspect-ratio: 1; }
.pfx-scope-card :is(.pfx-prism-a, .pfx-prism-b) { filter: blur(16px); }
.pfx-scope-card .pfx-prism-a { width: 200%; height: auto; aspect-ratio: 1; margin: -100% 0 0 -100%; }
.pfx-scope-card .pfx-prism-b { width: 130%; height: auto; aspect-ratio: 1; margin: -65% 0 0 -65%; }
.pfx-scope-card .pfx-neon-sun { width: 56%; height: auto; aspect-ratio: 1; margin-left: -28%; bottom: 32%; filter: none; }
.pfx-scope-card :is(.pfx-aurora-a, .pfx-aurora-b, .pfx-aurora-c) { filter: blur(14px); }
.pfx-scope-card .pfx-neon-grid { background-size: 26px 26px; }
.pfx-scope-card .pfx-neon-sun { -webkit-mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 8px); }

@keyframes pfx-drift { to { transform: translate(8%, 6%) scale(1.12); } }
@keyframes pfx-sheen { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
@keyframes pfx-breathe { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pfx-aurora { from { transform: translateX(-8%) skewY(-4deg); } to { transform: translateX(8%) skewY(4deg); } }
@keyframes pfx-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes pfx-shoot { 0%, 85% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-70vw, 26vh) rotate(-20deg); } }
@keyframes pfx-fall { from { transform: translate(0, 0); } to { transform: translate(var(--drift), 112vh); } }
@keyframes pfx-petal { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(var(--drift), 112vh) rotate(calc(var(--r) + 540deg)); } }
@keyframes pfx-firefly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: .35; } }
@keyframes pfx-rise { from { transform: translate(0, 0); } to { transform: translate(var(--drift), -120vh); } }
@keyframes pfx-grid { to { background-position: 0 60px; } }
@keyframes pfx-spin { to { transform: rotate(360deg); } }
.pfx-scope-card .pfx-flake { animation-name: pfx-fall-card; }
.pfx-scope-card .pfx-petal { animation-name: pfx-petal-card; }
.pfx-scope-card .pfx-bubble { animation-name: pfx-rise-card; }
@keyframes pfx-fall-card { from { transform: translate(0, 0); } to { transform: translate(var(--drift), 480px); } }
@keyframes pfx-petal-card { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(var(--drift), 480px) rotate(calc(var(--r) + 540deg)); } }
@keyframes pfx-rise-card { from { transform: translate(0, 0); } to { transform: translate(var(--drift), -520px); } }

@media (prefers-reduced-motion: reduce) { .pfx, .pfx * { animation: none !important; } }
.account-reduce-motion .pfx, .account-reduce-motion .pfx * { animation: none !important; }