/**
 * KBM Core 1.9.90
 * PEP-FEATURED-CARD-DYNAMIC-RAINBOW-FRAME-002
 * Edge-only motion frame for active Featured public marketplace cards.
 * IMPORTANT: edge-strip rendering only and no center fill; card media/content stay fully visible.
 */

/* 1.9.88 used a media-only ring. Keep it neutralized so the card receives one
 * visual entitlement only: the full-card edge frame below. */
body.kbm-featured-motion-2134 .kbm-card2.is-featured:not(.is-expired) .kbm-card2__media {
  border: 0 !important;
  animation: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg,#eef3f7,#fafbfd) !important;
}

body.kbm-featured-motion-2134 .kbm-featured-motion-host {
  position: relative !important;
  isolation: isolate;
  border-color: rgba(244,180,0,.42) !important;
  box-shadow:
    0 12px 34px rgba(7,29,51,.10),
    0 0 0 1px rgba(255,255,255,.76) !important;
}

/* Overlay container is always fully transparent. Only its four edge strips paint. */
body.kbm-featured-motion-2134 .kbm-featured-motion-frame {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: block;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 1;
  contain: paint;
}

body.kbm-featured-motion-2134 .kbm-featured-motion-frame::before,
body.kbm-featured-motion-2134 .kbm-featured-motion-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  background-color: transparent !important;
  animation-play-state: paused;
  will-change: background-position;
}

/* Clockwise track. Four independent thin gradient strips. The center receives
 * no paint at all, which avoids browser-specific composite rendering regressions. */
body.kbm-featured-motion-2134 .kbm-featured-motion-frame::before {
  --kbm-fm2134-edge: 3px;
  background:
    linear-gradient(90deg,#ff2d55 0%,#ff9500 14%,#ffd60a 28%,#34c759 42%,#00c7be 56%,#0a84ff 70%,#5e5ce6 82%,#bf5af2 92%,#ff2d55 100%)
      top left / 200% var(--kbm-fm2134-edge) no-repeat,
    linear-gradient(180deg,#ff2d55 0%,#ff9500 14%,#ffd60a 28%,#34c759 42%,#00c7be 56%,#0a84ff 70%,#5e5ce6 82%,#bf5af2 92%,#ff2d55 100%)
      top right / var(--kbm-fm2134-edge) 200% no-repeat,
    linear-gradient(270deg,#ff2d55 0%,#ff9500 14%,#ffd60a 28%,#34c759 42%,#00c7be 56%,#0a84ff 70%,#5e5ce6 82%,#bf5af2 92%,#ff2d55 100%)
      bottom right / 200% var(--kbm-fm2134-edge) no-repeat,
    linear-gradient(0deg,#ff2d55 0%,#ff9500 14%,#ffd60a 28%,#34c759 42%,#00c7be 56%,#0a84ff 70%,#5e5ce6 82%,#bf5af2 92%,#ff2d55 100%)
      bottom left / var(--kbm-fm2134-edge) 200% no-repeat;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.78))
    drop-shadow(0 0 5px rgba(191,90,242,.36))
    drop-shadow(0 0 7px rgba(10,132,255,.18));
  animation: kbm-fm2134-edge-flow-cw 3.8s linear infinite;
}

/* Counter-clockwise highlight track. Also edge-only and intentionally thinner. */
body.kbm-featured-motion-2134 .kbm-featured-motion-frame::after {
  inset: 1px;
  --kbm-fm2134-edge-2: 1.5px;
  opacity: .78;
  background:
    linear-gradient(90deg,transparent 0%,transparent 18%,#fff 24%,#dffcff 29%,transparent 36%,transparent 100%)
      top left / 220% var(--kbm-fm2134-edge-2) no-repeat,
    linear-gradient(180deg,transparent 0%,transparent 18%,#fff 24%,#fff6cf 29%,transparent 36%,transparent 100%)
      top right / var(--kbm-fm2134-edge-2) 220% no-repeat,
    linear-gradient(270deg,transparent 0%,transparent 18%,#fff 24%,#dffcff 29%,transparent 36%,transparent 100%)
      bottom right / 220% var(--kbm-fm2134-edge-2) no-repeat,
    linear-gradient(0deg,transparent 0%,transparent 18%,#fff 24%,#fff6cf 29%,transparent 36%,transparent 100%)
      bottom left / var(--kbm-fm2134-edge-2) 220% no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.64));
  animation: kbm-fm2134-edge-flow-ccw 5.6s linear infinite;
}

body.kbm-featured-motion-2134 .kbm-featured-motion-host[data-kbm-featured-motion-active="1"] > .kbm-featured-motion-frame::before,
body.kbm-featured-motion-2134 .kbm-featured-motion-host[data-kbm-featured-motion-active="1"] > .kbm-featured-motion-frame::after {
  animation-play-state: running;
}

@keyframes kbm-fm2134-edge-flow-cw {
  0% {
    background-position: 0% 0, 100% 0%, 100% 100%, 0 100%;
  }
  50% {
    background-position: 100% 0, 100% 100%, 0% 100%, 0 0%;
  }
  100% {
    background-position: 0% 0, 100% 0%, 100% 100%, 0 100%;
  }
}

@keyframes kbm-fm2134-edge-flow-ccw {
  0% {
    background-position: 100% 0, 100% 100%, 0% 100%, 0 0%;
  }
  50% {
    background-position: 0% 0, 100% 0%, 100% 100%, 0 100%;
  }
  100% {
    background-position: 100% 0, 100% 100%, 0% 100%, 0 0%;
  }
}

@media (max-width: 820px) {
  body.kbm-featured-motion-2134 .kbm-featured-motion-frame::before { --kbm-fm2134-edge: 2.5px; }
  body.kbm-featured-motion-2134 .kbm-featured-motion-frame::after { --kbm-fm2134-edge-2: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  body.kbm-featured-motion-2134 .kbm-featured-motion-frame::before,
  body.kbm-featured-motion-2134 .kbm-featured-motion-frame::after {
    animation: none !important;
    animation-play-state: paused !important;
  }
}