/* ══════════════════════════════════════════════════════════════════════
   Back-to-top control
   ----------------------------------------------------------------------
   A small fixed disc in the very corner of the viewport, shown once the
   reader reaches the third section. The ring around it is a live
   scroll-progress meter: a conic gradient swept by --btt-progress (0 → 1)
   over a faint track, masked into a ring so the dark core shows through.

   One arrow, drawn in CSS (stem + chevron), so there is no icon request.
   Hover lifts the disc and nudges the arrow up — the movement is the
   affordance, so nothing else needs to shout.

   The track is a dark tint rather than a white one: this control floats
   over both the pale grid sections and the near-black ones, and a white
   track disappears completely on the light half of the page.

   No compositor hint is declared here on purpose — the site keeps a hard cap
   on permanent will-change declarations, and this is one small element.
   ══════════════════════════════════════════════════════════════════════ */

.as-btt {
  --btt-size: 42px;
  --btt-ring: 2.5px;
  --btt-progress: 0;
  --btt-accent-a: #bafc01;
  --btt-accent-b: #01fca3;

  position: fixed;
  right: clamp(10px, 1.4vw, 16px);
  bottom: clamp(10px, 1.4vw, 16px);
  z-index: 4000;

  display: block;
  width: var(--btt-size);
  height: var(--btt-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.8);
  transition:
    opacity 0.26s ease,
    transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1),
    visibility 0s linear 0.26s;
}

.as-btt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* ---------- progress ring ---------- */
.as-btt__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--btt-accent-a) 0deg,
    var(--btt-accent-b) calc(var(--btt-progress) * 360deg),
    rgba(10, 10, 20, 0.16) calc(var(--btt-progress) * 360deg)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--btt-ring)),
    #000 calc(100% - var(--btt-ring))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--btt-ring)),
    #000 calc(100% - var(--btt-ring))
  );
}

/* ---------- core ---------- */
.as-btt__core {
  position: absolute;
  inset: calc(var(--btt-ring) + 2px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
    #0d0d14;
  box-shadow: 0 4px 12px rgba(6, 6, 20, 0.34);
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

/* ---------- arrow ---------- */
.as-btt__glyph {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.as-btt__glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.8px;
  height: 11px;
  border-radius: 1px;
  background: #fff;
  transform: translateX(-50%);
}

.as-btt__glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  border-top: 1.8px solid #fff;
  border-left: 1.8px solid #fff;
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- hover / focus ---------- */
.as-btt:hover,
.as-btt:focus-visible {
  transform: translateY(-2px) scale(1.04);
}

.as-btt:hover .as-btt__glyph,
.as-btt:focus-visible .as-btt__glyph {
  transform: translateY(-2px);
}

.as-btt:hover .as-btt__core,
.as-btt:focus-visible .as-btt__core {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
    #16162a;
  box-shadow: 0 7px 18px rgba(1, 252, 163, 0.3);
}

.as-btt:active {
  transform: translateY(0) scale(0.95);
}

.as-btt:focus-visible {
  outline: 2px solid var(--btt-accent-a);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .as-btt {
    --btt-size: 38px;
    --btt-ring: 2px;
  }
}

/* Readers who ask for less motion keep the button and the live ring —
   they just lose the travel. */
@media (prefers-reduced-motion: reduce) {
  .as-btt,
  .as-btt.is-visible,
  .as-btt:hover,
  .as-btt:focus-visible,
  .as-btt:active {
    transform: none;
    transition: opacity 0.2s linear, visibility 0s linear;
  }

  .as-btt__glyph,
  .as-btt__core {
    transition: none;
  }

  .as-btt:hover .as-btt__glyph,
  .as-btt:focus-visible .as-btt__glyph {
    transform: none;
  }
}