@font-face {
  font-family: 'Nova Geist';
  src: url('/fonts/signoffs/nova-geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Nova is for 3 a.m. and the morning after: dawn in the light theme, the
   reel's plum night sky in the dark one. */
[data-signoff='nova'] {
  --b-fit: 0.2;
  --b-crop: 10%;
  --b-font: 'Nova Geist', var(--s-sans);
  --b-weight: 600;
  --b-tracking: -0.05em;
  --b-ink: #1e40af;
  --b-ink-dark: #fff1ea;
  --b-fade: 75%;
}
[data-signoff='nova'] .nova-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 78% 115%, #ffc2ae 0%, transparent 70%),
    linear-gradient(#fff4ee, #ffe2d6);
}
.dark [data-signoff='nova'] .nova-sky {
  background:
    radial-gradient(55% 80% at 78% 120%, #4a2552 0%, transparent 70%),
    linear-gradient(#1f1530, #28173a);
}
[data-signoff='nova'] .nova-star {
  position: absolute;
  display: none;
  background: #fff1ea;
  opacity: 0.7;
}
.dark [data-signoff='nova'] .nova-star {
  display: block;
}

[data-signoff='nova'] .story-signoff-name {
  align-items: flex-end;
  gap: 0.07em;
}
/* Every name sits in one cell, so the heart never moves when they swap. */
[data-signoff='nova'] .nova-names {
  display: inline-grid;
}
[data-signoff='nova'] .nova-names > span {
  grid-area: 1 / 1;
}
[data-signoff='nova'] .nova-old {
  position: relative;
  opacity: 0;
  color: #a1a1aa;
}
.dark [data-signoff='nova'] .nova-old {
  color: #8b7a99;
}
[data-signoff='nova'] .nova-old::after {
  content: '';
  position: absolute;
  left: -0.02em;
  right: 0.04em;
  top: 0.42em;
  height: 0.06em;
  border-radius: 1em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
[data-signoff='nova'] .nova-names[data-run] .nova-old {
  animation: nova-old 0.7s calc(var(--i) * 0.7s) both;
}
[data-signoff='nova'] .nova-names[data-run] .nova-old::after {
  animation: nova-strike 0.7s calc(var(--i) * 0.7s) both;
}
[data-signoff='nova'] .nova-names[data-run] .nova-now {
  animation: nova-now 2.6s both;
}
@keyframes nova-old {
  0% {
    opacity: 0;
    translate: 0 0.06em;
  }
  14%,
  80% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 0;
    translate: 0 -0.04em;
  }
}
@keyframes nova-strike {
  0%,
  30% {
    transform: scaleX(0);
  }
  62%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes nova-now {
  0% {
    opacity: 1;
  }
  6%,
  80% {
    opacity: 0;
    translate: 0 0.06em;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* The heart leads the name the way the favicon leads the tab title. Geist's
   line box puts the baseline 0.04em above the row's bottom, so the x-height's
   middle is 0.31em up; the 0.36em heart centres on it. */
[data-signoff='nova'] .nova-heart {
  pointer-events: auto;
  flex: none;
  width: 0.36em;
  height: 0.36em;
  margin: 0 0 0.13em -0.01em;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-signoff='nova'] .nova-heart:hover {
  scale: 1.12;
}
[data-signoff='nova'] .nova-heart:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}
[data-signoff='nova'] .nova-heart svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  [data-signoff='nova'] {
    --b-fit: 0.3;
  }
}