/* Shared viewport navigation, separate from page animation timelines. */
.back-to-top {
  --top-size: 52px;
  --top-right: 32px;
  --top-bottom: 80px;
  --top-lift: -4px;
  --top-duration: 4.2s;
  --top-transition: 180ms;
  --top-paper: #fff7e9;
  --top-hover: #f3e4ce;
  --top-ink: #79552e;
  --top-edge: #d9c3a2;
  position: fixed;
  z-index: 30;
  right: max(var(--top-right), env(safe-area-inset-right));
  bottom: calc(var(--top-bottom) + env(safe-area-inset-bottom));
  width: var(--top-size);
  height: var(--top-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--top-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--top-transition) ease, visibility var(--top-transition);
}

.back-to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top__surface {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--top-edge);
  border-radius: inherit;
  background: var(--top-paper);
  box-shadow: 0 5px 14px rgb(74 52 19 / 12%), inset 0 1px 0 #fffdf8;
  animation: top-gentle-float var(--top-duration) ease-in-out infinite paused;
  transition: background-color var(--top-transition) ease;
}

.back-to-top[data-visible="true"][data-paused="false"] .back-to-top__surface {
  animation-play-state: running;
}

.back-to-top svg { width: 22px; height: 22px; }
.back-to-top:focus-visible { outline: 3px solid var(--top-ink); outline-offset: 5px; }
.back-to-top:active .back-to-top__surface { background: var(--top-hover); }
body.video-modal-open .back-to-top { display: none; }

@media (hover: hover) {
  .back-to-top:hover .back-to-top__surface { background: var(--top-hover); animation-play-state: paused; }
}

@keyframes top-gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--top-lift)); }
}

@media (max-width: 1239px) {
  .back-to-top { --top-size: 48px; --top-right: 20px; --top-bottom: 96px; --top-lift: -3px; }
}

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