/* Kneejerk Gremlins: non-blocking cursor interaction layer. */
#developer-gremlins-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147483000;
  pointer-events: none;
  contain: strict;
}

.gremlin-target-active,
.gremlin-target-near {
  --gremlin-fill-x: 50%;
  --gremlin-fill-y: 50%;
  --gremlin-fill-strength: 0;
  --gremlin-accent-rgb: 70, 87, 217;
  --gremlin-intensity: .65;
}

.gremlin-target-near {
  transition: box-shadow 180ms ease, background 180ms ease, transform 180ms ease, filter 180ms ease;
}

.gremlin-target-active {
  background-image:
    radial-gradient(
      circle at var(--gremlin-fill-x) var(--gremlin-fill-y),
      rgba(var(--gremlin-accent-rgb), var(--gremlin-fill-strength)),
      rgba(var(--gremlin-accent-rgb), calc(var(--gremlin-fill-strength) * .34)) 36%,
      transparent 70%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(var(--gremlin-accent-rgb), calc(.12 + var(--gremlin-fill-strength))),
    0 14px 34px rgba(38, 46, 78, calc(.08 + var(--gremlin-fill-strength) * .18)) !important;
}

.gremlin-target-active[data-gremlin-hover-effect="none"] {
  background-image: none !important;
  box-shadow: none !important;
}

.gremlin-target-active[data-gremlin-hover-effect="particle-fill"] {
  background-image:
    radial-gradient(
      circle at var(--gremlin-fill-x) var(--gremlin-fill-y),
      rgba(var(--gremlin-accent-rgb), calc(var(--gremlin-fill-strength) * 1.25)),
      rgba(var(--gremlin-accent-rgb), calc(var(--gremlin-fill-strength) * .42)) 42%,
      transparent 74%
    ) !important;
}

.gremlin-target-active[data-gremlin-hover-effect="border-glow"] {
  background-image:
    linear-gradient(var(--original-bg, transparent), var(--original-bg, transparent)),
    radial-gradient(
      circle at var(--gremlin-fill-x) var(--gremlin-fill-y),
      rgba(var(--gremlin-accent-rgb), calc(var(--gremlin-fill-strength) * .34)),
      transparent 64%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(var(--gremlin-accent-rgb), calc(.18 + var(--gremlin-fill-strength))),
    0 0 calc(22px * var(--gremlin-intensity, .65)) rgba(var(--gremlin-accent-rgb), calc(var(--gremlin-fill-strength) * .9)) !important;
}

/* v0.4: professional arson, not clip-art campfire. */
a.gremlin-target-active[data-gremlin-hover-effect="flame-underline"]:not(.wp-block-button__link),
.gremlin-target-active[data-gremlin-hover-effect="flame-underline"]:not(button):not(.wp-block-button__link) {
  text-decoration: none !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(var(--gremlin-accent-rgb), 0),
      rgba(255, 198, 80, calc(.62 * var(--gremlin-intensity, .7))),
      rgba(255, 98, 48, calc(.94 * var(--gremlin-intensity, .7))),
      rgba(var(--gremlin-accent-rgb), calc(.84 * var(--gremlin-intensity, .7))),
      rgba(255, 214, 102, calc(.70 * var(--gremlin-intensity, .7))),
      rgba(var(--gremlin-accent-rgb), 0)
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 260% max(.13em, 2px) !important;
  background-position: 0 100% !important;
  box-shadow: none !important;
  text-shadow: 0 0 calc(5px * var(--gremlin-intensity, .7)) rgba(255, 116, 54, .22) !important;
  animation: gremlin-flame-underline 900ms linear infinite;
}

.gremlin-target-active[data-gremlin-hover-effect="flame-border"] {
  border-color: transparent !important;
  background-image:
    linear-gradient(var(--original-bg, rgba(255,255,255,.02)), var(--original-bg, rgba(255,255,255,.02))),
    linear-gradient(
      115deg,
      rgba(var(--gremlin-accent-rgb), calc(.78 * var(--gremlin-intensity, .75))),
      rgba(255, 198, 80, calc(.98 * var(--gremlin-intensity, .75))),
      rgba(255, 82, 42, calc(.95 * var(--gremlin-intensity, .75))),
      rgba(255, 226, 122, calc(.82 * var(--gremlin-intensity, .75))),
      rgba(var(--gremlin-accent-rgb), calc(.72 * var(--gremlin-intensity, .75)))
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 240% 240% !important;
  background-position: 0 0, 0% 50% !important;
  box-shadow:
    0 0 0 1px rgba(255, 177, 66, calc(.22 * var(--gremlin-intensity, .75))),
    0 0 calc(24px * var(--gremlin-intensity, .75)) rgba(255, 106, 43, calc(.34 * var(--gremlin-intensity, .75))),
    0 12px 32px rgba(38, 20, 12, .13) !important;
  animation: gremlin-flame-border 1250ms linear infinite;
}

.wp-block-button__link.gremlin-target-active,
a.gremlin-target-active:is(.wp-block-button__link) {
  color: #fff !important;
  background-color: rgb(var(--gremlin-accent-rgb)) !important;
}

.wp-block-button__link.gremlin-target-active[data-gremlin-hover-effect="flame-border"],
a.gremlin-target-active:is(.wp-block-button__link)[data-gremlin-hover-effect="flame-border"] {
  background-color: transparent !important;
}

a.gremlin-target-active:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not([data-gremlin-hover-effect="flame-underline"]) {
  text-decoration-color: rgba(var(--gremlin-accent-rgb), .72);
  text-decoration-thickness: .12em;
}

.wp-block-post.gremlin-target-active,
.rj-card.gremlin-target-active,
.rj-note-card.gremlin-target-active {
  transform: translateY(-2px);
}

@keyframes gremlin-flame-underline {
  0% { background-position: 0% 100%; filter: saturate(1); }
  50% { filter: saturate(1.18); }
  100% { background-position: 220% 100%; filter: saturate(1); }
}

@keyframes gremlin-flame-border {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 220% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #developer-gremlins-canvas {
    display: none !important;
  }

  .gremlin-target-active,
  .gremlin-target-near {
    transition: none !important;
    animation: none !important;
    background-image: none !important;
    transform: none !important;
  }
}