/* RF-AVALON Market V61.0.98
   Bring back the stronger/thicker-looking animated grade frames from V94,
   but make grade-0 / no-grade items visually match that same weight.
   The frame geometry is intentionally bolder again because the user prefers
   the more expressive look, especially on high grades like 9. */

/* ---------- Colored grades ---------- */
.equipment-slot.graded,
.equipment-slot.graded.filled:hover,
.equipment-slot.graded.filled:focus-visible {
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--item-grade-color) 72%, #738091) !important;
  box-shadow:
    inset 0 0 0 1px #080b0c,
    inset 0 0 14px color-mix(in srgb, var(--item-grade-color) 12%, transparent),
    0 0 5px color-mix(in srgb, var(--item-grade-color) 18%, transparent) !important;
}

.equipment-slot.graded::before {
  inset: -2px !important;
  border: 1px solid color-mix(in srgb, var(--item-grade-color) 78%, white) !important;
  opacity: .94 !important;
  box-shadow:
    0 0 4px var(--item-grade-color),
    inset 0 0 4px color-mix(in srgb, var(--item-grade-color) 32%, transparent) !important;
  animation: rfv98-grade-aura 3.8s ease-in-out infinite !important;
}

.equipment-slot.graded::after {
  inset: -3px !important;
  padding: 2px !important;
  border-radius: 3px !important;
  background: conic-gradient(
    from var(--rfv94-grade-angle, 0deg),
    transparent 0deg 236deg,
    color-mix(in srgb, var(--item-grade-color) 24%, transparent) 256deg,
    var(--item-grade-color) 282deg,
    color-mix(in srgb, var(--item-grade-color) 45%, white) 300deg,
    #ffffff 309deg,
    color-mix(in srgb, var(--item-grade-color) 62%, white) 317deg,
    var(--item-grade-color) 330deg,
    color-mix(in srgb, var(--item-grade-color) 24%, transparent) 346deg,
    transparent 360deg
  ) !important;
  filter:
    drop-shadow(0 0 2px var(--item-grade-color))
    drop-shadow(0 0 4px color-mix(in srgb, var(--item-grade-color) 38%, transparent)) !important;
  animation: rfv94-grade-tracer 3.05s linear infinite !important;
}

.equipment-slot.graded.filled:hover::before,
.equipment-slot.graded.filled:focus-visible::before {
  opacity: 1 !important;
  box-shadow:
    0 0 6px var(--item-grade-color),
    inset 0 0 5px color-mix(in srgb, var(--item-grade-color) 38%, transparent) !important;
}

.equipment-slot.graded.filled:hover::after,
.equipment-slot.graded.filled:focus-visible::after {
  animation-duration: 1.65s !important;
  filter:
    drop-shadow(0 0 3px var(--item-grade-color))
    drop-shadow(0 0 7px color-mix(in srgb, var(--item-grade-color) 68%, transparent)) !important;
}

/* ---------- Grade 0 / no grade ---------- */
.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable) {
  --rfv98-grade-zero: #9ca8b8;
  overflow: visible;
  border-color: #758090 !important;
  box-shadow:
    inset 0 0 0 1px #080b0c,
    inset 0 0 13px rgba(101, 113, 128, .15),
    0 0 4px rgba(133, 146, 163, .10) !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::before {
  inset: -2px !important;
  border: 1px solid #a0abbb !important;
  opacity: .90 !important;
  box-shadow:
    0 0 4px rgba(160,171,187,.40),
    inset 0 0 4px rgba(160,171,187,.18) !important;
  animation: rfv98-grade-zero-aura 4.7s ease-in-out infinite !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::after {
  inset: -3px !important;
  padding: 2px !important;
  border-radius: 3px !important;
  background: conic-gradient(
    from var(--rfv94-grade-angle, 0deg),
    transparent 0deg 258deg,
    rgba(166,178,194,.14) 278deg,
    rgba(214,221,231,.72) 300deg,
    rgba(247,249,252,.98) 312deg,
    rgba(186,197,211,.44) 328deg,
    transparent 346deg 360deg
  ) !important;
  filter:
    drop-shadow(0 0 2px rgba(180,192,208,.38))
    drop-shadow(0 0 4px rgba(180,192,208,.18)) !important;
  animation: rfv94-grade-tracer 4.8s linear infinite !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):hover::before,
.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):focus-visible::before {
  opacity: 1 !important;
  border-color: #b5c0cf !important;
  box-shadow:
    0 0 5px rgba(181,192,207,.44),
    inset 0 0 4px rgba(181,192,207,.22) !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):hover::after,
.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):focus-visible::after {
  filter:
    drop-shadow(0 0 3px rgba(200,210,223,.46))
    drop-shadow(0 0 6px rgba(180,192,208,.26)) !important;
}

@keyframes rfv98-grade-aura {
  0%, 100% {
    box-shadow:
      0 0 4px var(--item-grade-color),
      inset 0 0 4px color-mix(in srgb, var(--item-grade-color) 28%, transparent);
  }
  50% {
    box-shadow:
      0 0 7px color-mix(in srgb, var(--item-grade-color) 74%, transparent),
      inset 0 0 6px color-mix(in srgb, var(--item-grade-color) 40%, transparent);
  }
}

@keyframes rfv98-grade-zero-aura {
  0%, 100% {
    opacity: .78;
    box-shadow:
      0 0 4px rgba(160,171,187,.36),
      inset 0 0 4px rgba(160,171,187,.16);
  }
  50% {
    opacity: .98;
    box-shadow:
      0 0 6px rgba(177,189,205,.48),
      inset 0 0 5px rgba(177,189,205,.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-slot.graded::before,
  .equipment-slot.graded::after,
  .equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::before,
  .equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::after {
    animation: none !important;
  }
}