/* =========================================
   SPICY ICONS – HOVER GLOW BOOST + ACTIVE PULSE
   Wersja: Plugin (zero wklejania)
   ========================================= */

:root{
  --spicy-glow-purple: rgba(138, 43, 226, 0.55); /* #8A2BE2 */
  --spicy-glow-pink:   rgba(255, 45, 175, 0.45); /* #FF2DAF */
  --spicy-glow-blue:   rgba(0, 191, 255, 0.50);  /* verified glow */
  --spicy-glow-gold:   rgba(255, 215, 120, 0.45);/* VIP accent */
  --spicy-shadow:      rgba(0,0,0,0.55);

  --spicy-boost: 1.08;
  --spicy-lift: -3px;
  --spicy-speed: 220ms;
  --spicy-ease: cubic-bezier(.2,.8,.2,1);

  --spicy-pulse-speed: 1.35s;
}

/* ===========================
   TILES (kafelki premium)
   Użycie: dodaj klasę .spicy-icon-tile na wrapper
   =========================== */
.spicy-icon-tile{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 30% 20%, rgba(20,0,33,0.85) 0%, rgba(0,0,0,0.92) 55%, rgba(0,0,0,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08); /* metal frame 1–2px */
  box-shadow:
    0 10px 28px var(--spicy-shadow),
    0 0 0 1px rgba(255,255,255,0.04) inset;

  transform: translateZ(0);
  will-change: transform, filter, box-shadow;
  transition:
    transform var(--spicy-speed) var(--spicy-ease),
    box-shadow var(--spicy-speed) var(--spicy-ease),
    filter var(--spicy-speed) var(--spicy-ease);
}

/* glass highlight */
.spicy-icon-tile::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 22%, rgba(255,255,255,0.00) 55%);
  opacity: 0.45;
}

/* glow aura (domyślnie purple/pink) */
.spicy-icon-tile::after{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 35% 30%, var(--spicy-glow-purple) 0%, rgba(138,43,226,0.0) 70%),
    radial-gradient(55% 55% at 70% 60%, var(--spicy-glow-pink) 0%, rgba(255,45,175,0.0) 72%);
  filter: blur(12px);
  opacity: 0.55;
  transition:
    opacity var(--spicy-speed) var(--spicy-ease),
    filter var(--spicy-speed) var(--spicy-ease);
}

.spicy-icon-tile img{
  width: 72%;
  height: auto;
  display:block;
  transform: translateZ(0);
  transition: transform var(--spicy-speed) var(--spicy-ease), filter var(--spicy-speed) var(--spicy-ease);
}

/* Hover / focus */
.spicy-icon-tile:hover,
.spicy-icon-tile:focus-visible{
  transform: translateY(var(--spicy-lift)) scale(var(--spicy-boost));
  box-shadow:
    0 14px 36px rgba(0,0,0,0.65),
    0 0 28px rgba(138,43,226,0.18),
    0 0 22px rgba(255,45,175,0.12),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  filter: saturate(1.05);
}

.spicy-icon-tile:hover::after,
.spicy-icon-tile:focus-visible::after{
  opacity: 0.85;
  filter: blur(14px);
}

.spicy-icon-tile:hover img,
.spicy-icon-tile:focus-visible img{
  transform: scale(1.03);
  filter:
    drop-shadow(0 0 10px rgba(138,43,226,0.35))
    drop-shadow(0 0 8px rgba(255,45,175,0.22));
}

/* ===========================
   ACTIVE PULSE
   Użycie: dodaj klasę .is-active
   =========================== */
@keyframes spicyPulseGlow {
  0%   { transform: translateZ(0) scale(1);   filter: saturate(1.00); }
  50%  { transform: translateZ(0) scale(1.02); filter: saturate(1.10); }
  100% { transform: translateZ(0) scale(1);   filter: saturate(1.00); }
}

