/* Profile effects shared by the profile page and the dashboard galleries (same CSS → the preview is the real thing).
   Needs: --accent, --accent-2, --light, --rgb (accent as r,g,b), --avatar-r. */

/* ================= avatar decorations: <div class="avatar-wrap"><div class="deco"></div><div class="avatar"></div></div> under .deco-<id> ================= */
.deco { position: absolute; inset: -5px; border-radius: var(--avatar-r, 50%); pointer-events: none; }
.deco-halo .deco { background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--light), var(--accent)); animation: fx-spin 6s linear infinite; filter: blur(1px); }
.deco-ring .deco { inset: -6px; padding: 2px; background: conic-gradient(from 0deg, transparent 0 15%, var(--accent) 40%, var(--light) 50%, transparent 75%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-spin 3s linear infinite; }
.deco-rainbow .deco { inset: -6px; padding: 3px; background: conic-gradient(#ff4d4d, #ffb84d, #f9f871, #4dff88, #4dc3ff, #b84dff, #ff4d4d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-spin 4s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); }
.deco-neon .deco { inset: -8px; border: 3px solid var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 30px var(--accent), inset 0 0 12px var(--accent); animation: fx-neon 2.4s ease-in-out infinite; }
.deco-aura .deco { inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rgb), .55) 45%, rgba(var(--rgb), 0) 70%); filter: blur(8px); animation: fx-breathe 3.2s ease-in-out infinite; }
.deco-pulse .deco { inset: -2px; border: 2px solid rgba(var(--rgb), .9); animation: fx-ripple 2s cubic-bezier(.2, .6, .3, 1) infinite; }
.deco-pulse .deco::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(var(--rgb), .9); animation: fx-ripple 2s cubic-bezier(.2, .6, .3, 1) 1s infinite; }
.deco-orbit .deco { inset: -14px; border: 1px dashed rgba(var(--rgb), .5); border-radius: 50%; animation: fx-spin 10s linear infinite; }
.deco-orbit .deco::before, .deco-orbit .deco::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--light); box-shadow: 0 0 12px var(--accent); top: -5px; left: calc(50% - 5px); }
.deco-orbit .deco::after { top: auto; bottom: -5px; width: 7px; height: 7px; background: var(--accent); }
/* little stars that twinkle around the picture */
.deco-sparkles .deco { inset: -16px; }
.deco-sparkles .deco::before, .deco-sparkles .deco::after { content: "✦"; position: absolute; color: var(--light); text-shadow: 0 0 8px var(--accent); font-size: 18px; line-height: 1; animation: fx-twinkle 2.2s ease-in-out infinite; }
.deco-sparkles .deco::before { top: 2%; right: 6%; }
.deco-sparkles .deco::after { bottom: 6%; left: 2%; font-size: 13px; animation-delay: 1.1s; }
.deco-hearts .deco { inset: -18px; animation: fx-spin 12s linear infinite; }
.deco-hearts .deco::before, .deco-hearts .deco::after { content: "♥"; position: absolute; color: var(--accent); text-shadow: 0 0 10px rgba(var(--rgb), .8); font-size: 18px; line-height: 1; animation: fx-beat 1.2s ease-in-out infinite; }
.deco-hearts .deco::before { top: 0; left: calc(50% - 9px); }
.deco-hearts .deco::after { bottom: 0; left: calc(50% - 7px); font-size: 14px; animation-delay: .6s; }
.deco-crown .deco { inset: auto 0 calc(100% - 14%) 0; height: 40%; border-radius: 0; display: grid; place-items: end center; }
.deco-crown .deco::before { content: "👑"; font-size: min(48px, 40cqw); line-height: 1; transform: rotate(-12deg) translate(-18%, 0); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); animation: fx-bob 3s ease-in-out infinite; }
.deco-crown .avatar-wrap { container-type: inline-size; }
.deco-flame .deco { inset: -10px; background: conic-gradient(from 0deg, #ff3d00, #ffb300, #ff6d00, #ff1744, #ffb300, #ff3d00); filter: blur(6px); animation: fx-spin 3s linear infinite, fx-flick .25s steps(2) infinite; opacity: .9; }
.deco-glitch .deco { inset: -4px; border: 3px solid #0ff; box-shadow: 4px 0 0 #f0f, -4px 0 0 #0ff; animation: fx-glitchring 1.6s steps(8) infinite; }
.deco-pixel .deco { inset: -8px; border-radius: 0; background: repeating-conic-gradient(var(--accent) 0 25%, transparent 0 50%) 0 0/12px 12px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 6px; }
.deco-pixel .avatar { border-radius: 0; image-rendering: pixelated; }

@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-neon { 50% { box-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent), inset 0 0 6px var(--accent); opacity: .8; } }
@keyframes fx-flick { 50% { opacity: .7; } }
@keyframes fx-glitchring { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, -2px); } 80% { transform: translate(1px, 2px); } }
@keyframes fx-breathe { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes fx-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes fx-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } }
@keyframes fx-bob { 50% { transform: rotate(-8deg) translate(-18%, -4px); } }

