/* Shared launch-skin tokens for hmcl.info */
:root {
  --skin-bg-base: #07080f;
  --skin-bg-top: #0a1628;
  --skin-bg-bottom: #05060a;
  --skin-head: #f8fafc;
  --skin-copy: #e2e8f0;
  --skin-muted: #94a3b8;
  --skin-faint: #64748b;
  --skin-line: rgba(255, 255, 255, 0.1);
  --skin-glow: rgba(52, 211, 153, 0.35);
  --skin-cyan: rgba(34, 211, 238, 0.25);
  --skin-violet: rgba(167, 139, 250, 0.12);
}

body {
  font-family: Inter, system-ui, sans-serif;
}

/* Optional wrapper for main content — hook for typography and future tokens */
.article-flow {
  color: var(--skin-copy);
}

.type-display {
  font-family: Sora, Inter, system-ui, sans-serif;
}
.type-tech {
  font-family: Orbitron, Inter, system-ui, sans-serif;
}

.lattice-wash {
  background-image: linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

@keyframes rise-soft {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-18px) translateX(6px);
    opacity: 0.85;
  }
}
@keyframes rise-long {
  0% {
    transform: translateY(100vh) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-20vh) scale(0.6);
    opacity: 0;
  }
}
.drift-speck {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: linear-gradient(135deg, #34d399, #22d3ee);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
  animation: rise-long linear infinite;
  pointer-events: none;
}

.frost-pane {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lift-tile {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.lift-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 24px 48px -12px rgba(0, 0, 0, 0.65),
    0 0 60px -20px rgba(34, 211, 238, 0.15);
  border-color: rgba(52, 211, 153, 0.45);
}

.core-action {
  background: linear-gradient(135deg, #059669 0%, #0d9488 45%, #0891b2 100%);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3), 0 12px 40px -8px rgba(16, 185, 129, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.core-action:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.55), 0 20px 50px -8px rgba(34, 211, 238, 0.35);
}

.ghost-action {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ghost-action:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.12);
}

.pixel-mark {
  image-rendering: pixelated;
}

/* Form controls — match index search / glass inputs */
.field-shell,
input.field-shell,
textarea.field-shell,
select.field-shell {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-shell::placeholder,
input.field-shell::placeholder,
textarea.field-shell::placeholder {
  color: rgba(248, 250, 252, 0.4);
}
.field-shell:focus,
input.field-shell:focus,
textarea.field-shell:focus,
select.field-shell:focus {
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}