/* Beacon-specific overlay. Warmer-blue lighthouse-beam accent —
   ties to the actual beacon-of-light visual without breaking the
   shared cobalt/iceberg family palette. */

:root {
  --beacon-bright: #cae0ff;
  --beacon-cool:   #7aa6e8;
  --beacon-deep:   #3a5d9a;
}

body.beacon {
  background:
    radial-gradient(1400px 600px at 50% -10%, rgba(122, 166, 232, 0.07), transparent 60%),
    var(--bg-primary);
}

.brand-name-beacon {
  background: linear-gradient(135deg, var(--beacon-bright), var(--beacon-cool));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-beacon {
  background: linear-gradient(135deg, var(--beacon-bright), var(--beacon-cool), var(--beacon-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

.badge-beacon {
  background: rgba(122, 166, 232, 0.08);
  border-color: rgba(122, 166, 232, 0.25);
  color: var(--beacon-cool);
}

.badge-beacon .badge-dot {
  background: var(--beacon-cool);
}