/* components.css — discrete UI elements: brand, hero typography, soon pill */

/* ── Brand mark (top-left) ── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.brand-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--glow-magenta-sm));
}

.brand-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  text-shadow: var(--glow-cyan-sm);
}

/* ── Hero H1 ── */
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-shadow:
    -2px 0 var(--neon-green-hi),
    2px 0 var(--neon-green),
    var(--glow-magenta-sm),
    var(--glow-magenta-md);
  animation: h1-pulse 4s var(--easing) infinite;
  user-select: none;
}

/* ── Hero subhead ── */
.hero-subhead {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: var(--glow-cyan-sm);
  opacity: 0.9;
}

/* ── "Stay Tuned" pill (decorative) ── */
.soon-pill {
  margin: 32px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--neon-green);
  background: rgba(13, 19, 12, 0.55);
  border: 1px solid var(--neon-green-lo);
  border-radius: 999px;
  box-shadow:
    var(--glow-magenta-sm),
    inset 0 0 14px rgba(74, 90, 4, 0.25);
  user-select: none;
}

.soon-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green), 0 0 2px var(--neon-green);
  animation: soon-blink 1.6s var(--easing) infinite;
}

.soon-text {
  display: inline-block;
}

/* ── Footer divider ── */
.footer-divider {
  width: min(560px, 80%);
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--neon-purple) 50%,
    transparent 100%
  );
  box-shadow: var(--glow-purple-sm);
  margin: 0;
}

/* ── (no social links) ── */