/*
 * "stops sharing" as a police light bar (the landing page's hero and the developer sign-in page):
 *
 *   <span class="police"><span class="police__light police__light--red">stops</span>
 *   <span class="police__light police__light--blue">sharing</span></span>
 *
 * Each word is one lens of the bar. A flash makes the word white-hot with a coloured bloom, lights the glow behind it
 * (the light spilling out) and the bar under it.
 *
 * 1. On load, a short burst: the lenses alternate, three flashes each, with hard on/off switching. Flashes are 0.35 s
 *    apart, so no one-second window holds more than three: WCAG 2.3.1 (three flashes or below).
 * 2. Then the words settle into steady colours, with a slow, faint glow that alternates every 5 s.
 * With reduced motion the words are lit and still.
 *
 * One registered property per state drives the whole look: --police-flash (0 or 1 while bursting), --police-settle
 * (0 to 1 as the burst ends) and --police-glow (0 to 1, the slow glow). Browsers without @property show the settled
 * colours, still.
 */

@property --police-flash {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --police-settle {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --police-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* dim: the unlit lens during the burst; calm: the settled colour; hot: the white-hot core of a flash. Dim and calm
   both stay readable on the dark background (over 3:1, for large text). */
.police__light--red {
  --police-rgb: 231, 106, 95;
  --police-dim: #9c4f48;
  --police-calm: #ee8b82;
  --police-hot: #fff3f1;
}

.police__light--blue {
  --police-rgb: 59, 130, 246;
  --police-dim: #3d63b0;
  --police-calm: #7eaaf6;
  --police-hot: #eef5ff;
}

/* Inline, so the words wrap and keep the punctuation after them like any text; z-index 0 keeps the glow behind the
   word and in front of the page. */
.police__light {
  position: relative;
  z-index: 0;
  color: color-mix(in srgb, var(--police-hot) calc(var(--police-flash) * 100%),
    color-mix(in srgb, var(--police-calm) calc(var(--police-settle) * 100%), var(--police-dim)));
  text-shadow:
    0 0 1px rgba(255, 255, 255, calc(var(--police-flash) * 0.7)),
    0 0 8px rgba(var(--police-rgb), calc(var(--police-flash) * 0.95 + var(--police-glow) * 0.3)),
    0 0 22px rgba(var(--police-rgb), calc(var(--police-flash) * 0.8 + var(--police-glow) * 0.22)),
    0 0 56px rgba(var(--police-rgb), calc(var(--police-flash) * 0.6));
}

/* The light spilling out behind the word. */
.police__light::before {
  content: "";
  position: absolute;
  inset: -0.5em -0.3em;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--police-rgb), 0.42), rgba(var(--police-rgb), 0.12) 55%, transparent);
  opacity: calc(var(--police-flash) + var(--police-glow) * 0.25);
  pointer-events: none;
}

/* The lens bar under the word: lit with each flash, and only a faint trace with the slow glow, so the settled words
   don't look like links. */
.police__light::after {
  content: "";
  position: absolute;
  right: 0.08em;
  bottom: 0.03em;
  left: 0.08em;
  height: 0.07em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--police-hot) calc(var(--police-flash) * 70%), rgb(var(--police-rgb)));
  box-shadow: 0 0 calc(4px + var(--police-flash) * 16px) rgba(var(--police-rgb), calc(0.35 + var(--police-flash) * 0.65));
  opacity: calc(var(--police-flash) + var(--police-glow) * 0.3);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .police__light {
    --police-settle: 0;
  }

  /* burst (hard switching, after the page has painted), settle (a smooth fade to the steady colours), then the
     slow glow, which the two lenses take in turn. */
  .police__light--red {
    animation:
      police-burst-red 2.1s step-end 0.4s 1,
      police-settle 0.9s ease-out 2.3s 1 both,
      police-glow 5s ease-in-out 3.2s infinite;
  }

  .police__light--blue {
    animation:
      police-burst-blue 2.1s step-end 0.4s 1,
      police-settle 0.9s ease-out 2.3s 1 both,
      police-glow 5s ease-in-out 5.7s infinite;
  }
}

/* Red lights at 0, 0.7 and 1.4 s into the burst, blue at 0.35, 1.05 and 1.75 s; each flash lasts 0.14 s. */
@keyframes police-burst-red {
  0% { --police-flash: 1; }
  6.667% { --police-flash: 0; }
  33.333% { --police-flash: 1; }
  40% { --police-flash: 0; }
  66.667% { --police-flash: 1; }
  73.333% { --police-flash: 0; }
  100% { --police-flash: 0; }
}

@keyframes police-burst-blue {
  0% { --police-flash: 0; }
  16.667% { --police-flash: 1; }
  23.333% { --police-flash: 0; }
  50% { --police-flash: 1; }
  56.667% { --police-flash: 0; }
  83.333% { --police-flash: 1; }
  90% { --police-flash: 0; }
  100% { --police-flash: 0; }
}

@keyframes police-settle {
  from { --police-settle: 0; }
  to { --police-settle: 1; }
}

@keyframes police-glow {
  0%, 100% { --police-glow: 0; }
  50% { --police-glow: 1; }
}