/* ==========================================================================
   TECHNOGRAIL — EASTER EGGS
   Styling for the hidden interactions in js/easter-eggs.js. Kept in its
   own file since none of this is part of the core design system — it's
   fine to delete this file and its <link> if the eggs are ever removed.
   ========================================================================== */

/* ---- Toast (Konami code, speedrunner, triple-click logo, etc.) ---- */
.tg-toast {
  position: fixed;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--tg-surface-1);
  border: 1px solid var(--tg-line);
  color: var(--tg-text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  z-index: 9600;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.35s var(--ease-quest), transform 0.35s var(--ease-quest);
  max-width: 90vw;
  text-align: center;
}
.tg-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Builder Wall shift+click joke flip ---- */
.builder-card__row--joke span {
  font-style: italic;
  color: var(--tg-copper-glow-soft);
}

/* ---- Founder Compass full-drag hidden stage ---- */
.compass__dial.is-legacy {
  filter: drop-shadow(0 0 18px rgba(184, 115, 59, 0.55));
  transition: filter 0.4s var(--ease-quest);
}
.compass__dial { cursor: grab; }
.compass__dial:active { cursor: grabbing; }

/* ---- Footer year count-up keeps its width from jumping around ---- */
#footer-year {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .tg-toast { transition: opacity 0.01s, transform 0.01s; }
}