/* Homepage scroll-to-top styles, isolated from the rest of the panel UI. */
#scrollWrapper { display: none; }
#scrollWrapper .scroll-top-shell.hidden { display: none; }
#scrollWrapper .hidden-opacity { opacity: 0 !important; pointer-events: none; }
#scrollWrapper #scrollTopBtn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--glyx-action-border, #2e8b70);
  border-radius: 999px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--glyx-action-fill, #14634f);
  color: var(--glyx-action-text, #effff8);
  border-color: var(--glyx-action-border, #2e8b70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
#scrollWrapper .scroll-arrow { width: 20px; height: 20px; content: url('/assets/img/panel/arrow-up.svg?v=20261012c'); filter: brightness(0) invert(1); }
#scrollWrapper #scrollTopBtn:hover {
  background: var(--glyx-action-hover, #19765e);
  color: var(--glyx-action-text, #effff8);
  border-color: var(--glyx-action-border, #2e8b70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
#scrollWrapper #scrollTopBtn:focus-visible { outline: 2px solid #dffbf2; outline-offset: 5px; }
@media (min-width: 901px) {
  #scrollWrapper { display: block; }
  #scrollWrapper .scroll-top-shell { position: fixed; bottom: 24px; right: 24px; z-index: 50; }
}
.scroll-top-shell{
  transform: translateY(18px) scale(.92);
  opacity: 0;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

.scroll-top-shell.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}


#scrollTopBtn{
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 8px rgba(var(--ui-accent-rgb, 0, 224, 164),.4),
    0 0 16px rgba(var(--ui-accent-rgb, 0, 224, 164),.2);
  isolation: isolate;
  animation: scrollTopFloat 3.2s ease-in-out infinite;
  transition:
    box-shadow .25s ease,
    transform .25s ease,
    background .25s ease,
    filter .25s ease;
}

#scrollTopBtn:hover{
  box-shadow:
    0 0 12px rgba(var(--ui-accent-rgb, 0, 224, 164),.7),
    0 0 24px rgba(var(--ui-accent-rgb, 0, 224, 164),.4);
  background: #19eab0;
  transform: translateY(-4px) scale(1.06);
  filter: saturate(1.08);
}

/* ===== SCROLL ARROW (CLEAN) ===== */

.scroll-arrow{
  position: relative;
  z-index: 2;
  transition: transform .3s ease, filter .3s ease;
}

/* hover – zostaje efekt */
#scrollTopBtn:hover .scroll-arrow{
  transform: translateY(-5px) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

.scroll-top-ring,
.scroll-top-glow{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

.scroll-top-ring{
  inset: -2px;
  border: 1px solid rgba(255,255,255,.22);
  opacity: .8;
}

.scroll-top-glow{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), transparent 32%),
    radial-gradient(circle at 70% 75%, rgba(0,127,93,.22), transparent 40%);
  z-index: 1;
}

#scrollTopBtn.bounce{
  animation:
    scrollTopFloat 3.2s ease-in-out infinite,
    scrollTopBounce .7s cubic-bezier(.34, 1.56, .64, 1);
}

#scrollTopBtn.scroll-top-active{
  animation: scrollTopLaunch .55s cubic-bezier(.22, 1, .36, 1);
}

@keyframes scrollTopFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-4px);
  }
}

@keyframes scrollTopBounce{
  0%{
    transform: translateY(0) scale(1);
  }
  35%{
    transform: translateY(-10px) scale(1.07);
  }
  70%{
    transform: translateY(2px) scale(.97);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}

@keyframes scrollTopLaunch{
  0%{
    transform: translateY(0) scale(1);
  }
  35%{
    transform: translateY(-8px) scale(1.08);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  #scrollWrapper .scroll-top-shell, #scrollWrapper #scrollTopBtn, #scrollWrapper .scroll-arrow { animation: none !important; transition: none; }
}