/* Night signal: the dot language from the launch brand (Oct 2026). Linked after brand.css wherever it's used.
   Rules: dots are square (2px corner), on the grid, faint by default. A lit dot is a person worth a hello, so lit
   dots are rare. The full gradient lives only on the horizon arc and a few words. Characters can stand on dot
   hatching in their own colour. The seal says the one promise: You decide. You send. */

canvas[data-signal] { display: block; width: 100%; height: 100%; pointer-events: none; }
.sig-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sig-layer > canvas { position: absolute; inset: 0; }

/* Dot hatching: a crew-colour glow made of dots, lighting a character from behind. Set --tone (r,g,b). */
.dot-hatch { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at center, rgba(var(--tone, 179,188,255), .9) 1.05px, transparent 1.6px);
  background-size: 11px 11px; background-position: 0 0;
  -webkit-mask-image: radial-gradient(60% 55% at var(--hx, 50%) var(--hy, 62%), #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
  mask-image: radial-gradient(60% 55% at var(--hx, 50%) var(--hy, 62%), #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
  opacity: .55; }
/* a second, offset layer of dots breathes in and out so the hatching shimmers */
.dot-hatch::after { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: inherit; background-position: 5.5px 5.5px; opacity: 0; animation: hatch-breathe 3.6s ease-in-out infinite alternate; }
@keyframes hatch-breathe { to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .dot-hatch::after { animation: none; opacity: .35; } }
.dot-hatch.fine { background-size: 8px 8px; background-image: radial-gradient(circle at center, rgba(var(--tone, 179,188,255), .9) .85px, transparent 1.3px); }

/* Ten-dot meter, the score as a graphic */
.dots10 { display: inline-flex; gap: 4px; align-items: center; }
.dots10 i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.12); }
.dots10 i.on { background: rgb(var(--tone, 134,227,187)); box-shadow: 0 0 6px rgba(var(--tone, 134,227,187), .5); }

/* The seal: You decide · You send, round the mark */
.seal { --s: 148px; position: relative; width: var(--s); height: var(--s); flex: none; color: var(--text); }
.seal svg { width: 100%; height: 100%; overflow: visible; }
.seal .seal-ring { fill: #08090d; stroke: rgba(255,255,255,.9); stroke-width: 3.2; }
.seal .seal-ticks { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2.2; stroke-dasharray: 0.6 4.2; }
.seal text { font: 600 10.6px/1 var(--mono); letter-spacing: 0; fill: currentColor; text-transform: uppercase; }
.seal .seal-in { fill: none; stroke: url(#sealGrad); stroke-width: 1.2; }
.seal.spin svg .seal-words { transform-origin: 60px 60px; animation: seal-spin 40s linear infinite; }
.seal.paper { color: var(--ink); } .seal.paper .seal-ring { fill: #fafaf8; stroke: var(--ink); }
.seal.paper .seal-ticks { stroke: rgba(18,18,20,.2); }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal.spin svg .seal-words { animation: none; } }

/* The footer band: Monty as the gap in a field of followers, eyes lit */
.foot-mark { position: relative; height: clamp(220px, 26vw, 360px); margin: 40px calc(var(--gutter) * -1) 0; overflow: hidden; }
.foot-mark canvas { position: absolute; inset: 0; }
.foot-mark { -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }

/* Page tops (blog, tools, audience pages): a faint field of followers behind the header */
.sig-top { position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 85% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(80% 85% at 50% 0%, #000 25%, transparent 75%); }
.sig-top canvas { position: absolute; inset: 0; }

/* Full-width dot bands: fade out at both sides and at top and bottom */
.sig-band { position: absolute; left: 0; right: 0; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-composite: intersect; }
.sig-band canvas { position: absolute; inset: 0; }