/* Back-to-top: herda as variáveis do palette-navy-gold.css */
:root {
  --back-to-top-surface: rgba(7, 17, 32, .95);
  --back-to-top-ink: #f0ead8;
  --back-to-top-accent: #c89a52;
  --back-to-top-accent-hover: #efd39c;
  --back-to-top-ring-bg: rgba(239, 211, 156, .15);
}

html { scroll-behavior: auto; }

#back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(200, 154, 82, .22);
  border-radius: 50%;
  background: var(--back-to-top-surface);
  box-shadow:
    0 0 0 1px rgba(239, 211, 156, .08),
    0 10px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.88);
  transition:
    opacity .4s cubic-bezier(.22,1,.36,1),
    visibility .4s cubic-bezier(.22,1,.36,1),
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

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

#back-to-top:hover {
  border-color: rgba(200, 154, 82, .5);
  box-shadow:
    0 0 0 1px rgba(200, 154, 82, .3),
    0 0 24px rgba(200, 154, 82, .12),
    0 12px 38px rgba(0,0,0,.55);
  transform: translateY(-2px) scale(1);
}

#back-to-top:active {
  transform: translateY(0) scale(.96);
}

#back-to-top:focus-visible {
  outline: 3px solid var(--back-to-top-accent);
  outline-offset: 4px;
}

/* Anel de progresso circular */
.progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%,-50%) rotate(-90deg);
  pointer-events: none;
}

.progress-ring__bg {
  fill: none;
  stroke: var(--back-to-top-ring-bg);
  stroke-width: 2.5;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--back-to-top-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}

/* Setinha */
.btn-arrow {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--back-to-top-ink);
  transition: color .25s ease, transform .25s ease;
}

#back-to-top:hover .btn-arrow {
  color: var(--back-to-top-accent-hover);
  transform: translateY(-1px);
}

/* Lenis helpers */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

@media (max-width: 600px) {
  #back-to-top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
  .progress-ring {
    width: 48px;
    height: 48px;
  }
  .btn-arrow {
    width: 16px;
    height: 16px;
  }
}

html.motion-disabled { scroll-behavior: auto; }
html.motion-disabled #back-to-top { transition: none; }
