/* public/css/avatar-effects.css
 *
 * Phase 15 — shared avatar effects.
 *
 * Layout (target structure produced by AvatarRenderer):
 *
 *   <div class="av-shell av-frame-X av-aura-Y" data-size="md">
 *     <div class="av-aura"></div>     -- behind everything
 *     <div class="av-frame"></div>    -- ring; sits between aura and bubble
 *     <div class="av-bubble">XY</div> -- initials, foreground
 *   </div>
 *
 * Surfaces just set the shell's classes from the equipped state — no
 * other JS or per-page CSS is required.
 *
 * Performance:
 *   - All animations use transform / opacity / filter only.
 *   - No keyframes touch layout properties (width/height/margin).
 *   - prefers-reduced-motion freezes every animation.
 */

/* ===== Shell ===================================================== */
.av-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;        /* contain stacking contexts */
}
.av-shell[data-size="sm"] { width: 32px; height: 32px; }
.av-shell[data-size="md"] { width: 40px; height: 40px; }
.av-shell[data-size="lg"] { width: 64px; height: 64px; }
.av-shell[data-size="xl"] { width: 96px; height: 96px; }

/* ===== Bubble (initials / icon) =================================== */
.av-bubble {
  position: relative;
  z-index: 3;
  width: 78%;
  height: 78%;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
  color: #fff;
  font-weight: 800;
  font-size: 0.85em;
  user-select: none;
  letter-spacing: -0.02em;
  /* Inner shadow + outer outline blend cleanly under any frame. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 2px 8px rgba(0,0,0,0.35);
}
.av-shell[data-size="lg"] .av-bubble { font-size: 1.15em; }
.av-shell[data-size="xl"] .av-bubble { font-size: 1.85em; }

/* ===== Frame ring =================================================
   The frame layer sits between the aura (z=1) and the bubble (z=3).
   It's a positioned-absolute ring filling the shell. Each rarity
   variant overrides background/animation/box-shadow.
*/
.av-frame {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
  /* default: invisible until a .av-frame-* variant adds a ring */
  background: transparent;
}

/* ===== Aura layer =================================================
   Sits BEHIND the frame. Paints a soft radial halo around the bubble.
   Each variant uses different colors + a unique animation tempo.
*/
.av-aura {
  position: absolute;
  inset: -12%;             /* slight bleed beyond the bubble */
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  filter: blur(6px);
  transform: scale(0.9);
}

/* ===========================================================
   AURA VARIANTS — 5 catalog entries.
   =========================================================== */

/* ---- Purple (common) — gentle violet glow, slow breathing pulse */
.av-shell.av-aura-purple .av-aura {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(124, 58, 237, 0.30) 45%, transparent 75%);
  opacity: 1;
  animation: avAuraBreathe 3.5s ease-in-out infinite alternate;
}

/* ---- Blue (common) — cool cyan ring */
.av-shell.av-aura-blue .av-aura {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(14, 165, 233, 0.30) 45%, transparent 75%);
  opacity: 1;
  animation: avAuraBreathe 3.5s ease-in-out infinite alternate;
}

/* ---- Green (common) — friendly emerald */
.av-shell.av-aura-green .av-aura {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.55) 0%, rgba(22, 163, 74, 0.30) 45%, transparent 75%);
  opacity: 1;
  animation: avAuraBreathe 3.5s ease-in-out infinite alternate;
}

/* ---- Pink (rare) — vivid magenta + faster pulse + outer ring */
.av-shell.av-aura-pink .av-aura {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.65) 0%, rgba(217, 70, 219, 0.35) 45%, transparent 75%);
  opacity: 1;
  animation: avAuraPulse 2.4s ease-in-out infinite;
}

/* ---- Fire (epic) — animated flickering orange/red with hue shift */
.av-shell.av-aura-fire .av-aura {
  background: radial-gradient(circle,
    rgba(252, 211, 77, 0.70) 0%,
    rgba(249, 115, 22, 0.55) 30%,
    rgba(220, 38, 38, 0.30) 60%,
    transparent 80%);
  opacity: 1;
  animation: avAuraFlicker 1.4s ease-in-out infinite alternate;
  filter: blur(7px);
}

