/* Border always visible. A ::before pseudo-element slides in from the left as the fill.
   Text sits on top via z-index so it stays readable during the animation. */
.btn-fill {
  position: relative;
  overflow: hidden;
  border: 2px solid white;
  color: white;
  background: transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.btn-fill:hover::before {
  transform: translateX(0);
}

.btn-fill:hover {
  color: #9f1239;
  border-color: #9f1239;
}