/* Murmur Earth — Coming Soon
 * Claude Design 案（Murmur Earth Coming Soon.dc.html）を素の静的サイトに移植。
 * 装飾の大半はindex.html側のインラインstyleで再現。ここには
 *   - 全体の土台 / keyframes / :hover / モバイル調整 / prefers-reduced-motion
 * のみを置く。アクセント色は index.html の .me-root の --accent 変数で一元管理。
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #04060B;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(91, 225, 222, 0.25); color: #EAF6F7; }

/* ---------- keyframes ---------- */
@keyframes me-fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes me-spin   { to { transform: rotate(360deg); } }
@keyframes me-scan   { 0% { transform: translateY(-120%); opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { transform: translateY(120%); opacity: 0; } }
@keyframes me-ping   { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes me-flicker{ 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- animation bindings ---------- */
.me-fadeup    { animation: me-fadeUp 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.me-globe-spin{ animation: me-spin 64s linear infinite; animation-play-state: var(--anim, running); }
.me-scan      { animation: me-scan 7s ease-in-out infinite; animation-play-state: var(--anim, running); }
.me-ping      { animation: me-ping 3.4s ease-out infinite; animation-play-state: var(--anim, running); }
.me-flicker   { animation: me-flicker 2.6s ease-in-out infinite; animation-play-state: var(--anim, running); }

/* ---------- CTA hover（dc.html の style-hover を実CSS化） ---------- */
.x-link:hover {
  background: rgba(91, 225, 222, 0.14) !important;
  box-shadow: 0 0 28px rgba(91, 225, 222, 0.25);
}
.x-link:focus-visible {
  outline: 2px solid var(--accent, #5BE1DE);
  outline-offset: 3px;
}

/* ---------- モバイル調整（HANDOFF §5） ---------- */
/* 四隅の座標リードアウトは小画面で重なるため非表示。コーナーブラケットは残す。 */
@media (max-width: 640px) {
  .hud-readout { display: none; }
}

/* ---------- アクセシビリティ：モーション抑制 ---------- */
@media (prefers-reduced-motion: reduce) {
  .me-root { --anim: paused; }
  .me-fadeup,
  .me-globe-spin,
  .me-scan,
  .me-ping,
  .me-flicker {
    animation: none !important;
  }
}