/* Original to MIRA: a quiet way back to the hero. A 48px glass circle,
   bottom-right, that shows up once the hero has scrolled away. A hairline ring around it
   fills with the page's scroll progress, so it also tells you how far you are.
   Same glass as the floating menu; tokens only. */

.mira-to-top {
  --to-top-ease: cubic-bezier(.22, 1, .36, 1);
  --to-top-lift: 0px;
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--to-top-lift));
  z-index: 1050;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ui-glass-line);
  border-radius: 999px;
  background: var(--ui-glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 28px rgba(var(--ui-text-rgb), .1);
  color: var(--ui-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.94);
  transition:
    opacity .4s var(--to-top-ease),
    transform .55s var(--to-top-ease),
    bottom .45s var(--to-top-ease),
    visibility 0s linear .4s,
    box-shadow .25s ease;
}

.mira-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .4s var(--to-top-ease),
    transform .55s var(--to-top-ease),
    bottom .45s var(--to-top-ease),
    visibility 0s,
    box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
.mira-to-top:hover { box-shadow: 0 14px 30px rgba(var(--ui-text-rgb), .16); }
}

.mira-to-top:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 4px;
}

/* Scroll progress: a line that fills clockwise from the top (3.5px, on
   request 2px thicker and 10% stronger than the old 1.5px hairline). */
.mira-to-top__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  overflow: visible; /* the thicker line may pass the box edge */
  pointer-events: none;
}

.mira-to-top__ring circle {
  fill: none;
  stroke: var(--ui-primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--to-top-progress, 0) * 100);
  opacity: .77;
}

.mira-to-top__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--to-top-ease);
}

@media (hover: hover) and (pointer: fine) {
.mira-to-top:hover .mira-to-top__arrow { transform: translateY(-3px); }
}

@media (max-width: 767.98px) {
  .mira-to-top { right: 16px; bottom: calc(16px + var(--to-top-lift)); width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mira-to-top,
  .mira-to-top.is-visible { transform: none; }
  .mira-to-top:hover .mira-to-top__arrow { transform: none; }
}