/* ─────────────────────────────────────────────────────────────
   KittyMining — "COMING SOON" holding page.
   Self-contained: design tokens + the blurred voxel-cave backdrop and
   gold gradient title lifted from the main app (styles/tokens.css,
   world/world.css, ui/ui.css) so this can live in its own repo.
   ───────────────────────────────────────────────────────────── */

/* ── design tokens (from styles/tokens.css) ── */
:root {
  --panel: rgba(38, 38, 38, 0.92);
  --panel-solid: #262626;
  --border-lite: #8a8a8a;
  --ink: #171717;
  --off-white: #f2efe9;
  --grey: #bdbdbd;
  --gold-1: #ffc61a;
  --gold-2: #ff9d00;

  --radius-panel: 26px;
  --outline-w: 2px;

  --ease: cubic-bezier(0.22, 0.8, 0.36, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: "Fira Sans", sans-serif;
  --font-body: "Prompt", sans-serif;
}

/* ── reset (from styles/base.css) ── */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font: 15px/1.5 var(--font-body);
  color: var(--grey);
  background: #071b27;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── the live-mine backdrop, held static and blurred like "ui mode"
   (from world/world.css .cw-root / .cw-parallax-layer). Five parallax
   layers stack farthest → nearest, blurred and dimmed. ── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #071b27;
  filter: blur(5px);
}
.backdrop .layer {
  position: absolute;
  inset-block: 0;
  left: -6%;
  width: 112%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.backdrop .layer.l5 { background-image: url("assets/bg/5.png"); }
.backdrop .layer.l4 { background-image: url("assets/bg/4.png"); }
.backdrop .layer.l3 { background-image: url("assets/bg/3.png"); }
.backdrop .layer.l2 { background-image: url("assets/bg/2.png"); }
.backdrop .layer.l1 { background-image: url("assets/bg/1.png"); }
/* dark wash over the world (from .cw-root::after) */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 10, 0.32);
}

/* ── centre panel (from ui/ui.css .ui-panel + .ui-specks) ── */
.panel {
  position: relative;
  padding: 46px 64px 50px;
  text-align: center;
  background: var(--panel);
  border: var(--outline-w) solid var(--border-lite);
  border-radius: var(--radius-panel);
  box-shadow:
    0 0 0 4px rgba(20, 20, 20, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  animation: dropIn 0.5s var(--pop) both;
}
.specks i {
  position: absolute;
  background: #1c1c1c;
  border-radius: 50%;
  opacity: 0.85;
}
.specks i:nth-child(1) { top: -13px; left: 34px; width: 9px; height: 8px; transform: rotate(24deg); border-radius: 46% 60% 54% 50%; }
.specks i:nth-child(2) { top: -9px; left: 58px; width: 5px; height: 5px; }
.specks i:nth-child(3) { top: 20px; left: -13px; width: 8px; height: 7px; border-radius: 60% 45% 55% 52%; }
.specks i:nth-child(4) { bottom: -11px; right: 44px; width: 8px; height: 8px; border-radius: 52% 60% 44% 56%; }
.specks i:nth-child(5) { bottom: 26px; right: -12px; width: 6px; height: 6px; }
.specks i:nth-child(6) { bottom: -8px; right: 72px; width: 4px; height: 4px; }

/* wordmark row: cat + name */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.brand img { width: 40px; height: 40px; }
.brand span {
  color: var(--off-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-shadow:
    -1.5px -1.5px 0 #1a1a1a, 1.5px -1.5px 0 #1a1a1a,
    -1.5px 1.5px 0 #1a1a1a, 1.5px 1.5px 0 #1a1a1a,
    0 3px 0 rgba(0, 0, 0, 0.35);
}

/* ── gold gradient title (from ui/ui.css .ui-title) ── */
.title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: clamp(34px, 8vw, 56px);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.38));
  white-space: nowrap;
}
.title .stroke {
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 8px #2a2313;
  color: #2a2313;
}
.title .fill {
  position: relative;
  background: linear-gradient(180deg, var(--gold-2) 8%, var(--gold-1) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 18px 0 0;
  color: var(--grey);
  font-size: 15px;
}

@keyframes dropIn { from { transform: translateY(-14px); opacity: 0; } }

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