/* =========================================================
   BACK TO TOP v99
   Compact, conditional, and visually consistent with the portfolio.
   ========================================================= */

.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:44px;
  height:40px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--primary2) 20%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  color:var(--primary2);
  box-shadow:0 5px 18px rgba(8,27,39,.12);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  cursor:pointer;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease,
    border-color .18s ease,
    background .18s ease;
}

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

.back-to-top:hover,
.back-to-top:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 66%,var(--line));
  background:var(--surface);
}

.back-to-top:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 62%,transparent);
  outline-offset:3px;
}

.back-to-top span{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  font-size:1rem;
  line-height:1;
  font-weight:700;
  color:var(--accent);
}

.back-to-top small{
  font-size:.67rem;
  line-height:1;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--primary2);
}

body.story-page .back-to-top{
  right:18px;
}

@media(max-width:700px){
  .back-to-top{
    right:14px;
    bottom:14px;
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
    justify-content:center;
  }

  .back-to-top small{
    display:none;
  }
}

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

@media print{
  .back-to-top{
    display:none!important;
  }
}