.back-to-top {
  position: fixed;
  z-index: 998;
  right: clamp(18px, 2.5vw, 42px);
  bottom: clamp(18px, 2.5vw, 42px);
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 4px;
}

.back-to-top__viewport {
  position: absolute;
  inset: 0;
  display: block;
}

.back-to-top__frame {
  position: absolute;
  inset: 0;
  background-image: var(--duck-sprite-image);
  background-repeat: no-repeat;
  background-position: var(--duck-position-x) var(--duck-position-y);
  background-size: 416% auto;
  opacity: 0;
  overflow: hidden;
  transform: translate(var(--duck-adjust-x), var(--duck-adjust-y));
  pointer-events: none;
  user-select: none;
}

.back-to-top__frame.is-active { opacity: 1; }

.back-to-top__frame:nth-child(1) { --duck-position-x: .63%; --duck-position-y: 1.13%; --duck-adjust-x: 6.1%; --duck-adjust-y: -.2%; }
.back-to-top__frame:nth-child(2) { --duck-position-x: 33.54%; --duck-position-y: 1.13%; --duck-adjust-x: 3.8%; --duck-adjust-y: -.3%; }
.back-to-top__frame:nth-child(3) { --duck-position-x: 66.46%; --duck-position-y: 1.13%; --duck-adjust-x: 2.3%; --duck-adjust-y: -.6%; }
.back-to-top__frame:nth-child(4) { --duck-position-x: 99.37%; --duck-position-y: 1.13%; --duck-adjust-x: -1.7%; --duck-adjust-y: -.8%; }
.back-to-top__frame:nth-child(5) { --duck-position-x: .63%; --duck-position-y: 64.29%; --duck-adjust-x: 4.7%; --duck-adjust-y: .8%; }
.back-to-top__frame:nth-child(6) { --duck-position-x: 33.54%; --duck-position-y: 64.29%; --duck-adjust-x: -3.3%; --duck-adjust-y: .5%; }
.back-to-top__frame:nth-child(7) { --duck-position-x: 66.46%; --duck-position-y: 64.29%; --duck-adjust-x: -3.9%; --duck-adjust-y: .4%; }
.back-to-top__frame:nth-child(8) { --duck-position-x: 99.37%; --duck-position-y: 64.29%; --duck-adjust-x: -8.1%; --duck-adjust-y: .4%; }

@media (max-width: 767px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 76px;
    height: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}