:root {
  --jv-to-top-inset: 16px;
  scroll-padding-bottom: calc(max(var(--jv-to-top-inset), env(safe-area-inset-bottom)) + 72px);
}

@media (min-width: 760px) {
  :root {
    --jv-to-top-inset: 24px;
  }
}


.jv-to-top {
  --jv-to-top-shown: clamp(0, (var(--jv-y, 0) - 480) / 120, 1);
  position: fixed;
  right: calc(max(var(--jv-to-top-inset), env(safe-area-inset-right)) + 6px);
  bottom: calc(max(var(--jv-to-top-inset), env(safe-area-inset-bottom)) + 6px);
  z-index: 15; 
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--jv-color-border-strong, #d5dae2);
  border-radius: 50%;
  background: var(--jv-color-surface, #fff);
  box-shadow: var(--jv-shadow-card, 0 1px 2px rgba(22, 35, 59, 0.04), 0 6px 20px rgba(22, 35, 59, 0.06));
  color: var(--jv-color-navy-700, #1f3864);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: var(--jv-to-top-shown);
  translate: 0 calc(12px - 12px * var(--jv-to-top-shown));
  scale: clamp(0, (var(--jv-y, 0) - 480) * 1000, 1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.jv-to-top:focus-visible {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  outline-offset: 9px; 
}


.jv-to-top > * {
  pointer-events: none;
}

.jv-to-top__ring {
  position: absolute;
  top: -7px; 
  left: -7px;
  width: 60px;
  max-width: none; 
  height: 60px;
  overflow: visible;
  rotate: -90deg; 
  fill: none;
  stroke-width: 3;
}


.jv-to-top__plate {
  stroke: var(--jv-color-surface, #fff);
  stroke-width: 7;
}

.jv-to-top__track {
  stroke: var(--jv-color-border, #e3e6eb);
}


.jv-to-top__progress {
  stroke: var(--jv-color-navy-700, #1f3864);
  stroke-linecap: round;
  stroke-dasharray: 100px 100px;
  stroke-dashoffset: calc(100px - 100px * var(--jv-scroll, 0));
  transition: stroke-dashoffset 0.12s linear;
}

.jv-to-top__icon {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.18s ease;
}

@media (hover: hover) {
  .jv-to-top:hover {
    border-color: var(--jv-color-navy-700, #1f3864);
    box-shadow: var(--jv-shadow-card-hover, 0 10px 28px rgba(22, 35, 59, 0.08));
    transform: translateY(-1px);
  }

  .jv-to-top:hover .jv-to-top__icon {
    translate: 0 -2px;
  }
}

.jv-to-top:active {
  box-shadow: var(--jv-shadow-card, 0 1px 2px rgba(22, 35, 59, 0.04), 0 6px 20px rgba(22, 35, 59, 0.06));
  transform: scale(0.96);
}


@supports (animation-timeline: scroll()) {
  .jv-to-top {
    animation: jv-to-top-show linear both, jv-to-top-reveal step-start both;
    animation-timeline: scroll(root);
    animation-range: 480px 600px;
  }

  .jv-to-top__progress {
    animation: jv-to-top-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes jv-to-top-show { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
@keyframes jv-to-top-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jv-to-top-reveal { from { scale: 0; } to { scale: 1; } }
@keyframes jv-to-top-progress { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0; } }


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

  .jv-to-top:hover .jv-to-top__icon {
    translate: none;
  }

  .jv-to-top:active {
    transform: none;
  }

  @supports (animation-timeline: scroll()) {
    .jv-to-top {
      animation: jv-to-top-fade linear both, jv-to-top-reveal step-start both !important;
      animation-timeline: scroll(root) !important;
      animation-range: 480px 600px !important;
    }

    .jv-to-top__progress {
      animation: jv-to-top-progress linear both !important;
      animation-timeline: scroll(root) !important;
    }
  }
}

@media (forced-colors: active) {
  .jv-to-top__plate {
    stroke: Canvas;
  }

  .jv-to-top__track {
    stroke: GrayText;
  }

  .jv-to-top__progress {
    stroke: CanvasText;
  }
}

@media print {
  .jv-to-top {
    display: none;
  }
}