/* ============================================================
   rock different, babe 🤘 — easter eggs
   If you're reading this file, you're our kind of person.
   ============================================================ */

/* ---------- Konami overlay ---------- */
.konami-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pink);
  color: var(--black);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 5rem);
  line-height: 1.1;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.konami-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- "Never Corporate" is allergic to containment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .never-corporate:hover {
    animation: allergic 0.4s ease 1;
  }
  @keyframes allergic {
    0% { transform: translateX(0); border-color: var(--line); color: var(--grey); }
    20% { transform: translateX(-4px); border-color: #FF2222; color: #FF2222; }
    40% { transform: translateX(4px); border-color: #FF2222; color: #FF2222; }
    60% { transform: translateX(-3px); border-color: #FF2222; color: #FF2222; }
    80% { transform: translateX(2px); border-color: #FF2222; }
    100% { transform: translateX(0); border-color: var(--line); color: var(--grey); }
  }
}

/* ---------- THE PORTAL ----------
   A tiny sigil in the bottom-right corner.
   Hermaeus Mora collects the curious. */
.portal {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: block;
}
.portal svg {
  width: 100%;
  height: 100%;
  color: #0A0A0A;
  transition: color 0.5s ease;
}
.portal:hover svg,
.portal:focus svg {
  color: var(--purple);
}
.portal:focus-visible {
  outline: none; /* deliberately hidden — the portal does not announce itself */
}
@media (prefers-reduced-motion: no-preference) {
  .portal:hover .tentacle,
  .portal:focus .tentacle {
    animation: writhe 6s ease-in-out infinite;
    transform-origin: 9px 9px;
  }
  .portal .tentacle:nth-of-type(2) { animation-delay: -1.5s; animation-direction: reverse; }
  .portal .tentacle:nth-of-type(3) { animation-delay: -3s; }
  .portal .tentacle:nth-of-type(4) { animation-delay: -4.2s; animation-direction: reverse; }
  .portal .tentacle:nth-of-type(5) { animation-delay: -2.1s; }
  @keyframes writhe {
    0%, 100% { transform: rotate(0deg); }
    33% { transform: rotate(4deg); }
    66% { transform: rotate(-3deg); }
  }
}

/* ---------- Pull quote swap ---------- */
.pullquote-text.is-swapped .highlight { color: var(--orange); }