/* ════════════════════════════════════════════════════════════
   VIP SHIELD ICONS — SVG crests with VFX aura & particles
   huanha.shop  |  vip-shields.css
════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────── */
.vs-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* sizes scale with context via font-size */
  width: 2em;
  height: 2em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* The SVG itself */
.vs-svg {
  width: 100%;
  height: 100%;
  overflow: visible;    /* allow filter glow to bleed */
  animation: vsFloat 3.5s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes vsFloat {
  0%,100% { transform: translateY(0);   }
  50%      { transform: translateY(-8%); }
}

/* ── Tier-specific glow variable ─────────────────────── */
.vs-wrap--bronze  { --vs-c: rgba(205,127,50,.9);  --vs-c2: rgba(232,162,94,.6); }
.vs-wrap--silver  { --vs-c: rgba(184,200,216,.9);  --vs-c2: rgba(212,221,232,.6); }
.vs-wrap--gold    { --vs-c: rgba(255,215,0,.95);   --vs-c2: rgba(255,241,160,.7); }
.vs-wrap--diamond { --vs-c: rgba(168,237,255,.95); --vs-c2: rgba(224,250,255,.7); }

/* ── Aura ring (pulsing glow behind shield) ───────────── */
.vs-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    var(--vs-c) 0%,
    var(--vs-c2) 20%,
    transparent 70%
  );
  opacity: 0;
  animation: vsAuraPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vsAuraPulse {
  0%,100% { opacity: 0;    transform: scale(.85); }
  50%      { opacity: 0.55; transform: scale(1.1); }
}

/* ── Rotating sparkle ring ────────────────────────────── */
.vs-wrap::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--vs-c);
  border-right-color: var(--vs-c2);
  opacity: 0;
  animation: vsRingSpin 3s linear infinite, vsRingFade 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vsRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes vsRingFade {
  0%,100% { opacity: 0.2; }
  50%      { opacity: 0.7; }
}

/* ── Diamond tier: extra shimmer ring ────────────────── */
.vs-wrap--diamond::after {
  animation: vsRingSpin 2s linear infinite, vsRingFade 2s ease-in-out infinite;
  border-top-color: #a8edff;
  border-right-color: #e0faff;
  inset: -40%;
}

/* ── Gold tier: warm pulsing shadow ──────────────────── */
.vs-wrap--gold .vs-svg {
  animation: vsFloat 3.5s ease-in-out infinite,
             vsGoldGlow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255,215,0,.6));
}
@keyframes vsGoldGlow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(255,215,0,.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,215,0,.95))
                     drop-shadow(0 0 22px rgba(255,170,0,.5)); }
}

/* ── Diamond tier: cyan glow ─────────────────────────── */
.vs-wrap--diamond .vs-svg {
  animation: vsFloat 3s ease-in-out infinite,
             vsDiamondGlow 1.8s ease-in-out infinite;
}
@keyframes vsDiamondGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(168,237,255,.6)); }
  50%      { filter: drop-shadow(0 0 14px rgba(168,237,255,1))
                     drop-shadow(0 0 28px rgba(100,210,255,.5)); }
}

/* ── Bronze tier: warm amber glow ────────────────────── */
.vs-wrap--bronze .vs-svg {
  animation: vsFloat 4s ease-in-out infinite,
             vsBronzeGlow 3s ease-in-out infinite;
}
@keyframes vsBronzeGlow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(205,127,50,.5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(205,127,50,.9))
                     drop-shadow(0 0 20px rgba(180,90,20,.4)); }
}

/* ── Silver tier: cool silver glow ───────────────────── */
.vs-wrap--silver .vs-svg {
  animation: vsFloat 4s ease-in-out infinite,
             vsSilverGlow 3.5s ease-in-out infinite;
}
@keyframes vsSilverGlow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(180,200,220,.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(180,200,220,.85))
                     drop-shadow(0 0 20px rgba(100,150,200,.35)); }
}

/* ════════════════════════════════════════════════════════
   CONTEXT SIZING — how large the shield appears in each spot
════════════════════════════════════════════════════════════ */

/* Sidebar VIP card icon */
.sb-vip-icon .vs-wrap { font-size: 1.4rem; }
.sb-vip-icon           { display: inline-flex; align-items: center; }

/* Sidebar user VIP tag */
.sb-user-vip-tag .vs-wrap { font-size: 1rem; }

/* Homepage profile badge */
.vip-badge .vb-icon .vs-wrap { font-size: 1rem; }
.vip-badge .vb-icon            { display: inline-flex; align-items: center; }

/* Level-up overlay emoji */
.vip-levelup-emoji .vs-wrap {
  font-size: 3.2rem;
  /* extra VFX for level-up: second aura layer */
}
.vip-levelup-emoji .vs-wrap::before {
  animation-duration: 1.4s;
}
.vip-levelup-emoji .vs-wrap::after {
  animation-duration: 1.2s;
}

/* VIP card in sidebar — big display */
.sb-vip-top .sb-vip-icon {
  font-size: 0;   /* reset so vs-wrap em works cleanly */
  line-height: 0;
}
.sb-vip-top .sb-vip-icon .vs-wrap {
  font-size: 1.5rem;
}

/* In the level-up overlay */
.vip-levelup-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════
   PARTICLE FLOATERS (positioned by JS / or pure CSS trick)
   — 4 tiny dots that orbit the shield
════════════════════════════════════════════════════════════ */
.vs-wrap .vs-particles {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
  animation: vsParticleOrbit 5s linear infinite;
}
@keyframes vsParticleOrbit {
  to { transform: rotate(360deg); }
}
/* dots via pseudo */
.vs-wrap .vs-particles::before,
.vs-wrap .vs-particles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--vs-c);
  box-shadow: 0 0 4px var(--vs-c);
}
.vs-wrap .vs-particles::before {
  width: 4px; height: 4px;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  animation: vsParticleA 2.5s ease-in-out infinite alternate;
}
.vs-wrap .vs-particles::after {
  width: 3px; height: 3px;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  animation: vsParticleB 3s ease-in-out infinite alternate;
}
@keyframes vsParticleA {
  0%   { opacity: 0.2; transform: translateX(-50%) scale(.7); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.2); }
}
@keyframes vsParticleB {
  0%   { opacity: 1;   transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0.2; transform: translateX(-50%) scale(.6); }
}