/* Placeholder for the MitoX domains. Colors are the brand night tokens
   (ops/landing/site/styles.css); the ring breathes in and out over 8 s. */

@font-face {
  font-family: Sora;
  src: url("/fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #050605;
  --night-ink: #f6f2ea;
  --night-muted: #a39b8f;
  --coral: #f47152;
  --breath: 8s;
  --ease-breath: cubic-bezier(.45, 0, .55, 1);
  --font: Sora, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
}

* { margin: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 42%, rgba(244, 113, 82, .1), transparent 55%) var(--night);
  color: var(--night-ink);
  font-family: var(--font);
  text-align: center;
}

main { display: grid; justify-items: center; gap: 1.25rem; }

.mark { width: min(11rem, 50vw); overflow: visible; }

.ring {
  fill: none;
  stroke: var(--night-ink);
  stroke-width: 3;
  opacity: .5;
  transform-origin: center;
  transform-box: fill-box;
  animation: breathe var(--breath) var(--ease-breath) infinite;
}

.wave {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: draw var(--breath) var(--ease-breath) infinite;
}

.word {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--night-muted);
}

h1 {
  font-size: clamp(2rem, 7vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -.035em;
}

.soon { font-size: .95rem; color: var(--night-muted); }

.soon span { display: block; margin-top: .4rem; letter-spacing: .3em; }

@keyframes breathe {
  0%, 100% { transform: scale(.92); opacity: .35; }
  50% { transform: scale(1.04); opacity: .8; }
}

@keyframes draw {
  0%, 100% { stroke-dashoffset: 1; }
  50% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .wave { animation: none; }
}