/* Efeitos cosméticos compartilhados (preview sidebar + reuso) */
:root {
  --pg-fx-pulse-dur: 2s;
  --pg-fx-float-dur: 2.4s;
  --pg-fx-shimmer-dur: 2.4s;
  --pg-fx-sparkle-dur: 1.8s;
  --pg-fx-spin-dur: 7s;
  --pg-fx-ring-dur: 2s;
  --pg-fx-glow-dur: 2s;
  --pg-fx-ease: ease-in-out;
}

@keyframes pg-fx-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 6px rgba(232, 197, 71, 0.35));
  }
  50% {
    transform: scale(1.055);
    filter: brightness(1.18) drop-shadow(0 0 18px rgba(232, 197, 71, 0.85));
  }
}

@keyframes pg-fx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pg-fx-shimmer {
  0%, 100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 4px rgba(255, 236, 170, 0.2));
  }
  50% {
    filter: brightness(1.28) saturate(1.35) drop-shadow(0 0 16px rgba(255, 236, 170, 0.75));
  }
}

@keyframes pg-fx-sparkle {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 236, 170, 0.15)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 236, 170, 1)) drop-shadow(0 0 22px rgba(232, 197, 71, 0.65))
      brightness(1.12);
  }
}

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

@keyframes pg-fx-glow {
  0%, 100% {
    filter: brightness(1.06) saturate(1.12)
      drop-shadow(0 0 8px rgba(232, 197, 71, 0.55))
      drop-shadow(0 0 18px rgba(201, 162, 39, 0.4));
  }
  50% {
    filter: brightness(1.18) saturate(1.25)
      drop-shadow(0 0 14px rgba(255, 236, 170, 0.95))
      drop-shadow(0 0 28px rgba(232, 197, 71, 0.7));
  }
}

@keyframes pg-fx-title-mobile-glow {
  0%, 100% { filter: brightness(1.04) saturate(1.08); }
  50% { filter: brightness(1.16) saturate(1.2); }
}

@keyframes pg-fx-title-mobile-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes pg-fx-ring {
  0% { box-shadow: 0 0 0 0 rgba(232, 197, 71, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(232, 197, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 197, 71, 0); }
}

@keyframes pg-chromatic {
  0%, 100% { text-shadow: -2px 0 #ff2d55, 2px 0 #22d3ee, 0 0 12px rgba(255, 255, 255, 0.2); }
  50% { text-shadow: -3px 1px #a855f7, 3px -1px #34d399, 0 0 16px rgba(255, 255, 255, 0.35); }
}

@keyframes pg-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes pg-stellar {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 248, 220, 0.35)) brightness(1); }
  50% { filter: drop-shadow(0 0 10px rgba(253, 224, 71, 0.55)) brightness(1.06); }
}

@keyframes pg-fire-pulse {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 6px rgba(251, 146, 60, 0.45), 0 0 14px rgba(239, 68, 68, 0.3); }
  50% { filter: brightness(1.08); text-shadow: 0 0 10px rgba(251, 191, 36, 0.7), 0 0 22px rgba(249, 115, 22, 0.45); }
}

@keyframes pg-electric {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 6px rgba(103, 232, 249, 0.5), 0 0 14px rgba(14, 165, 233, 0.35); }
  40% { filter: brightness(1.12); text-shadow: 0 0 10px rgba(165, 243, 252, 0.9), 1px 0 18px rgba(14, 165, 233, 0.55); }
  60% { filter: brightness(1.02); text-shadow: 0 0 7px rgba(103, 232, 249, 0.5), 0 0 14px rgba(56, 189, 248, 0.4); }
  80% { filter: brightness(1.15); text-shadow: 0 0 14px rgba(186, 230, 253, 0.95), -1px 0 20px rgba(34, 211, 238, 0.55); }
}

