/* ==========================================================================
   Easter egg — a little mascot that only lives in the dead space beside
   the content on genuinely wide ultrawide/super-ultrawide displays.
   Gated by an absolute min-width AND a wide min-aspect-ratio together, so a
   merely-maximized window on a normal 16:9/16:10 monitor can never trigger
   it — only an actual 21:9/32:9 panel (or wider) in a maximized/fullscreen
   browser window can.
   ========================================================================== */

.easter-egg {
  display: none;
  position: fixed;
  top: 50%;
  right: -20px;
  width: 56px;
  height: 76px;
  z-index: 60;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  transition: right var(--dur-base) var(--ease-out);
}

@media (min-width: 2560px) and (min-aspect-ratio: 2.3/1) {
  .easter-egg { display: block; }
}

.easter-egg:hover { right: -8px; }
.easter-egg.is-revealed { right: 8px; }

.easter-egg svg { width: 100%; height: 100%; display: block; }

@keyframes egg-bob {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-7px); }
}

.easter-egg svg { animation: egg-bob 3.4s var(--ease-in-out) infinite; }
.easter-egg:hover svg, .easter-egg.is-revealed svg { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .easter-egg svg { animation: none; }
}

.easter-egg__wave {
  transform-origin: 16px 40px;
}
.easter-egg:hover .easter-egg__wave,
.easter-egg.is-revealed .easter-egg__wave {
  animation: egg-wave 0.6s var(--ease-in-out);
}
@keyframes egg-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-18deg); }
  75% { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .easter-egg:hover .easter-egg__wave,
  .easter-egg.is-revealed .easter-egg__wave { animation: none; }
}

.easter-egg__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.easter-egg__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 16px;
  border: 6px solid transparent;
  border-top-color: var(--border-default);
}

.easter-egg__bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}