.gradual-blur-host {
  overflow: hidden;
}

.gradual-blur {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--gb-height, 86px);
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  transition: opacity .28s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.gradual-blur > span {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--gb-blur));
  backdrop-filter: blur(var(--gb-blur));
  -webkit-mask-image: linear-gradient(to bottom,
    transparent calc(var(--gb-start) - 12%),
    #000 var(--gb-start),
    #000 var(--gb-end),
    transparent calc(var(--gb-end) + 12%));
  mask-image: linear-gradient(to bottom,
    transparent calc(var(--gb-start) - 12%),
    #000 var(--gb-start),
    #000 var(--gb-end),
    transparent calc(var(--gb-end) + 12%));
}

.ag-panel__frame > .gradual-blur {
  --gb-height: 42%;
  z-index: 1;
  opacity: 0;
  transform: translateY(28%);
  background: linear-gradient(to bottom, transparent 2%, rgba(7, 2, 18, .4));
}

.ag-panel__frame.gb-scroll-active > .gradual-blur {
  opacity: 1;
}

.ag-panel__frame.gb-scroll-active.gb-scroll-down > .gradual-blur {
  transform: translateY(-8%);
}

.ag-panel__frame.gb-scroll-active.gb-scroll-up > .gradual-blur {
  transform: translateY(16%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gradual-blur {
    background: linear-gradient(to bottom, transparent, rgba(10, 4, 24, .32));
  }
  .gradual-blur > span { display: none; }
}

@media (max-width: 520px) {
  .ag-panel__frame > .gradual-blur {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradual-blur {
    display: none;
    transition: none;
  }
}