@keyframes pg-glitch {
  0%, 100% { transform: translate(0); text-shadow: -1px 0 #ff2d55, 1px 0 #22d3ee; }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(0); text-shadow: 2px 0 #ff2d55, -2px 0 #22d3ee; }
}

@keyframes pg-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ---- Moldura / avatar stack no preview ---- */
.sb-pv-avatar-stack.pg-icon-fx--spin .sb-pv-frame,
.sb-pv-avatar-stack.pg-icon-fx--spin .pg-avatar-frame-img {
  animation: pg-fx-spin var(--pg-fx-spin-dur) linear infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--float {
  animation: pg-fx-float var(--pg-fx-float-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--pulse {
  animation: pg-fx-pulse var(--pg-fx-pulse-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--glow,
.sb-pv-avatar-stack.pg-icon-fx--shimmer,
.sb-pv-avatar-stack.pg-icon-fx--sparkle {
  animation: none;
}

.sb-pv-avatar-stack.pg-icon-fx--glow .sb-pv-frame,
.sb-pv-avatar-stack.pg-icon-fx--glow .pg-avatar-frame-img {
  animation: pg-fx-glow var(--pg-fx-glow-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--shimmer .sb-pv-frame,
.sb-pv-avatar-stack.pg-icon-fx--shimmer .pg-avatar-frame-img {
  animation: pg-fx-shimmer var(--pg-fx-shimmer-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--sparkle .sb-pv-frame,
.sb-pv-avatar-stack.pg-icon-fx--sparkle .pg-avatar-frame-img {
  animation: pg-fx-sparkle var(--pg-fx-sparkle-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-avatar-stack.pg-icon-fx--ring {
  animation: pg-fx-ring var(--pg-fx-ring-dur) var(--pg-fx-ease) infinite;
  border-radius: 50%;
}

/* Título / classe / badge */
.sb-pv-title-banner.pg-icon-fx--spin img,
.sb-pv-class-emblem.pg-icon-fx--spin img,
.sb-pv-achieve.pg-icon-fx--spin img {
  animation: pg-fx-spin var(--pg-fx-spin-dur) linear infinite;
}

.sb-pv-title-banner.pg-icon-fx--float,
.sb-pv-class-emblem.pg-icon-fx--float,
.sb-pv-achieve.pg-icon-fx--float {
  animation: pg-fx-float var(--pg-fx-float-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-title-banner.pg-icon-fx--pulse,
.sb-pv-class-emblem.pg-icon-fx--pulse,
.sb-pv-achieve.pg-icon-fx--pulse {
  animation: pg-fx-pulse var(--pg-fx-pulse-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-title-banner.pg-icon-fx--glow,
.sb-pv-class-emblem.pg-icon-fx--glow,
.sb-pv-achieve.pg-icon-fx--glow {
  animation: none;
}

.sb-pv-title-banner.pg-icon-fx--glow img,
.sb-pv-class-emblem.pg-icon-fx--glow img,
.sb-pv-achieve.pg-icon-fx--glow img,
.sb-pv-achieve.pg-icon-fx--glow .sb-pv-badge-img {
  animation: pg-fx-glow var(--pg-fx-glow-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-title-banner.pg-icon-fx--shimmer,
.sb-pv-class-emblem.pg-icon-fx--shimmer,
.sb-pv-achieve.pg-icon-fx--shimmer {
  animation: none;
}

.sb-pv-title-banner.pg-icon-fx--shimmer img,
.sb-pv-class-emblem.pg-icon-fx--shimmer img,
.sb-pv-achieve.pg-icon-fx--shimmer img {
  animation: pg-fx-shimmer var(--pg-fx-shimmer-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-title-banner.pg-icon-fx--sparkle,
.sb-pv-class-emblem.pg-icon-fx--sparkle,
.sb-pv-achieve.pg-icon-fx--sparkle {
  animation: none;
}

.sb-pv-title-banner.pg-icon-fx--sparkle img,
.sb-pv-class-emblem.pg-icon-fx--sparkle img,
.sb-pv-achieve.pg-icon-fx--sparkle img {
  animation: pg-fx-sparkle var(--pg-fx-sparkle-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-title-banner.pg-icon-fx--ring,
.sb-pv-class-emblem.pg-icon-fx--ring,
.sb-pv-achieve.pg-icon-fx--ring {
  animation: pg-fx-ring var(--pg-fx-ring-dur) var(--pg-fx-ease) infinite;
}

/* ---- Itens equipados (arma / acessórios / defesa) ---- */
.sb-pv-gear-art.pg-icon-fx {
  position: relative;
  overflow: visible;
}

.sb-pv-gear-art.pg-icon-fx--spin img {
  animation: pg-fx-spin var(--pg-fx-spin-dur) linear infinite;
}

.sb-pv-gear-art.pg-icon-fx--float {
  animation: pg-fx-float var(--pg-fx-float-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-gear-art.pg-icon-fx--pulse {
  animation: pg-fx-pulse var(--pg-fx-pulse-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-gear-art.pg-icon-fx--glow,
.sb-pv-gear-art.pg-icon-fx--shimmer,
.sb-pv-gear-art.pg-icon-fx--sparkle {
  animation: none;
}

.sb-pv-gear-art.pg-icon-fx--glow img {
  animation: pg-fx-glow var(--pg-fx-glow-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-gear-art.pg-icon-fx--shimmer img {
  animation: pg-fx-shimmer var(--pg-fx-shimmer-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-gear-art.pg-icon-fx--sparkle img {
  animation: pg-fx-sparkle var(--pg-fx-sparkle-dur) var(--pg-fx-ease) infinite;
}

.sb-pv-gear-art.pg-icon-fx--ring {
  animation: pg-fx-ring var(--pg-fx-ring-dur) var(--pg-fx-ease) infinite;
  border-radius: 9px;
}

/* ---- Nome ---- */
.sb-pv-name-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 2px 14px 4px;
}

.sb-pv-name-wrap .sb-pv-name {
  margin: 0;
}

.sb-pv-name-wrap.pg-fx-glow .sb-pv-name {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pg-name-ink, #e8c547) 70%, transparent));
}

.sb-pv-name-wrap.pg-fx-neon .sb-pv-name {
  text-shadow:
    0 0 4px #fff,
    0 0 10px var(--pg-name-ink, #22d3ee),
    0 0 22px var(--pg-name-ink, #22d3ee),
    0 0 36px var(--pg-name-ink, #22d3ee) !important;
}

.sb-pv-name-wrap.pg-fx-chromatic .sb-pv-name {
  text-shadow: -2px 0 #ff2d55, 2px 0 #22d3ee, 0 0 12px rgba(255, 255, 255, 0.25) !important;
  animation: pg-chromatic 2.8s ease-in-out infinite;
}

.sb-pv-name-wrap.pg-fx-shimmer .sb-pv-name {
  background-size: 220% auto !important;
  animation: pg-shimmer 2.4s linear infinite;
}

.sb-pv-name-wrap.pg-fx-sparkle .sb-pv-name {
  animation: pg-stellar 2.2s ease-in-out infinite;
}

.sb-pv-name-wrap.pg-fx-fire .sb-pv-name {
  animation: pg-fire-pulse 1.6s ease-in-out infinite;
}

.sb-pv-name-wrap.pg-fx-electric .sb-pv-name {
  animation: pg-electric 1.4s ease-in-out infinite;
}

.sb-pv-name-wrap.pg-fx-glitch .sb-pv-name {
  animation: pg-glitch 1.2s steps(2, end) infinite;
}

.sb-pv-name-wrap.pg-fx-rainbow .sb-pv-name {
  animation: pg-rainbow 4s linear infinite;
}

.sb-pv-name.is-gradient-name {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}