/* Full-screen field guide: the same ball system appears as a quiet constellation. */
.menu-cards {
  background:
    radial-gradient(circle at 18% 18%, #ffffff94 0 1px, transparent 1.5px) 0 0/22px 22px,
    linear-gradient(138deg, #f7f7ef 0%, #dbe4e6 52%, #00afc4 170%);
}
.menu-cards::before,
.menu-cards::after {
  content: '';
  position: absolute;
  border: 1px solid #10251f2a;
  border-radius: 50%;
  pointer-events: none;
}
.menu-cards::before { width: 150%; aspect-ratio: 1; left: -50%; top: -21%; }
.menu-cards::after { width: 105%; aspect-ratio: 1; right: -43%; bottom: -28%; }
.menu-ball { z-index: 3; width: 69%; left: 16%; top: 10%; animation-duration: 6.8s; }
.menu-orbit { position: absolute; z-index: 2; background: center/contain no-repeat; filter: drop-shadow(0 13px 12px #062d2433); }
.orbit-a { width: 26%; aspect-ratio: 1; left: -6%; top: 47%; background-image: url('soccer-world-cup-inspired.png'); animation: menuDriftA 8s ease-in-out infinite; }
.orbit-b { width: 26%; aspect-ratio: 1; right: -4%; top: 44%; background-image: url('volleyball-american.png'); animation: menuDriftB 7s ease-in-out infinite; }
.orbit-c { width: 18%; aspect-ratio: 1; right: 10%; top: 6%; background-image: url('tennis-realistic.png'); animation: menuDriftC 5s ease-in-out infinite; }
.menu-card-copy { z-index: 4; }
.menu.open .menu-grid { animation: menuReveal .7s .08s both cubic-bezier(.2,.8,.2,1); }
.menu.open nav a { animation: menuLine .55s both cubic-bezier(.2,.8,.2,1); }
.menu.open nav a:nth-child(1) { animation-delay: .11s; }
.menu.open nav a:nth-child(2) { animation-delay: .17s; }
.menu.open nav a:nth-child(3) { animation-delay: .23s; }
.menu.open nav a:nth-child(4) { animation-delay: .29s; }
@keyframes menuReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes menuLine { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes menuDriftA { 50% { transform: translate(14px, -14px) rotate(-11deg); } }
@keyframes menuDriftB { 50% { transform: translate(-11px, 13px) rotate(9deg); } }
@keyframes menuDriftC { 50% { transform: translate(-9px, 10px) scale(.96); } }
@media (max-width: 720px) {
  .menu-grid { grid-template-columns: 1fr; padding-top: 15vh; }
  .menu-cards { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu.open .menu-grid, .menu.open nav a, .menu-orbit { animation: none; }
}
/* Keep the persistent header legible and deliberate while the Field Guide is open. */
body.menu-open .site-nav { --nav-ink:#edf4eb; }
body.menu-open .site-nav .brand span, body.menu-open .site-nav .nav-cta b { color:#00ffec; }
body.menu-open .site-nav .nav-button i { background:#edf4eb; }
body.menu-open .site-nav .nav-button span, body.menu-open .site-nav .nav-cta { color:#edf4eb; }