/**
 * JDE Tags — Holographic signature mark
 * Self-hosted for dcta.pro (source: jde-tags)
 */

/* ── Fixed corner placement helpers ── */
/* Must beat tag variants that set position for pseudo-elements */
a.jde-tag.jde-fixed-br,
.jde-fixed-br {
  position: fixed !important;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  top: auto;
  z-index: 980;
}
a.jde-tag.jde-fixed-bl,
.jde-fixed-bl {
  position: fixed !important;
  bottom: 1rem;
  left: 1rem;
  right: auto;
  top: auto;
  z-index: 980;
}
a.jde-tag.jde-fixed-tr,
.jde-fixed-tr {
  position: fixed !important;
  top: 1rem;
  right: 1rem;
  left: auto;
  bottom: auto;
  z-index: 980;
}

/* ── Base tag ── */
.jde-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.jde-tag span {
  position: relative;
  z-index: 1;
}

/* ── Holographic ── */
.jde-tag.jde-holographic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #101318;
  background:
    conic-gradient(
      from 220deg at 50% 50%,
      #8be9fd,
      #ff79c6,
      #f1fa8c,
      #50fa7b,
      #bd93f9,
      #8be9fd
    );
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  /* Keep isolation for shine pseudo; corner helpers set fixed placement */
  isolation: isolate;
  overflow: hidden;
}

.jde-tag.jde-holographic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 45%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: jde-holo-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.jde-tag.jde-holographic:hover {
  transform: rotate(-6deg) scale(1.08);
  filter: hue-rotate(60deg) saturate(1.3);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(139, 233, 253, 0.35);
}

@keyframes jde-holo-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jde-tag.jde-holographic::before {
    animation: none;
  }
  .jde-tag {
    transition: none;
  }
}