.scroll-to-top {
  --scroll-top-size: 56px;
  position: fixed;
  right: clamp(22px, 2.4vw, 34px);
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  z-index: 950;
  display: grid;
  place-items: center;
  width: var(--scroll-top-size);
  height: var(--scroll-top-size);
  padding: 0;
  color: #f7fff9;
  background: #063d24;
  border: 2px solid rgba(105, 229, 148, 0.72);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(2, 38, 21, 0.22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

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

.scroll-to-top__arrow {
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 19V5m0 0-6 6m6-6 6 6' stroke='%23f7fff9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 180ms ease;
}

.scroll-to-top:focus-visible {
  outline: 3px solid rgba(57, 205, 111, 0.78);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-to-top:hover {
    transform: translateY(-3px);
    border-color: rgba(114, 239, 158, 0.72);
    box-shadow: 0 14px 28px rgba(2, 38, 21, 0.28);
  }

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

@media (max-width: 768px) {
  .scroll-to-top {
    --scroll-top-size: 48px;
    right: max(20px, calc(env(safe-area-inset-right) + 14px));
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
    box-shadow: 0 8px 20px rgba(2, 38, 21, 0.2);
  }
}

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