/* A field goal assembled from numbers, with an original looping kick. */
.kick-art {
  position: relative;
  min-width: 0;
  width: 100%;
}
.kick-heading,
.kick-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 9px/1.5 var(--mono);
  letter-spacing: 0.09em;
  color: var(--muted);
}
.kick-heading {
  padding: 0 8px 10px;
}
.kick-art svg {
  display: block;
  width: 100%;
  overflow: visible;
  font: 12px var(--mono);
}
.kick-grid {
  fill: var(--ink);
  opacity: 0.075;
  font-size: 11px;
  letter-spacing: 0.25px;
}
.kick-posts {
  fill: #37433d;
  font-weight: 600;
}
.kick-flight {
  transform: translate(315px, 119px);
  animation: field-goal-flight 7s linear infinite;
}
.kick-spin {
  fill: #ed591e;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  animation: field-goal-spin 7s linear infinite;
}
.kick-lace {
  fill: #9a350e;
}
.kick-trail {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1;
  stroke-dasharray: 2 12;
  opacity: 0.17;
}
.kick-score {
  fill: var(--orange);
  font: 11px var(--mono);
  letter-spacing: 2px;
  opacity: 0;
  animation: field-goal-score 7s linear infinite;
}
.kick-footer {
  border-top: 1px solid var(--line);
  padding: 15px 8px 0;
}
.kick-footer i {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--orange);
  border-radius: 50%;
  margin-right: 7px;
}
.kick-footer button {
  border: 0;
  background: transparent;
  padding: 6px 0 6px 10px;
  color: var(--muted);
  font: 10px var(--mono);
  cursor: pointer;
}
.kick-art.is-paused * {
  animation-play-state: paused;
}
@keyframes field-goal-flight {
  0%,
  12% {
    transform: translate(85px, 405px) scale(1.15);
    opacity: 1;
  }
  22% {
    transform: translate(155px, 262px) scale(1.07);
  }
  32% {
    transform: translate(225px, 168px) scale(0.98);
  }
  42% {
    transform: translate(295px, 122px) scale(0.89);
  }
  52% {
    transform: translate(365px, 124px) scale(0.8);
  }
  62% {
    transform: translate(440px, 192px) scale(0.65);
    opacity: 1;
  }
  72%,
  88% {
    transform: translate(477px, 247px) scale(0.4);
    opacity: 0;
  }
  89% {
    transform: translate(85px, 405px) scale(1.15);
    opacity: 0;
  }
  100% {
    transform: translate(85px, 405px) scale(1.15);
    opacity: 1;
  }
}
@keyframes field-goal-spin {
  0%,
  12% {
    transform: rotate(-35deg);
  }
  72%,
  100% {
    transform: rotate(685deg);
  }
}
@keyframes field-goal-score {
  0%,
  60% {
    opacity: 0;
  }
  67%,
  86% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@media (max-width: 760px) {
  .kick-art {
    max-width: 520px;
    margin: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kick-footer button {
    display: none;
  }
  .kick-score {
    opacity: 1;
  }
}

#fourth-down-art { --mono: ui-monospace, SFMono-Regular, Consolas, monospace; --ink: #232b29; --muted: #69716c; --line: #e2e4db; --orange: #d94d23; width: 100%; box-sizing: border-box; margin-top: 1rem; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #faf9f6; box-shadow: 0 2px 10px #0000001a; }
#fourth-down-art svg { height: 270px; }
#fourth-down-art .kick-footer { font-size: 8px; }
@media (prefers-reduced-motion: reduce) { #fourth-down-art * { animation: none !important; } }