/* ================= entrances (the profile plays them on <main>; the gallery on a mini card) ================= */
@keyframes in-fade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes in-zoom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes in-blur { from { opacity: 0; filter: blur(22px); } to { opacity: 1; filter: none; } }
@keyframes in-flip { from { opacity: 0; transform: perspective(1200px) rotateX(70deg) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes in-slide { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes in-unfold { from { opacity: 0; transform: scaleY(.6) translateY(-30px); clip-path: inset(0 0 100% 0 round 27px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); } }
@keyframes in-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes in-drop { 0% { opacity: 0; transform: translateY(-120px); } 60% { opacity: 1; transform: translateY(12px); } 80% { transform: translateY(-5px); } 100% { opacity: 1; transform: none; } }
@keyframes in-swing { 0% { opacity: 0; transform: perspective(900px) rotateY(-60deg); transform-origin: left center; } 60% { opacity: 1; transform: perspective(900px) rotateY(12deg); } 100% { opacity: 1; transform: none; } }
@keyframes in-spin { from { opacity: 0; transform: rotate(-12deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes in-curtain { from { opacity: 1; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes in-glitch { 0% { opacity: 0; transform: translate(0); filter: none; } 15% { opacity: 1; transform: translate(-6px, 2px); filter: hue-rotate(90deg); } 30% { transform: translate(5px, -2px); filter: hue-rotate(-90deg); } 45% { transform: translate(-3px, 1px); filter: none; } 60% { transform: translate(2px, 0); } 100% { opacity: 1; transform: none; filter: none; } }

/* ================= name styles (profile #displayName, dashboard samples .un-name / .fx-name) ================= */
.nfx-aurora :is(#displayName, .un-name, .fx-name) { background: linear-gradient(90deg, #5cf7c8, #6ea8ff, #b47bff, #ff7bd5, #5cf7c8); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-shine 7s ease-in-out infinite alternate; }
.nfx-fire :is(#displayName, .un-name, .fx-name) { background: linear-gradient(0deg, #ff3d00, #ff9100 45%, #ffe57f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 100, 0, .55)); }
.nfx-ice :is(#displayName, .un-name, .fx-name) { background: linear-gradient(180deg, #ffffff, #b3ecff 55%, #5ec8ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(120, 210, 255, .5)); }
.nfx-gold :is(#displayName, .un-name, .fx-name) { background: linear-gradient(180deg, #fff3c4 0%, #f5c84b 40%, #b8860b 55%, #ffe08a 75%, #c99a2e 100%); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-metal 4s ease-in-out infinite alternate; }
.nfx-holo :is(#displayName, .un-name, .fx-name) { background: linear-gradient(110deg, #ffd1f5, #c1f0ff, #d9ffc4, #fff1b8, #e0c8ff, #ffd1f5); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-shine 4s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
.nfx-outline :is(#displayName, .un-name, .fx-name) { color: transparent; -webkit-text-stroke: 1.5px var(--light, #fff); text-shadow: none; }
.nfx-retro :is(#displayName, .un-name, .fx-name) { color: var(--light, #fff); text-shadow: 2px 2px 0 var(--accent), 4px 4px 0 rgba(var(--rgb), .55), 6px 6px 0 rgba(var(--rgb), .25); }
@keyframes fx-shine { to { background-position: 200% center; } }
@keyframes fx-metal { to { background-position: 0 100%; } }
/* per-letter modes (wave / bounce split the name into <span>s): give each letter the style's color */
:is(#displayName, .un-name, .fx-name).letters span { -webkit-text-stroke: inherit; }
.nfx-aurora :is(#displayName, .un-name, .fx-name).letters span { color: hsl(calc(160 + var(--i) * 25), 85%, 70%); -webkit-text-fill-color: hsl(calc(160 + var(--i) * 25), 85%, 70%); }
.nfx-fire :is(#displayName, .un-name, .fx-name).letters span { color: #ff9a3c; -webkit-text-fill-color: #ff9a3c; }
.nfx-ice :is(#displayName, .un-name, .fx-name).letters span { color: #b3ecff; -webkit-text-fill-color: #b3ecff; }
.nfx-gold :is(#displayName, .un-name, .fx-name).letters span { color: #f5c84b; -webkit-text-fill-color: #f5c84b; }
.nfx-holo :is(#displayName, .un-name, .fx-name).letters span { color: hsl(calc(var(--i) * 45), 90%, 85%); -webkit-text-fill-color: hsl(calc(var(--i) * 45), 90%, 85%); }
.nfx-outline :is(#displayName, .un-name, .fx-name).letters span { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--light, #fff); }

/* ================= name animations that move the whole name (on the wrapper, so they never fight a style's own animation) ================= */
.nan-flicker :is(h1.name, .un-move, .fx-move) { animation: fx-flicker 4s infinite; }
.nan-pulse :is(h1.name, .un-move, .fx-move) { animation: fx-pulse 2.4s ease-in-out infinite; }
.nan-float :is(h1.name, .un-move, .fx-move) { animation: fx-float 3.2s ease-in-out infinite; }
.nan-shake :is(h1.name, .un-move, .fx-move) { animation: fx-shake 3.5s ease-in-out infinite; }
.nan-jelly :is(h1.name, .un-move, .fx-move) { animation: fx-jelly 2.6s ease-in-out infinite; }
:is(.un-move, .fx-move) { display: inline-block; }
@keyframes fx-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .5; } }
@keyframes fx-pulse { 50% { transform: scale(1.06); filter: brightness(1.25); } }
@keyframes fx-float { 50% { transform: translateY(-6px); } }
@keyframes fx-shake { 0%, 80%, 100% { transform: none; } 83% { transform: translateX(-3px) rotate(-1deg); } 86% { transform: translateX(3px) rotate(1deg); } 89% { transform: translateX(-2px); } 92% { transform: translateX(2px); } }
@keyframes fx-jelly { 0%, 60%, 100% { transform: none; } 70% { transform: scale(1.12, .9); } 78% { transform: scale(.94, 1.06); } 86% { transform: scale(1.03, .98); } }

@media (prefers-reduced-motion: reduce) {
  .deco, .deco::before, .deco::after, :is(h1.name, .un-move, .fx-move) { animation: none !important; }
}

/* ================= pixel cat (oneko) ================= */
.fx-neko { position: absolute; z-index: 60; pointer-events: none; }