@keyframes spicyPulseAura {
  0%   { opacity: 0.70; filter: blur(14px); }
  50%  { opacity: 1.00; filter: blur(18px); }
  100% { opacity: 0.70; filter: blur(14px); }
}

.spicy-icon-tile.is-active{
  animation: spicyPulseGlow var(--spicy-pulse-speed) ease-in-out infinite;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.70),
    0 0 34px rgba(138,43,226,0.22),
    0 0 26px rgba(255,45,175,0.16),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}

.spicy-icon-tile.is-active::after{
  opacity: 0.95;
  filter: blur(16px);
  animation: spicyPulseAura var(--spicy-pulse-speed) ease-in-out infinite;
}

/* VERIFIED (blue glow) */
.spicy-icon-tile.is-verified::after{
  background:
    radial-gradient(62% 62% at 40% 32%, var(--spicy-glow-blue) 0%, rgba(0,191,255,0.0) 72%);
}

/* VERIFIED active (blue pulse) */
.spicy-icon-tile.is-verified.is-active{
  box-shadow:
    0 16px 40px rgba(0,0,0,0.70),
    0 0 34px rgba(0,191,255,0.22),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}

/* VIP (gold frame + neon) */
.spicy-icon-tile.is-vip{
  border-color: rgba(255, 215, 120, 0.22);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255, 215, 120, 0.10) inset;
}

.spicy-icon-tile.is-vip::after{
  background:
    radial-gradient(62% 62% at 40% 32%, var(--spicy-glow-gold) 0%, rgba(255,215,120,0.0) 72%),
    radial-gradient(55% 55% at 70% 60%, var(--spicy-glow-purple) 0%, rgba(138,43,226,0.0) 72%);
}

.spicy-icon-tile.is-vip:hover,
.spicy-icon-tile.is-vip:focus-visible{
  box-shadow:
    0 16px 44px rgba(0,0,0,0.72),
    0 0 34px rgba(255, 215, 120, 0.18),
    0 0 28px rgba(138,43,226,0.18),
    0 0 22px rgba(255,45,175,0.12),
    0 0 0 1px rgba(255, 215, 120, 0.14) inset;
}

/* ===========================
   MENU (transparent icons)
   Użycie: .spicy-icon-menu na wrapper <a> / <span>
   =========================== */
.spicy-icon-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  transform: translateZ(0);
  transition: transform var(--spicy-speed) var(--spicy-ease), filter var(--spicy-speed) var(--spicy-ease);
}

.spicy-icon-menu img{
  width: 26px; height: 26px;
  display:block;
  transition: transform var(--spicy-speed) var(--spicy-ease), filter var(--spicy-speed) var(--spicy-ease);
}

.spicy-icon-menu:hover,
.spicy-icon-menu:focus-visible{
  transform: translateY(-1px) scale(1.06);
}

.spicy-icon-menu:hover img,
.spicy-icon-menu:focus-visible img{
  filter:
    drop-shadow(0 0 9px rgba(138,43,226,0.45))
    drop-shadow(0 0 7px rgba(255,45,175,0.30));
}

/* menu verified */
.spicy-icon-menu.is-verified:hover img,
.spicy-icon-menu.is-verified:focus-visible img{
  filter: drop-shadow(0 0 10px rgba(0,191,255,0.55));
}

/* menu vip */
.spicy-icon-menu.is-vip:hover img,
.spicy-icon-menu.is-vip:focus-visible img{
  filter:
    drop-shadow(0 0 10px rgba(255,215,120,0.40))
    drop-shadow(0 0 9px rgba(138,43,226,0.30));
}

/* Dostępność: wyłącz animacje, jeśli user ma reduce motion */
@media (prefers-reduced-motion: reduce){
  .spicy-icon-tile,
  .spicy-icon-tile img,
  .spicy-icon-tile::after,
  .spicy-icon-menu,
  .spicy-icon-menu img{
    transition: none !important;
    animation: none !important;
  }
}