/* 301Live wordmark variants. Fonts are self-hosted (SIL OFL 1.1), never loaded from a CDN.
   Variant A (Oxanium) is the app default; index.html links this file too. Unused @font-face rules cost nothing
   (browsers only download a font when text actually uses it), so B and C fonts are fetched only by wordmarks.html. */
@font-face { font-family: "Oxanium"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/oxanium/oxanium-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/oxanium/oxanium-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/oxanium/oxanium-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/chakra-petch/chakra-petch-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/big-shoulders-display/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }

.wm { --c: #7fd4ff; --w: #eef0f3; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; position: relative; }
.wm .dot { width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0.35em var(--c); position: relative; flex: none; }
.wm .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.07em solid var(--c); animation: wm-ping 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes wm-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* A: SIGNAL (Oxanium 800). Squared, engineered, HUD-like, reads like an ops console. */
.wm-a { font-family: "Oxanium", "Segoe UI", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; gap: 0.16em; }
.wm-a .n { color: var(--w); text-shadow: 0 0 0.5em rgba(127, 212, 255, 0.28); }
/* "LIVE": cyan with a slow light sweep. The gradient is 3x wide; at 100% / 0% only its plain-cyan ends are visible. */
.wm-a .l { color: var(--c); font-weight: 700; letter-spacing: 0.1em; margin-right: -0.1em; padding-right: 0.1em;
  background: linear-gradient(100deg, var(--c) 0 44%, #f2fbff 50%, var(--c) 56% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.22em rgba(127, 212, 255, 0.45));
  animation: wm-sweep 8s ease-in-out infinite; }
.wm-a .dot { margin: 0 0.02em 0 0.04em; transform: translateY(-0.02em); }
@keyframes wm-sweep { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

/* B: VELOCITY (Chakra Petch 700 italic). Slanted, fast, with speed bars. */
.wm-b { font-family: "Chakra Petch", "Segoe UI", sans-serif; font-weight: 700; font-style: italic; gap: 0.12em; letter-spacing: 0.01em; }
.wm-b .bars { display: inline-flex; flex-direction: column; gap: 0.09em; margin-right: 0.06em; }
.wm-b .bars i { display: block; height: 0.09em; background: var(--c); transform: skewX(-18deg); border-radius: 1px; box-shadow: 0 0 0.3em rgba(127, 212, 255, .6); }
.wm-b .bars i:nth-child(1) { width: 0.5em; margin-left: 0.15em; opacity: .55; } .wm-b .bars i:nth-child(2) { width: 0.65em; } .wm-b .bars i:nth-child(3) { width: 0.42em; margin-left: 0.23em; opacity: .55; }
.wm-b .n { color: var(--w); }
.wm-b .l { color: var(--c); text-transform: lowercase; text-shadow: 0 0 0.4em rgba(127, 212, 255, .5); }
.wm-b .dot { align-self: flex-start; margin-top: 0.08em; width: 0.24em; height: 0.24em; }

/* C: MARQUEE (Big Shoulders Display 900). Tall, condensed, road-sign energy; outlined LIVE with scanlines. */
.wm-c { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; gap: 0.1em; font-size: 1.25em; }
.wm-c .n { color: var(--w); }
.wm-c .l { color: transparent; -webkit-text-stroke: 0.035em var(--c); letter-spacing: 0.06em;
  background: repeating-linear-gradient(180deg, rgba(127, 212, 255, .55) 0 1px, transparent 1px 3px); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 0.18em rgba(127, 212, 255, .55)); }
.wm-c .dot { width: 0.22em; height: 0.22em; margin: 0 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .wm .dot::after, .wm-a .l { animation: none; }
  .wm .dot::after { opacity: 0; }
  .wm-a .l { background-position: 100% 0; }
}