/* tokens
   flat charcoal: #0d0d0d (sampled off the badge's own background)
   green: #d8e618   red: #fe5637   (sampled off the badge's own two bars, not the brand swatch,
   so the CSS bars that run off the badge to the page edges are the same color as the bars inside it)
   chrome: #c9cdc7 light / #4a4f49 dark (sampled off the eagle's own struck metal)
   type: Overpass Mono only, a single engraved-plate face
   corner radius: none, a struck badge has no rounding
   spacing scale: 18px / 32px / 5vw
   motion: the two bars breathe like a warming neon tube, offset out of phase, nothing else moves
*/

@font-face {
  font-family: "Overpass Mono";
  src: url("assets/fonts/overpass-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("assets/fonts/overpass-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0d0d0d;
  overflow: hidden;
}

body {
  font-family: "Overpass Mono", ui-monospace, monospace;
}

.bars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bar {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: neonbreathe 4.6s ease-in-out infinite;
}

.bar.placed {
  opacity: 1;
}

.bar-green {
  background:
    linear-gradient(to bottom, rgba(255,255,255,.35), transparent 25%, transparent 75%, rgba(0,0,0,.3)),
    #d8e618;
  box-shadow: 0 0 40px 2px rgba(216,230,24,.5);
}

.bar-red {
  background:
    linear-gradient(to bottom, rgba(255,255,255,.3), transparent 25%, transparent 75%, rgba(0,0,0,.3)),
    #fe5637;
  box-shadow: 0 0 40px 2px rgba(254,86,55,.45);
  animation-delay: .8s;
}

@keyframes neonbreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(.9); }
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vh, 32px);
  padding: 4vh 5vw;
}

.badge-wrap {
  width: min(58vmin, 620px);
  aspect-ratio: 945 / 972;
}

.badge-wrap img {
  display: block;
  width: 100%;
  height: 100%;
}

.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.plate-name {
  margin: 0;
  font: 600 clamp(12px, 1.7vmin, 16px)/1 "Overpass Mono", monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9cdc7;
}

.plate-name .ticker {
  color: #d8e618;
  margin-left: 0.7em;
}

.ca {
  font: 400 clamp(14px, 2.3vmin, 21px)/1.3 "Overpass Mono", monospace;
  letter-spacing: 0.22em;
  color: #c9cdc7;
  background: transparent;
  border: 1px solid rgba(201, 205, 199, 0.32);
  padding: 0.9em 1.4em;
  max-width: min(92vw, 640px);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ca:hover,
.ca:focus-visible {
  color: #f2f4f0;
  border-color: rgba(201, 205, 199, 0.6);
}

.ca.copied {
  color: #d8e618;
  border-color: #d8e618;
}

.ca:focus-visible {
  outline: 1px dashed rgba(216, 230, 24, 0.6);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bar { animation: none; }
}

@media (max-width: 480px) {
  .ca { letter-spacing: 0.14em; }
}