/* ============================================================
   Mice On The Moon — public site
   Ported from the Claude Design prototype (project/Mice On The Moon.dc.html).
   Base + keyframes are carried over verbatim; hover rules below replace the
   prototype's `style-hover` bindings (element base styles are inline, so hover
   declarations use !important to win over inline specificity).
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0B0A08;
  color: #EDE7D8;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: #B89A56; color: #0B0A08; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Motion keyframes ---------- */
@keyframes heroInUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes breathe    { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.015); } }
@keyframes floatCue   { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: .9; } }
@keyframes moonDrift  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
@keyframes glowPulse  { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes twinkleStar{ 0%, 100% { opacity: .22; transform: scale(.94) rotate(0deg); } 50% { opacity: .6; transform: scale(1.06) rotate(0deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ---------- Hover states (replace prototype style-hover) ---------- */
/* Base styles are inline on each element, so hover must override with !important. */
.nav-link:hover     { color: #F3EFE7 !important; }
.nav-cta:hover      { background: #B89A56 !important; }
.btn-solid:hover    { background: #B89A56 !important; transform: translateY(-2px) !important; }
.btn-outline:hover  { border-color: #F3EFE7 !important; transform: translateY(-2px) !important; }
.vcard:hover        { transform: translateY(-8px) !important; }
.footer-link:hover  { color: #F3EFE7 !important; }
.footer-email:hover { color: #B89A56 !important; }
#moonPhase:hover    { opacity: 1 !important; }