/* ============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: calc(30 / var(--vw-base) * 100vw);
  right:  calc(30 / var(--vw-base) * 100vw);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(50 / var(--vw-base) * 100vw);
  height: calc(50 / var(--vw-base) * 100vw);
  border-radius: 50%;
  background-color: var(--color-red);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-top.-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover {
  opacity: 0.85;
}

.scroll-top svg {
  width:  calc(20 / var(--vw-base) * 100vw);
  height: calc(20 / var(--vw-base) * 100vw);
}

/* ---- MOBILE ---- */
@media (max-width: 767px) {
  .scroll-top {
    bottom: calc(20 / var(--vw-base) * 100vw);
    right:  calc(15 / var(--vw-base) * 100vw);
    width:  calc(44 / var(--vw-base) * 100vw);
    height: calc(44 / var(--vw-base) * 100vw);
  }

  .scroll-top svg {
    width:  calc(18 / var(--vw-base) * 100vw);
    height: calc(18 / var(--vw-base) * 100vw);
  }
}