/* 24-scroll-top.css — IVILove — floating scroll progress button */

.iviScrollTop {
  --scroll-progress: 0deg;
  --scroll-scale: 1;
  --scroll-border-alpha: 0.16;
  --scroll-bg-alpha: 0.66;

  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  left: auto;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 80;

  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: #202020;
  background: transparent;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(12px) scale(var(--scroll-scale));
  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .24s ease;
}

.iviScrollTop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(var(--scroll-scale));
}

.iviScrollTop__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    conic-gradient(
      #ff4d4d var(--scroll-progress),
      rgba(32, 32, 32, 0.10) 0
    );

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  transition:
    box-shadow .24s ease,
    filter .24s ease;
}

.iviScrollTop__ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(var(--scroll-bg-alpha) + 0.18)),
      rgba(255, 255, 255, var(--scroll-bg-alpha))
    );

  border: 1px solid rgba(32, 32, 32, var(--scroll-border-alpha));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    inset .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.iviScrollTop__icon {
  position: relative;
  z-index: 2;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #202020;
  background: rgba(255, 255, 255, 0.44);

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.iviScrollTop__icon i {
  font-size: 28px;
  line-height: 1;
}

.iviScrollTop:hover .iviScrollTop__ring {
  filter: saturate(1.08);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.iviScrollTop:hover .iviScrollTop__icon {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.68);
  color: #ff4d4d;
}

.iviScrollTop:active .iviScrollTop__icon {
  transform: translateY(0) scale(0.94);
}

/* Когда страница почти внизу: круг плотнее, бордер компактнее */
.iviScrollTop.is-deep .iviScrollTop__ring::before {
  inset: 6px;
}

/* Dark templates support */
html[data-dark="1"] .iviScrollTop {
  color: #f3f3f3;
}

html[data-dark="1"] .iviScrollTop__ring {
  background:
    conic-gradient(
      #ff7a7a var(--scroll-progress),
      rgba(255, 255, 255, 0.14) 0
    );
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html[data-dark="1"] .iviScrollTop__ring::before {
  background:
    linear-gradient(
      180deg,
      rgba(28, 28, 28, 0.82),
      rgba(18, 18, 18, 0.72)
    );
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-dark="1"] .iviScrollTop__icon {
  color: #f3f3f3;
  background: rgba(255, 255, 255, 0.06);
}

html[data-dark="1"] .iviScrollTop:hover .iviScrollTop__icon {
  color: #ff8a8a;
  background: rgba(255, 255, 255, 0.10);
}

@media (max-width: 640px) {
  .iviScrollTop {
    right: max(14px, env(safe-area-inset-right));
    left: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }

  .iviScrollTop__icon {
    width: 34px;
    height: 34px;
  }

  .iviScrollTop__icon i {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iviScrollTop,
  .iviScrollTop__ring,
  .iviScrollTop__ring::before,
  .iviScrollTop__icon {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}