/* ==========================================================================
   COMPONENTE: BOTÃO VOLTAR AO TOPO (CHRONO-TOP EMBLEM)
   --------------------------------------------------------------------------
   - Micro-joalharia de precisão com leitura em anel horológico (SVG circular).
   - Vidro fosco acetinado com reflexos dourados e transições aeroespaciais.
   - Seta ascendente contínua: desliza para cima no hover em loop estético.
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  right: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 50;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(201, 162, 78, 0.35);
  box-shadow:
    0 8px 24px -6px rgba(18, 54, 116, 0.12),
    0 2px 6px rgba(18, 54, 116, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--color-navy-deep);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.92);
  transition:
    opacity 350ms var(--ease-default),
    visibility 350ms var(--ease-default),
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: var(--color-gold);
  box-shadow:
    0 14px 32px -8px rgba(18, 54, 116, 0.22),
    0 0 16px rgba(201, 162, 78, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: var(--color-blue-primary);
}

.back-to-top:active {
  transform: translateY(-1px) scale(0.98);
}

.back-to-top:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-cream),
    0 0 0 5px var(--color-navy-deep);
}

/* Anel de progresso SVG circular perimétrico */
.back-to-top__dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.back-to-top__dial-track {
  fill: none;
  stroke: rgba(201, 162, 78, 0.16);
  stroke-width: 2;
}

.back-to-top__dial-progress {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 138.23; /* 2 * PI * 22 */
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset 120ms linear;
}

/* Caixa e Sistema de Seta Ascendente */
.back-to-top__icon-box {
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.back-to-top__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  transition: transform 400ms cubic-bezier(0.35, 0, 0.25, 1);
}

.back-to-top__arrow--default {
  transform: translate(-50%, -50%);
}

.back-to-top__arrow--in {
  transform: translate(-50%, 160%);
}

.back-to-top:hover .back-to-top__arrow--default {
  transform: translate(-50%, -240%);
}

.back-to-top:hover .back-to-top__arrow--in {
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top__arrow,
  .back-to-top__dial-progress {
    transition: none !important;
  }
}