/* Operon: Inter wordmark in the site's ink (bone in dark), with the five-part
   mark in glass beside it. The mark turns slowly on its own and a quarter turn
   per click, the way the logo on withoperon.com turns on hover. */
@font-face {
  font-family: 'Operon Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/signoffs/operon-inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Operon Mono';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/signoffs/operon-mono.woff2') format('woff2');
}

[data-signoff='operon'] .op-scene {
  background: linear-gradient(transparent 20%, #f7f5f0);
}
.dark [data-signoff='operon'] .op-scene {
  background: linear-gradient(transparent 20%, #1d1d20);
}

[data-signoff='operon'] .op-name {
  --b-font: 'Operon Inter', Inter, system-ui, sans-serif;
  --b-weight: 700;
  --b-fit: 0.2;
  --b-crop: 11%;
  --b-tracking: -0.055em;
  --b-ink: #18181b;
  --b-ink-dark: #f7f5f0;
  align-items: flex-end;
}

/* The mark follows the name like one more glyph. Its box is 0.92em, and the
   glass fills about 70% of it, so it reads a little taller than the x-height.
   Inter's line box puts the baseline 0.035em above the row's bottom, so the
   x-height's middle is 0.2965em up; top shifts the box to centre on it. */
[data-signoff='operon'] .op-mark {
  position: relative;
  top: 0.1635em;
  flex: none;
  align-self: flex-end;
  width: 0.92em;
  aspect-ratio: 1;
  /* Keeps the row at the text's 0.8em, so the crop stays the text's. */
  margin: -0.12em 0 0 0.02em;
}
[data-signoff='operon'] .op-drift,
[data-signoff='operon'] .op-turn,
[data-signoff='operon'] .op-glass,
[data-signoff='operon'] .op-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
[data-signoff='operon'] .op-drift {
  animation: op-drift 90s linear infinite;
}
[data-signoff='operon'] .op-turn {
  transition: rotate 0.5s cubic-bezier(0.3, 1.25, 0.5, 1);
}
@keyframes op-drift {
  to {
    rotate: 360deg;
  }
}
[data-signoff='operon'] .op-hit {
  all: unset;
  pointer-events: auto;
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  cursor: pointer;
}
[data-signoff='operon'] .op-hit:focus-visible {
  outline: 2px solid #3d6fe0;
  outline-offset: 4px;
}

[data-signoff='operon'] .op-term {
  position: absolute;
  z-index: 1;
  top: 52px;
  left: var(--f-gutter);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-family: 'Operon Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 20px;
  color: #71717a;
}
.dark [data-signoff='operon'] .op-term {
  color: #a1a1aa;
}
[data-signoff='operon'] .op-term b {
  font-weight: 400;
  color: #18181b;
}
.dark [data-signoff='operon'] .op-term b {
  color: #f7f5f0;
}
[data-signoff='operon'] .op-cmd {
  overflow: hidden;
  width: 13ch;
  white-space: nowrap;
  animation: op-type 0.6s steps(13) both;
}
[data-signoff='operon'] .op-out {
  animation: op-show 0.2s 0.9s both;
}
@keyframes op-type {
  from {
    width: 0;
  }
}
@keyframes op-show {
  from {
    opacity: 0;
  }
}

@container (max-width: 640px) {
  [data-signoff='operon'] .op-name {
    --b-fit: 0.225;
  }
  [data-signoff='operon'] .op-term {
    font-size: 12px;
    line-height: 18px;
  }
}