/* wDingocoin v2 holding page.
   Palette and type stack are lifted from testnet/landing/styles.css so the two
   public surfaces read as one project. Self-contained: no webfonts, no CDN. */

:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #f5a623;
  --line: #21262d;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Layered ambient wash: a warm amber bloom behind the mark over the same cool
     slate hero gradient the testnet landing uses. Without this the page is a
     flat void and reads as unfinished rather than deliberate. */
  background-image:
    radial-gradient(660px 440px at 50% 30%, rgba(245, 166, 35, 0.11), transparent 68%),
    radial-gradient(1000px 560px at 50% 34%, #1f2733, var(--bg));
  background-repeat: no-repeat;
}

/* Faint dot lattice, masked to fade out toward the edges. Pure CSS — gives the
   empty field texture so it looks composed instead of unpainted. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(230, 237, 243, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 22%, transparent 82%);
          mask-image: radial-gradient(circle at 50% 40%, #000 22%, transparent 82%);
}

/* ---- centre stage ---- */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 22px 28px;
}

.mark {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  /* Amber halo, layered so it falls off smoothly rather than ringing. */
  box-shadow:
    0 0 0 1px rgba(245, 166, 35, 0.26),
    0 0 44px rgba(245, 166, 35, 0.24),
    0 0 130px rgba(245, 166, 35, 0.12);
  animation: breathe 6s ease-in-out infinite;
}

.pill {
  display: inline-block;
  margin: 36px 0 22px;
  padding: 5px 15px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.07);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 68px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg);
}

/* Soft top-lit wordmark. Guarded so a browser without background-clip:text
   keeps the solid --fg above rather than rendering nothing. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background-image: linear-gradient(175deg, #ffffff 12%, #aab6c4 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.lede {
  margin: 18px 0 0;
  font-size: 23px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Thin progress-ish hairline — the only motion besides the halo. It reads as
   "work in progress" without claiming a percentage or a date. */
.shimmer {
  position: relative;
  width: min(300px, 64vw);
  height: 2px;
  margin-top: 48px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  animation: sweep 2.8s ease-in-out infinite;
}

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

@keyframes sweep {
  0%        { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---- footer ---- */

footer {
  position: relative;
  z-index: 1;
  padding: 0 22px 36px;
  text-align: center;
  font-size: 13px;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

footer a:hover,
footer a:focus-visible {
  color: var(--fg);
  border-bottom-color: var(--line);
}

/* ---- responsive ---- */

@media (max-width: 620px) {
  .mark { width: 104px; height: 104px; }
  h1 { font-size: 42px; }
  .lede { font-size: 19px; }
  .pill { margin: 28px 0 18px; }
}

/* Wide screens: scale the cluster up so it holds the viewport instead of
   floating as a small island in a large dark field. */
@media (min-width: 1200px) {
  .mark { width: 172px; height: 172px; }
  h1 { font-size: 82px; }
  .lede { font-size: 25px; }
  .shimmer { width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none; }
  .shimmer::after { animation: none; transform: none; opacity: 0.5; }
}