:root {
  --gotop-core-size: clamp(48px, calc(42.37px + 1.502vw), 64px);
  --gotop-inline-offset: clamp(15px, calc(13.24px + 0.469vw), 20px);
  --gotop-block-offset: clamp(15px, calc(13.24px + 0.469vw), 20px);
}

.gotop-wrapper {
  position: fixed;
  z-index: 999;
  right: max(var(--gotop-inline-offset), env(safe-area-inset-right));
  bottom: max(var(--gotop-block-offset), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gotop-core-size) * 1.35);
  height: calc(var(--gotop-core-size) * 1.35);
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  color: inherit;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear .3s;
}

.gotop-wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.gotop-wrapper:focus-visible {
  outline: 3px solid #164f68;
  outline-offset: 4px;
}

.gotop-wrapper .water-core {
  position: relative;
  width: var(--gotop-core-size);
  height: var(--gotop-core-size);
  overflow: hidden;
  border-radius: 50%;
  background-color: #2f9bc6;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

.gotop-wrapper .water-core::before,
.gotop-wrapper .water-core::after {
  position: absolute;
  top: calc(var(--gotop-core-size) * -.7);
  left: 50%;
  width: calc(var(--gotop-core-size) * 1.4);
  height: calc(var(--gotop-core-size) * 1.2);
  content: "";
  transform: translateX(-50%);
  transform-origin: 50% 52%;
  animation: gotop-wave 5s linear infinite;
}

.gotop-wrapper .water-core::before {
  border-radius: 45%;
  background: rgb(255 255 255 / 70%);
}

.gotop-wrapper .water-core::after {
  border-radius: 35%;
  background: rgb(255 255 255 / 30%);
  animation-direction: reverse;
  animation-duration: 6.5s;
}

.gotop-wrapper .circle-text-svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
  animation: gotop-rotate-text 15s linear infinite;
}

.gotop-wrapper .circle-text-svg text {
  fill: #97aab5;
  font-family: "LINE Seed JP", "Noto Sans TC", sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@keyframes gotop-wave {
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes gotop-rotate-text {
  to { transform: rotate(360deg); }
}

@media (hover: hover) and (pointer: fine) {
  .gotop-wrapper.is-visible:hover {
    transform: translateY(0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gotop-wrapper {
    transition: none;
  }

  .gotop-wrapper .circle-text-svg,
  .gotop-wrapper .water-core::before,
  .gotop-wrapper .water-core::after {
    animation: none;
  }
}