/*
 * Sandya Networks — Lightflow v0.6.6 experiment
 * Baseline: locked v0.6.5.
 * Katalog Layanan returns to its v0.6.4 editorial composition, while its
 * HeroCurve, particle fields, and HeroWaves borrow the Homepage visual DNA.
 * Homepage, InaLite, the catalogue photo shape, and catalogue copy stay intact.
 */

.editorial-hero--catalog {
  min-height: 0;
  padding: 72px 0 15px;
  background: linear-gradient(100deg, #fff 0 44%, #eef9ff 72%, #dff4ff 100%);
  isolation: isolate;
}

.editorial-hero--catalog::before {
  z-index: 0;
  top: -70px;
  left: -210px;
  width: 760px;
  height: 720px;
  background: url("assets/signature/triangles.svg") center / 1500px auto no-repeat;
  opacity: .11;
  transform: rotate(180deg);
}

.editorial-hero--catalog::after,
.editorial-hero--catalog .editorial-hero-visual::before,
.editorial-hero--catalog .editorial-hero-visual::after {
  display: none;
}

.editorial-hero--catalog .editorial-hero-wave {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  background: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.editorial-hero--catalog .editorial-hero-wave::before,
.editorial-hero--catalog .editorial-hero-wave::after {
  position: absolute;
  content: "";
  background: url("assets/signature/wave.svg") center / contain no-repeat;
  pointer-events: none;
}

.editorial-hero--catalog .editorial-hero-wave::before {
  top: -130px;
  left: 24%;
  width: 900px;
  height: 470px;
  opacity: .5;
  transform: rotate(12deg);
}

.editorial-hero--catalog .editorial-hero-wave::after {
  right: -90px;
  bottom: 35px;
  width: 860px;
  height: 460px;
  opacity: .36;
  transform: rotate(-28deg);
}

.editorial-hero--catalog .editorial-hero-particles {
  z-index: 1;
  top: auto;
  right: -15px;
  bottom: 92px;
  left: auto;
  width: 620px;
  height: 430px;
  background: url("assets/signature/triangles.svg") center / 1180px auto no-repeat;
  opacity: .13;
  transform: rotate(2deg) scale(1.35);
  transform-origin: center;
}

.editorial-hero--catalog .editorial-hero-ring {
  position: absolute;
  z-index: 1;
  top: auto;
  right: -178px;
  bottom: 0;
  left: auto;
  display: block;
  width: 830px;
  height: 211px;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 1;
  transform: scaleX(1.12);
  transform-origin: right center;
  pointer-events: none;
}

.editorial-hero--catalog .editorial-hero-ring::before,
.editorial-hero--catalog .editorial-hero-ring::after,
.editorial-hero--catalog .editorial-hero-ring-wave {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 310px;
  content: "";
  border-radius: 75% 0 0 0 / 100% 0 0 0;
  pointer-events: none;
}

.editorial-hero--catalog .editorial-hero-ring::after {
  z-index: 0;
  background: linear-gradient(125deg, var(--blue) 0%, #1263bb 58%, var(--navy-2) 100%);
}

.editorial-hero--catalog .editorial-hero-ring::before {
  z-index: 1;
  background: url("assets/signature/triangles.svg") left 38px bottom 16px / 552px auto no-repeat;
  opacity: .3;
  filter: brightness(1.5) saturate(.76);
  mix-blend-mode: screen;
  transform: scaleX(-1);
}

.editorial-hero--catalog .editorial-hero-ring-wave {
  z-index: 1;
  display: block;
  background: url("assets/signature/wave.svg") 42% 52% / 650px auto no-repeat;
  opacity: .3;
  filter: brightness(1.5) saturate(.76);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (min-width: 901px) {
  .editorial-hero--catalog .editorial-hero-shell {
    min-height: 650px;
  }

  .editorial-hero--catalog .editorial-hero-visual {
    min-height: 650px;
  }

  .editorial-hero--catalog .editorial-photo {
    inset: 0 -8px 38px 0;
  }

  .editorial-hero--catalog .editorial-hero-badge {
    right: -12px;
    bottom: 66px;
  }
}

@media (max-width: 900px) {
  .editorial-hero--catalog {
    min-height: auto;
    padding: 48px 0 15px;
  }

  .editorial-hero--catalog::before {
    left: -300px;
    opacity: .1;
  }

  .editorial-hero--catalog .editorial-hero-particles {
    right: -90px;
    bottom: 82px;
    opacity: .11;
  }

  .editorial-hero--catalog .editorial-hero-ring {
    right: -125px;
    bottom: 0;
  }
}

@media (max-width: 620px) {
  .editorial-hero--catalog::before {
    left: -430px;
    background-size: 1250px auto;
    opacity: .09;
  }

  .editorial-hero--catalog .editorial-hero-wave::before,
  .editorial-hero--catalog .editorial-hero-wave::after {
    width: 650px;
    height: 380px;
  }

  .editorial-hero--catalog .editorial-hero-wave::before {
    left: -40px;
  }

  .editorial-hero--catalog .editorial-hero-wave::after {
    right: -300px;
    bottom: 20px;
  }

  .editorial-hero--catalog .editorial-hero-particles {
    right: -155px;
    bottom: 82px;
    width: 520px;
    height: 360px;
    opacity: .09;
  }

  .editorial-hero--catalog .editorial-hero-ring {
    right: -210px;
    bottom: 0;
    width: 720px;
    height: 175px;
  }

  .editorial-hero--catalog .editorial-hero-ring::before,
  .editorial-hero--catalog .editorial-hero-ring::after,
  .editorial-hero--catalog .editorial-hero-ring-wave {
    height: 260px;
  }
}