/* =============================
   BACK TO TOP BUTTON
   ============================= */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 12px;

  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 700;

  transform: translateY(80px);
  opacity: 0;
  pointer-events: none;

  transition: opacity 350ms ease,
    transform 350ms cubic-bezier(0.21, 0.61, 0.35, 1);
}

.back-to-top[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--color-primary-strong);
  outline: none;
}