/* Boich brand tweaks. Keep this file small. */

:root {
  /* TODO: choose brand accent colour */
  --pico-primary: #1a1a1a;
}

main.container {
  padding-block: 2rem;
}

footer.container {
  padding-block: 2rem;
  color: var(--pico-muted-color);
}

.hero {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  padding-block: 4rem 2rem;
}

.hero hgroup h1 {
  margin-bottom: 1.5rem;
}

.audience .cycler {
  display: grid;
  justify-items: center;
  margin-top: 0.5rem;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c2410c;
  overflow: hidden;
}

.audience .cycler > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(50px);
  animation: cycle 24s infinite;
}

.audience .cycler > span:nth-child(1) { animation-delay: 0s; }
.audience .cycler > span:nth-child(2) { animation-delay: 6s; }
.audience .cycler > span:nth-child(3) { animation-delay: 12s; }
.audience .cycler > span:nth-child(4) { animation-delay: 18s; }

@keyframes cycle {
  0%   { opacity: 0; transform: translateX(50px); }
  2%   { opacity: 1; transform: translateX(0); }
  23%  { opacity: 1; transform: translateX(0); }
  25%  { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 0; transform: translateX(-50px); }
}

@media (prefers-reduced-motion: reduce) {
  .audience .cycler > span { animation: none; transform: none; }
  .audience .cycler > span:nth-child(1) { opacity: 1; }
}