/* ===========================================================
   FRAME VARIANTS — 4 catalog entries.
   =========================================================== */

/* ---- Bronze (rare) — solid amber ring, no animation */
.av-shell.av-frame-bronze .av-frame {
  background: linear-gradient(135deg, #B45309 0%, #F59E0B 50%, #92400E 100%);
  /* "Knock out" the centre so the ring sits as a band: use a mask. */
  -webkit-mask:
    radial-gradient(circle, transparent 56%, #000 58%);
          mask:
    radial-gradient(circle, transparent 56%, #000 58%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}

/* ---- Silver (epic) — polished steel ring with slow rotation */
.av-shell.av-frame-silver .av-frame {
  background: conic-gradient(from 0deg, #A8B0BD, #E5E7EB, #A8B0BD, #6B7280, #E5E7EB, #A8B0BD);
  -webkit-mask:
    radial-gradient(circle, transparent 56%, #000 58%);
          mask:
    radial-gradient(circle, transparent 56%, #000 58%);
  box-shadow: 0 0 14px rgba(229, 231, 235, 0.45);
  animation: avFrameSpin 8s linear infinite;
}

/* ---- Gold (legendary) — animated radiant ring, brightest glow */
.av-shell.av-frame-gold .av-frame {
  background: conic-gradient(from 0deg, #B45309, #FBBF24, #FDE68A, #FBBF24, #B45309);
  -webkit-mask:
    radial-gradient(circle, transparent 56%, #000 58%);
          mask:
    radial-gradient(circle, transparent 56%, #000 58%);
  box-shadow:
    0 0 18px rgba(251, 191, 36, 0.65),
    0 0 36px rgba(245, 158, 11, 0.35);
  animation: avFrameSpin 5s linear infinite;
}

/* ---- Mythic (mythic) — rainbow gradient ring; spectrum cycle */
.av-shell.av-frame-mythic .av-frame {
  background: conic-gradient(from 0deg,
    #EF4444, #F59E0B, #FACC15, #22C55E, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444);
  -webkit-mask:
    radial-gradient(circle, transparent 56%, #000 58%);
          mask:
    radial-gradient(circle, transparent 56%, #000 58%);
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.65),
    0 0 40px rgba(236, 72, 153, 0.35);
  animation: avFrameSpin 3.5s linear infinite;
}

/* ===========================================================
   KEYFRAMES — only transform / opacity / filter
   =========================================================== */
@keyframes avAuraBreathe {
  from { opacity: 0.55; transform: scale(0.92); }
  to   { opacity: 0.95; transform: scale(1.05); }
}
@keyframes avAuraPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.90); }
  50%      { opacity: 1.00; transform: scale(1.10); }
}
@keyframes avAuraFlicker {
  0%   { opacity: 0.55; transform: scale(0.96); filter: blur(7px) hue-rotate(-6deg); }
  35%  { opacity: 0.85; transform: scale(1.04); filter: blur(8px) hue-rotate(0deg); }
  70%  { opacity: 0.70; transform: scale(1.00); filter: blur(6px) hue-rotate(8deg); }
  100% { opacity: 1.00; transform: scale(1.07); filter: blur(8px) hue-rotate(-3deg); }
}
@keyframes avFrameSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===========================================================
   Rarity badge — tiny indicator above the bubble. Optional;
   rendered by AvatarRenderer when an equipped item has a rarity
   worth flagging (legendary or mythic).
   =========================================================== */
.av-shell .av-rarity-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 35%; height: 35%;
  min-width: 14px; min-height: 14px;
  max-width: 22px; max-height: 22px;
  border-radius: 999px;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}
.av-shell .av-rarity-badge[data-rarity="legendary"] {
  background: linear-gradient(135deg, #F59E0B, #FDE68A);
  box-shadow: 0 0 6px rgba(245,158,11,0.6);
}
.av-shell .av-rarity-badge[data-rarity="mythic"] {
  background: conic-gradient(#EF4444, #F59E0B, #22C55E, #06B6D4, #A855F7, #EF4444);
  box-shadow: 0 0 8px rgba(168,85,247,0.7);
}

/* ===========================================================
   Respect reduced motion.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .av-shell .av-aura,
  .av-shell .av-frame {
    animation: none !important;
  }
}