@font-face {
  font-family: 'Fooball Inter';
  src: url('/fonts/signoffs/foo-inter-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

[data-signoff='foo'] {
  --foo-esp: #c60b1e;
  --foo-arg: #6cace4;
  --b-font: 'Fooball Inter', var(--s-sans);
  --b-weight: 700;
  --b-tracking: -0.045em;
  --b-align: center;
  --b-crop: 16%;
  --b-ink: #111114;
  --b-ink-dark: #fff;
  --b-fade: 75%;
}
/* The two sides' colours rise from the bottom corners with equal weight, home
   on the left and away on the right, over the page colour so the band has no
   edge of its own. */
[data-signoff='foo'] .story-signoff-scene {
  background:
    radial-gradient(
      55% 95% at 0% 100%,
      color-mix(in srgb, var(--foo-esp) 40%, transparent),
      transparent 100%
    ),
    radial-gradient(
      55% 95% at 100% 100%,
      color-mix(in srgb, var(--foo-arg) 55%, transparent),
      transparent 100%
    );
}
.dark [data-signoff='foo'] .story-signoff-scene {
  background:
    radial-gradient(
      60% 100% at 0% 100%,
      color-mix(in srgb, var(--foo-esp) 70%, transparent),
      transparent 100%
    ),
    radial-gradient(
      60% 100% at 100% 100%,
      color-mix(in srgb, var(--foo-arg) 42%, transparent),
      transparent 100%
    ),
    linear-gradient(transparent, #111318);
}
/* Each extra o widens the name, so it shrinks to stay inside the band. */
[data-signoff='foo'] .story-signoff-name {
  --b-fit: calc(0.18 * 3 / (3 + 0.58 * var(--foo-extra, 0)));
  pointer-events: auto;
  transition: font-size 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-signoff='foo'] .story-signoff-name button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
[data-signoff='foo'] .story-signoff-name button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
[data-signoff='foo'] span[data-extra] {
  display: inline-block;
  animation: foo-o 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-signoff='foo'] [data-full] span[data-extra] {
  color: #1a9e5c;
  transition: color 0.2s;
}
.dark [data-signoff='foo'] [data-full] span[data-extra] {
  color: #32c77b;
}
@keyframes foo-o {
  from {
    scale: 0.2 1;
    opacity: 0;
  }
}