/*
 * The hidden pixel.
 *
 * Moved out of style.css rather than appended to it: that sheet is already well past the size a
 * stylesheet should be, and this is a self-contained thing with its own behaviour in otters.js.
 *
 * Loaded after style.css, so the `.is-ping` rules here win over the base `opacity: 0` without
 * needing !important.
 */

.secret-pixel {
  position: absolute;
  z-index: 5;
  opacity: 0;
  background: transparent;
  pointer-events: auto;
}

/* --- the reveal -----------------------------------------------------------
 *
 * Held, not latched — otters.js adds this class on keydown and drops it on keyup. A dot so there
 * is something to aim at, and a ring expanding out of it so the eye catches it even in peripheral
 * vision, which is the whole point when the thing is 10px wide somewhere on a long page.
 */

.secret-pixel.is-ping {
  opacity: 1;
  border-radius: 50%;
  background: var(--primary, #9d4edd);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary, #9d4edd) 70%, transparent);
}

.secret-pixel.is-ping::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Sized by the animation; the start value lives there so the two cannot drift apart. */
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--primary, #9d4edd);
  border-radius: 50%;
  animation: secret-ping 1.2s cubic-bezier(.2, .6, .35, 1) infinite;
}

@keyframes secret-ping {
  from {
    width: 10px;
    height: 10px;
    opacity: .85;
  }

  to {
    width: 140px;
    height: 140px;
    opacity: 0;
  }
}

/* Nothing to find for someone who has asked for less movement — the pile it switches is already
   switched off for them, so the pixel would do nothing but puzzle. The reveal key is inert too,
   because there is no pixel in the document to ping. */
@media (prefers-reduced-motion: reduce) {
  .secret-pixel {
    display: none;
  }
}