/* Unified button system + conveyor roll hover.
   One skin, two variants (solid .btn-dark, outline .cta-btn), one motion language.
   The roll structure is injected by effects.js; without JS the buttons are static. */

.af-canvas .btn-dark,
.af-canvas .cta-btn {
  height: 44px;
  padding: 0 22px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* $ARROW pill: the outline variant of the same system, no ornament */
.af-canvas .an-pill {
  height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(10, 11, 4, 0.28);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.af-canvas .an-pill:hover { border-color: var(--ink); }
html.dark .af-canvas .an-pill { border-color: rgba(242, 244, 234, 0.32); }
html.dark .af-canvas .an-pill:hover { border-color: var(--ink); }
.af-canvas .an-pill .an-px {
  margin-left: 8px;
  font-weight: 400;
  opacity: 0.55;
  min-width: 0;
}
.af-canvas .an-pill .an-px:empty { margin-left: 0; }

/* conveyor roll: a clipped window, a two-copy column, one clean travel */
.btn-roll {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

.btn-roll-i {
  position: relative;
  display: block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-roll-i > * {
  display: block;
  white-space: nowrap;
}

/* the duplicate waits below the clipped window */
.btn-roll-i > *:last-child {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.btn-roll-gl .btn-roll-i > svg { display: block; }

a:hover > .btn-roll .btn-roll-i,
a:hover .btn-roll .btn-roll-i,
button:hover .btn-roll .btn-roll-i {
  transform: translateY(-100%);
}

/* the arrow glyph rides the same conveyor, one beat behind the label */
.btn-roll-gl .btn-roll-i { transition-delay: 0.04s; }

@media (prefers-reduced-motion: reduce) {
  .btn-roll-i { transition: none; }
}