/* ── Profile Badge & Cosmetic Decorations ──────────────────────────────
   Premium aura, holographic staff badge, tier plaques, sticker animations.
   Keep separate from scenes.css so either can be swapped independently.
   Uses variables from variables.css — no hardcoded hex except gradient stops
   intrinsic to the visual effect.
   ──────────────────────────────────────────────────────────────────── */

/* ═══ PREMIUM AURA ═══════════════════════════════════════════════════ */

.profile-card--premium {
  position: relative;
}

.profile-card--premium::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #d4a03c, #f0d060, #d4a03c, #b8862e,
    #d4a03c, #f0d060, #d4a03c
  );
  z-index: -1;
  animation: premium-rotate 6s linear infinite;
}

.profile-card--premium::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 223, 120, 0.25) 45%,
    rgba(255, 223, 120, 0.5) 50%,
    rgba(255, 223, 120, 0.25) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  z-index: -1;
  animation: premium-sheen 3s ease-in-out infinite;
}

@keyframes premium-rotate {
  to { transform: rotate(360deg); }
}

@keyframes premium-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Premium crown crest on avatar ─────────────────────────────────── */

.avatar-crest {
  display: none;
}

.profile-card--premium .avatar-crest {
  display: block;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  z-index: 5;
  filter: drop-shadow(0 0 6px rgba(212, 160, 60, 0.6));
}

/* ═══ HOLOGRAPHIC STAFF BADGE ════════════════════════════════════════ */

.staff-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0812, #12101a);
}

.staff-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #6366f1, #a855f7, #ec4899, #f43f5e,
    #f97316, #eab308, #22c55e, #06b6d4,
    #6366f1
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: holo-spin 4s linear infinite;
}

.staff-badge-text {
  background: linear-gradient(
    90deg,
    #a78bfa, #c084fc, #f0abfc, #93c5fd, #a78bfa
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shift 3s ease-in-out infinite;
}

.staff-badge-icon {
  width: 14px;
  height: 14px;
  fill: #a78bfa;
  flex-shrink: 0;
}

.staff-badge-glow {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  opacity: 0.4;
  filter: blur(8px);
  background: conic-gradient(
    from 0deg,
    #6366f1, #a855f7, #ec4899, #06b6d4, #6366f1
  );
  animation: holo-pulse 2s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes holo-spin {
  to { transform: rotate(360deg); }
}

@keyframes holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes holo-pulse {
  0%   { opacity: 0.25; }
  100% { opacity: 0.5; }
}

/* ═══ TIER PLAQUES ═══════════════════════════════════════════════════ */

.tier-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ff-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tier-tag--common    { background: rgba(120, 120, 130, 0.2); color: #9a9aa0; }
.tier-tag--uncommon  { background: rgba(74, 222, 128, 0.1);  color: #4ade80; }
.tier-tag--rare      { background: rgba(96, 165, 250, 0.1);  color: #60a5fa; }
.tier-tag--epic      { background: rgba(168, 85, 247, 0.1);  color: #a855f7; }
.tier-tag--legendary { background: rgba(250, 204, 21, 0.1);  color: #facc15; }
.tier-tag--limited   { background: rgba(244, 63, 94, 0.1);   color: #f43f5e; }

/* ═══ STICKER SLOTS ══════════════════════════════════════════════════ */

.sticker-slot {
  position: absolute;
  width: 48px;
  height: 48px;
  z-index: 10;
  animation: sticker-float 4s ease-in-out infinite;
}

.sticker-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.sticker-slot--1 { top: 10%;  left: -8%;  animation-delay: 0s; }
.sticker-slot--2 { top: 10%;  right: -8%; animation-delay: 0.6s; }
.sticker-slot--3 { top: 40%;  left: -10%; animation-delay: 1.2s; }
.sticker-slot--4 { top: 40%;  right: -10%; animation-delay: 1.8s; }
.sticker-slot--5 { bottom: 5%; left: -6%;  animation-delay: 2.4s; }
.sticker-slot--6 { bottom: 5%; right: -6%; animation-delay: 3.0s; }

@keyframes sticker-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Responsive: hide top slots on small screens */
@media (max-width: 600px) {
  .sticker-slot--1,
  .sticker-slot--2 {
    display: none;
  }

  .sticker-slot {
    width: 36px;
    height: 36px;
  }
}