/* Hidden easter eggs (eggs.js). Colours are the site tokens; z-index stays under .modal-overlay (50) so the
   "you found it" notice covers everything. */

/* the footer rune: nearly invisible until pointed at */
.egg-rune {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-rune, serif); font-size: calc(0.9375rem * var(--text-scale));
  color: var(--gold); opacity: .14; transition: opacity .3s, text-shadow .3s;
  background: none; border: 0; padding: 4px 8px; cursor: pointer; z-index: 1;
  min-width: 24px; min-height: 24px;   /* WCAG 2.5.8 target size */
}
.egg-rune:hover, .egg-rune:focus-visible { opacity: 1; text-shadow: 0 0 10px rgba(var(--gold-rgb), .8); }

/* a letter of a big heading: looks like the rest of the heading; only the pointer gives it away */
/* the letter looks like the rest of the heading: the forest hero styles every span in a title as a block in the accent colour, which broke the line at the letter */
.egg-letter { cursor: pointer; display: inline !important; color: inherit !important; }

/* holding the logo */
.nav-logo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nav-logo.egg-held { text-shadow: 0 0 14px rgba(var(--gold-rgb), .9); transition: text-shadow 1.6s; }

/* a claimed egg bursts */
.egg-burst { position: fixed; z-index: 41; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), .9); animation: egg-spark .9s ease-out forwards; }
@keyframes egg-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .egg-burst { animation-duration: .01s; }
}