/* RF-AVALON Market V61.0.94 — animated grade energy frame.
   The grade colour stays readable at all times. A bright tracer travels around
   the perimeter while only the halo changes intensity. */

@property --rfv94-grade-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.equipment-slot.graded {
  overflow: visible;
}

/* Keep the actual grade frame lit instead of fading it in/out. */
.equipment-slot.graded::before {
  opacity: .92 !important;
  filter: none !important;
  border-color: var(--item-grade-color) !important;
  box-shadow:
    0 0 3px var(--item-grade-color),
    inset 0 0 3px var(--item-grade-color) !important;
  animation: rfv94-grade-aura 3.8s ease-in-out infinite !important;
}

/* Thin animated energy streak that follows the slot perimeter. */
.equipment-slot.graded::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
  inset: -3px;
  padding: 2px;
  border-radius: 3px;
  background: conic-gradient(
    from var(--rfv94-grade-angle),
    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
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  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));
  animation: rfv94-grade-tracer 3.15s linear infinite;
}

/* Hover/focus reacts: the light runs faster and gets a slightly stronger halo. */
.equipment-slot.graded.filled:hover::after,
.equipment-slot.graded.filled:focus-visible::after {
  animation-duration: 1.65s;
  filter:
    drop-shadow(0 0 3px var(--item-grade-color))
    drop-shadow(0 0 7px color-mix(in srgb, var(--item-grade-color) 70%, transparent));
}

.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 var(--item-grade-color) !important;
}

@keyframes rfv94-grade-tracer {
  to { --rfv94-grade-angle: 360deg; }
}

@keyframes rfv94-grade-aura {
  0%, 100% {
    box-shadow:
      0 0 3px var(--item-grade-color),
      inset 0 0 3px color-mix(in srgb, var(--item-grade-color) 22%, transparent);
  }
  50% {
    box-shadow:
      0 0 6px color-mix(in srgb, var(--item-grade-color) 72%, transparent),
      inset 0 0 5px color-mix(in srgb, var(--item-grade-color) 34%, transparent);
  }
}

/* Accessibility: keep a clear static grade frame when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .equipment-slot.graded::before,
  .equipment-slot.graded::after {
    animation: none !important;
  }
  .equipment-slot.graded::after {
    --rfv94-grade-angle: 24deg;
  }
}