/* ============================
   BACK TO TOP + PROGRESS RING
   Cyberpunk clean, portfolio-ready
   ============================ */

.btn-top{
  --size: 64px;
  --ring: 54px;

  position: fixed;
  right: 22px;
  bottom: 42px;
  z-index: 9999;

  width: var(--size);
  height: var(--size);

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(7, 7, 14, .68);
  backdrop-filter: blur(14px);

  box-shadow:
    0 16px 34px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,255,255,.03);

  cursor: pointer;
  user-select: none;

  display: grid;
  place-items: center;

  /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease, box-shadow .18s ease, border-color .18s ease;
}

/* visible state */
.btn-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* subtle cyber glow */
.btn-top::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  filter: blur(10px);
  background: linear-gradient(90deg,
    rgba(0,255,255,0),
    rgba(0,255,255,.22),
    rgba(255,0,200,.18),
    rgba(245,193,75,.12),
    rgba(0,255,255,0)
  );
  transition: opacity .18s ease;
}

.btn-top:hover{
  border-color: rgba(0,255,255,.22);
  box-shadow:
    0 18px 42px rgba(0,0,0,.58),
    0 0 22px rgba(0,255,255,.10);
}

.btn-top:hover::before{ opacity: 1; }

.btn-top:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 12px 26px rgba(0,0,0,.48);
}

/* content */
.btn-top__content{
  position: relative;
  display: grid;
  gap: 2px;
  place-items: center;

  font-family: "Racing Sans One", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.92);
}

.btn-top__icon{
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.btn-top__text{
  font-size: 10px;
  line-height: 1;
  opacity: .9;
}

/* Ring */
.btn-top__ring{
  position: absolute;
  width: var(--ring);
  height: var(--ring);
  transform: rotate(-90deg);
}

/* Ring background */
.btn-top__ring-bg{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3;
}

/* Progress stroke - JS updates via stroke-dashoffset */
.btn-top__ring-progress{
  fill: none;
  stroke: rgba(255, 238, 0, 0.55);
  stroke-width: 3;
  stroke-linecap: round;

  /* default values, JS sets properly too */
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;

  filter: drop-shadow(0 0 8px rgba(255, 251, 0, 0.18));
  transition: stroke-dashoffset .08s linear;
}

/* When close to top, hide ring glow a bit */
.btn-top.is-near-top .btn-top__ring-progress{
    stroke: rgba(245,193,75,.65);
    filter: drop-shadow(0 0 8px rgba(245,193,75,.18));

}

@media (max-width: 520px){
  .btn-top{
    right: 16px;
    bottom: 16px;
    --size: 52px;
    --ring: 42px;
  }
}