/* ==========================================================================
   Maniro — Back to top button
   Fixed circular action button, bottom-right corner. Hidden on load, fades
   in after ~400px of scroll (toggled by js/base/back-to-top.js via the
   .is-visible class). Reuses the site's existing tokens (colors, radius,
   shadow, easing) so it matches the rest of the UI with no new styles.
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 400; /* Above page content, below header (100) is irrelevant here
                   since it sits at the bottom; kept safely under modal /
                   fullscreen-viewer layers (2000 / 3000) on the gallery
                   page so it's never clickable through them. */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  /* One formal 240ms beat for every property, on the site's standard
     ease (cubic-bezier(.4,0,.2,1)) — no property is allowed to run
     longer or shorter than the rest, so the motion reads as a single,
     deliberate transition rather than several competing ones. */
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease),
    border-color 0.24s var(--ease),
    color 0.24s var(--ease),
    background-color 0.24s var(--ease),
    visibility 0s linear 0.24s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease),
    border-color 0.24s var(--ease),
    color 0.24s var(--ease),
    background-color 0.24s var(--ease),
    visibility 0s linear 0s;
}

/* Restrained hover: a 2px lift + the same soft sky tint used by the
   theme toggle and secondary buttons elsewhere on the site — no rotation,
   no scale, nothing that reads as playful. */
.back-to-top:hover {
  border-color: var(--color-sky);
  color: var(--color-sky-dark);
  background: var(--color-sky-tint);
  transform: translateY(-2px);
}

.back-to-top.is-visible:hover {
  transform: translateY(-2px);
}

[data-theme="dark"] .back-to-top:hover {
  color: var(--color-sky);
}

/* Press feedback stays minimal — a 3% scale, not a bounce. Runs on the
   same 240ms beat as everything else above, per the site's motion spec. */
.back-to-top:active {
  transform: translateY(0) scale(0.97);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

/* Keep it clear of the mobile nav sheet, which opens below the header and
   could otherwise overlap the same bottom-right area on very short,
   landscape phone screens. Browsers without :has() simply skip this rule
   and keep the button visible, which is still safe. */
@media (max-width: 900px) {
  body:has(.nav-links.is-open) .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}