.bg-color-wrapper {
  position: relative;
  overflow: hidden;
}

.section-banner {
  position: relative;
  background-color: #fff;
  background-image: none;
  border-bottom-right-radius: 150px;
  overflow: hidden;
}

.hero-weave-mount {
  --hero-top-fade: 148px;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.08) calc(var(--hero-top-fade) * 0.14),
    rgba(0, 0, 0, 0.22) calc(var(--hero-top-fade) * 0.32),
    rgba(0, 0, 0, 0.48) calc(var(--hero-top-fade) * 0.55),
    rgba(0, 0, 0, 0.76) calc(var(--hero-top-fade) * 0.78),
    #000 var(--hero-top-fade)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.08) calc(var(--hero-top-fade) * 0.14),
    rgba(0, 0, 0, 0.22) calc(var(--hero-top-fade) * 0.32),
    rgba(0, 0, 0, 0.48) calc(var(--hero-top-fade) * 0.55),
    rgba(0, 0, 0, 0.76) calc(var(--hero-top-fade) * 0.78),
    #000 var(--hero-top-fade)
  );
}

.hero-weave-mount::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-top-fade);
  background: linear-gradient(
    to bottom,
    #fff 0%,
    rgba(255, 255, 255, 0.97) 12%,
    rgba(255, 255, 255, 0.88) 28%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.28) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-weave-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.section-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f2f9fe 95%);
  pointer-events: none;
  z-index: 1;
}

.section-banner .main-container.hero,
.section-banner .banner-wrapper,
.section-banner .banner-content-wrap,
.section-banner .banner-image-wrapper {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .section-banner {
    border-bottom-right-radius: 80px;
  }

  .section-banner::after {
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-weave-mount {
    display: none;
  }
}