@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/chakra-petch-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #121212;
  --beacon: #e01e1e;
  --paper: #ffffff;
  --stone: #6e6e6e;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
  background: var(--ink);
}

body {
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.8rem/1.6 "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Scanlines over the whole page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, 0.035) 3px 4px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.75rem, 5vh, 3.25rem);
  padding: 2rem 1.5rem 1rem;
}

/* Logo */

.logo {
  position: relative;
  width: min(72vw, 46vh, 440px);
  aspect-ratio: 918 / 1149;
}

.logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ink {
  fill: var(--paper);
}

.beam {
  fill: var(--beacon);
}

.base {
  animation: shake 7.3s step-end infinite;
}

/* The lamp is never quite steady. */
.base .beam {
  animation: flicker 5.1s step-end infinite;
}

/* A red copy of the whole logo that slips out from behind it during a glitch. */
.ghost {
  fill: var(--beacon);
  opacity: 0;
  animation: ghost 7.3s step-end infinite;
}

/* Each slice is a strip of the logo on its own patch of background. Pushed sideways it
   covers the strip below it, so the logo looks cut and displaced, like the slices in the mark. */
.slice {
  position: absolute;
  inset: 0 -14%;
  background: var(--ink);
  clip-path: inset(100% 0 0 0);
}

.slice svg {
  left: 50%;
  width: 78.125%;
  transform: translateX(-50%);
}

.slice-a {
  animation: slice-a 7.3s step-end infinite;
}

.slice-b {
  animation: slice-b 5.9s step-end infinite;
}

.slice-c {
  animation: slice-c 9.7s step-end infinite;
}

@keyframes slice-a {
  0%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  40% { clip-path: inset(19% 0 74% 0); transform: translateX(-5%); }
  41% { clip-path: inset(61% 0 31% 0); transform: translateX(4%); }
  42% { clip-path: inset(22% 0 76% 0); transform: translateX(7%); }
  43.2% { clip-path: inset(100% 0 0 0); transform: none; }
  88% { clip-path: inset(78% 0 6% 0); transform: translateX(-3%); }
  89.4% { clip-path: inset(100% 0 0 0); transform: none; }
}

@keyframes slice-b {
  0%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  12% { clip-path: inset(44% 0 49% 0); transform: translateX(6%); }
  13.2% { clip-path: inset(9% 0 85% 0); transform: translateX(-4%); }
  14.4% { clip-path: inset(100% 0 0 0); transform: none; }
  63% { clip-path: inset(83% 0 9% 0); transform: translateX(4%); }
  64% { clip-path: inset(36% 0 60% 0); transform: translateX(-7%); }
  65.5% { clip-path: inset(100% 0 0 0); transform: none; }
}

@keyframes slice-c {
  0%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  30% { clip-path: inset(68% 0 27% 0); transform: translateX(-6%); }
  30.9% { clip-path: inset(100% 0 0 0); transform: none; }
  71% { clip-path: inset(3% 0 90% 0); transform: translateX(5%); }
  71.8% { clip-path: inset(51% 0 44% 0); transform: translateX(-3%); }
  72.9% { clip-path: inset(100% 0 0 0); transform: none; }
}

@keyframes ghost {
  0%, 100% { opacity: 0; transform: none; clip-path: none; }
  40% { opacity: 0.9; transform: translateX(-1.6%); clip-path: inset(10% 0 40% 0); }
  41.5% { opacity: 0.9; transform: translateX(1.8%); clip-path: inset(55% 0 5% 0); }
  43.2% { opacity: 0; transform: none; clip-path: none; }
  88% { opacity: 0.8; transform: translateX(1.2%); clip-path: inset(0 0 60% 0); }
  89.4% { opacity: 0; transform: none; clip-path: none; }
}

@keyframes shake {
  0%, 100% { transform: none; }
  40% { transform: translateX(0.5%); }
  41% { transform: translateX(-0.7%) skewX(-1.2deg); }
  42% { transform: translateX(0.3%); }
  43.2% { transform: none; }
  88% { transform: translateX(-0.4%); }
  89.4% { transform: none; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  23% { opacity: 0.35; }
  24% { opacity: 1; }
  25.5% { opacity: 0.6; }
  26.2% { opacity: 1; }
  77% { opacity: 0.2; }
  78.4% { opacity: 1; }
}

/* Text */

.copy {
  text-align: center;
  /* Tracking adds a gap after the last letter. This pulls the text back to the centre. */
  padding-left: 0.34em;
}

.place {
  color: var(--stone);
}

.status {
  margin-top: 1.4rem;
  color: var(--beacon);
  animation: flicker 5.1s step-end infinite;
}

.lamp {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.9em;
  background: var(--beacon);
  animation: blink 1.6s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  padding: 1.25rem 1.5rem;
  color: var(--stone);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--beacon);
}

@media (max-width: 40rem) {
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* No movement for people who ask for none. */
@media (prefers-reduced-motion: reduce) {
  .base,
  .base .beam,
  .ghost,
  .slice,
  .status,
  .lamp {
    animation: none;
  }
}