/* ---- Marcos animados (motor visual del perfil) ---- */
.fx-stage{ position:absolute; top:50%; left:50%; transform-origin:center center; }
.fx-glow{ position:absolute; inset:-40px; border-radius:50%; filter:blur(6px); }
@keyframes fxGlowPulse{ 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }

.fx-base{ position:absolute; inset:-13px; border-radius:50%; filter:blur(1px); z-index:1; }
.fx-base::after{ content:''; position:absolute; inset:7px; border-radius:50%; }
.ice-base{ background:conic-gradient(#1a4a63,#2f7fa3,#5fd4ff,#2f7fa3,#1a4a63,#3a8bb0,#5fd4ff,#1a4a63); box-shadow:inset 0 0 18px rgba(255,255,255,.35),0 0 22px rgba(95,212,255,.35); }
.ice-base::after{ background:radial-gradient(circle,#0a1a22 62%,transparent 63%); }
.fire-base{ background:conic-gradient(#7a1a00,#ff4d00,#ffae00,#ff4d00,#7a1a00,#c73800,#ffae00,#7a1a00); box-shadow:inset 0 0 18px rgba(255,200,120,.35),0 0 22px rgba(255,90,0,.4); animation:fxBaseFlicker .9s ease-in-out infinite; }
.fire-base::after{ background:radial-gradient(circle,#0a0806 62%,transparent 63%); }
@keyframes fxBaseFlicker{ 0%,100%{ filter:blur(1px) brightness(1); } 50%{ filter:blur(1.4px) brightness(1.12); } }

.fx-shards{ position:absolute; inset:0; z-index:2; }
.fx-shard-pos{ position:absolute; left:50%; top:50%; width:0; height:0; }
.fx-shard{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); transform-origin:50% 100%;
  clip-path:polygon(50% 0%,76% 16%,90% 48%,68% 100%,32% 100%,10% 48%,24% 16%);
  background:linear-gradient(to top,#0c3a52 0%,#146f96 22%,#1fa3d6 44%,#5fd4ff 64%,#cdf3ff 84%,#ffffff 100%);
  box-shadow:inset -2px 0 4px rgba(255,255,255,.4),inset 2px 0 4px rgba(0,60,90,.5); mix-blend-mode:screen; }
@keyframes fxGlint{ 0%{ transform:translateX(-50%) scaleY(.94) skewX(calc(var(--skew) * -1)); filter:brightness(.92); opacity:.88; } 50%{ transform:translateX(-50%) scaleY(1.03) skewX(var(--skew)); filter:brightness(1.15); opacity:1; } 100%{ transform:translateX(-50%) scaleY(.97) skewX(calc(var(--skew) * -.5)); filter:brightness(1); opacity:.94; } }

.fx-shards-fire .fx-shard{ clip-path:polygon(50% 0%,62% 18%,56% 30%,72% 38%,64% 52%,78% 62%,58% 72%,66% 88%,50% 100%,34% 88%,42% 72%,22% 62%,36% 52%,28% 38%,44% 30%,38% 18%);
  background:linear-gradient(to top,#b3230a 0%,#ff3c00 22%,#ff7300 42%,#ffab00 60%,#ffd257 76%,#fff2b8 90%,#ffffff 100%); box-shadow:none; }
@keyframes fxFlick{ 0%{ transform:translateX(-50%) scaleY(.85) scaleX(.92) skewX(calc(var(--skew) * -1)); opacity:.82; } 50%{ transform:translateX(-50%) scaleY(1.08) scaleX(1.03) skewX(var(--skew)); opacity:1; } 100%{ transform:translateX(-50%) scaleY(.95) scaleX(.97) skewX(calc(var(--skew) * -.5)); opacity:.9; } }

/* Círculo "placeholder" que ya no se usa (era exclusivo de una extinta
   tarjeta de vista previa). Se deja definido por si algún
   marco antiguo aún lo referencia; el perfil no usa estas clases. */
.fx-core{ position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg,#16303d,#0a1a22); border:3px solid #04080c; z-index:4; box-shadow:0 0 0 3px #04080c, inset 0 0 30px rgba(0,0,0,.5); }
.fx-core-fire{ background:linear-gradient(135deg,#3a2a1c,#1c130c); border-color:#0a0806; box-shadow:0 0 0 3px #0a0806, inset 0 0 30px rgba(0,0,0,.5); }
.fx-core-round{ position:absolute; left:55px; top:55px; width:150px; height:150px; border-radius:50%; background:var(--card2); }

/* Contenedor del marco animado dentro del avatar de perfil.
   Sin foto/placeholder propio: la foto real del usuario (.prof-avatar)
   va encima, en el mismo wrap, así que aquí el centro queda transparente. */
.prof-frame-fx{ position:absolute; inset:-38px; z-index:0; pointer-events:none; overflow:visible; }
.prof-avatar-wrap{ z-index:0; }
.prof-avatar-wrap .prof-avatar{ position:relative; z-index:1; }

/* Cuando hay un marco animado (fx) activo, se quita el anillo dorado
   y el borde oscuro por defecto del avatar: solo debe verse el marco. */
.prof-avatar-wrap.prof-fx-active .prof-avatar{ border:none; box-shadow:0 4px 14px rgba(0,0,0,.45) !important; }