/* Commercial UI FX pack: hover glow, button press, SSR/UR glow, panel lighting */
:root{
  --fx-gold: rgba(255, 214, 122, 0.35);
  --fx-blue: rgba(120, 190, 255, 0.28);
  --fx-purple: rgba(190, 120, 255, 0.28);
  --fx-red: rgba(255, 90, 90, 0.28);

  --fx-sheen: linear-gradient(120deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.10) 65%,
    rgba(255,255,255,0.00) 100%);
}

/* ===== Buttons: hover glow + press ===== */
.btn, button, .pill, .tab-btn, .tabbtn, .showBtn, .iconBtn, a.pill{
  position: relative;
  transform: translateZ(0);
  transition: transform .12s ease, filter .16s ease, box-shadow .16s ease;
  will-change: transform, filter;
}

.btn::before, button::before, .pill::before, .tab-btn::before, .tabbtn::before, .showBtn::before, .iconBtn::before, a.pill::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: var(--fx-sheen);
  opacity: 0;
  transform: translateX(-40%);
  pointer-events:none;
  mix-blend-mode: screen;
}

.btn:hover, button:hover, .pill:hover, .tab-btn:hover, .tabbtn:hover, .showBtn:hover, .iconBtn:hover, a.pill:hover{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)) drop-shadow(0 0 14px var(--fx-gold));
  box-shadow: 0 14px 28px rgba(0,0,0,.26);
}

.btn:hover::before, button:hover::before, .pill:hover::before, .tab-btn:hover::before, .tabbtn:hover::before, .showBtn:hover::before, .iconBtn:hover::before, a.pill:hover::before{
  opacity: 0.85;
  animation: fx-sheen 1.2s ease both;
}

.btn:active, button:active, .pill:active, .tab-btn:active, .tabbtn:active, .showBtn:active, .iconBtn:active, a.pill:active{
  transform: translateY(1px) scale(.985);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.22));
}

/* ===== Cards: hover lift ===== */
.card, .podiumCard, .recCard, .entryCard, .authorCard, .item, .asset-thumb{
  transition: transform .14s ease, filter .16s ease, box-shadow .16s ease;
}

.card:hover, .recCard:hover, .entryCard:hover, .authorCard:hover, .item:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(255,220,120,.10));
}

/* ===== SSR / UR glow (usable on any element by adding class) ===== */
.fx-ssr, .rar-SSR, .rank1, .ssrGlow{
  position: relative;
}
.fx-ur, .rar-UR, .urGlow{
  position: relative;
}

.fx-ssr::after, .rar-SSR::after, .ssrGlow::after{
  content:"";
  position:absolute;
  inset:-10px;
  background: var(--ui-glow-ssr, none) center/cover no-repeat;
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: screen;
  filter: blur(.2px);
  animation: fx-pulse 2.2s ease-in-out infinite;
  z-index: 0;
}
.fx-ur::after, .rar-UR::after, .urGlow::after{
  content:"";
  position:absolute;
  inset:-12px;
  background: var(--ui-glow-ur, none) center/cover no-repeat;
  opacity: .62;
  pointer-events:none;
  mix-blend-mode: screen;
  animation: fx-pulse 1.9s ease-in-out infinite;
  z-index: 0;
}

/* ensure text stays above glow */
.fx-ssr > *, .fx-ur > *, .rar-SSR > *, .rar-UR > *{
  position: relative;
  z-index: 1;
}

/* ===== Panel lighting animation (add class ui-panel to container) ===== */
.ui-panel{
  position: relative;
  overflow: visible;
}
.ui-panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: 18px;
  background:
    radial-gradient(420px 220px at 10% 25%, rgba(255,235,170,.10), rgba(0,0,0,0) 60%),
    radial-gradient(520px 260px at 80% 70%, rgba(120,190,255,.08), rgba(0,0,0,0) 62%),
    radial-gradient(260px 140px at 50% 110%, rgba(255,255,255,.05), rgba(0,0,0,0) 65%);
  mix-blend-mode: screen;
  opacity: .85;
  animation: fx-panel-light 6.5s ease-in-out infinite;
  z-index: 0;
}
.ui-panel > *{
  position: relative;
  z-index: 1;
}

/* ===== Rarity label colors (for studio level up fx etc.) ===== */
.rarity{font-weight:800; letter-spacing:.5px}
.rar-C{color: rgba(74,222,128,.95)}
.rar-R{color: rgba(59,130,246,.95)}
.rar-SR{color: rgba(168,85,247,.95)}
.rar-SSR{color: rgba(245,158,11,.95)}
.rar-UR{color: rgba(239,68,68,.95); text-shadow: 0 0 10px rgba(239,68,68,.25)}

/* ===== Keyframes ===== */
@keyframes fx-sheen{
  0%{ transform: translateX(-45%); opacity: 0 }
  15%{ opacity: .35 }
  100%{ transform: translateX(45%); opacity: 0 }
}
@keyframes fx-pulse{
  0%,100%{ opacity:.45; transform: scale(1) }
  50%{ opacity:.75; transform: scale(1.01) }
}
@keyframes fx-panel-light{
  0%,100%{ transform: translate3d(0,0,0); opacity: .78 }
  40%{ transform: translate3d(10px,-6px,0); opacity: .92 }
  70%{ transform: translate3d(-8px,8px,0); opacity: .86 }
}