/* Shared Aleja public ambient visual effects */

.public-ambient-section {
  background: transparent;
}

.public-section-lighting {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--public-light-overlap));
  bottom: calc(-1 * var(--public-light-overlap));
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

.public-section-network-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.public-section-network-canvas--top-border {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 97%,
    transparent 100%
  );
}

.public-section-readability {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.public-section-content {
  position: relative;
  z-index: 3;
}

.public-section-lighting--features {
  background:
    radial-gradient(ellipse 85% 65% at 0% 0%, rgb(117 222 213 / 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 75% 60% at 100% 100%, rgb(39 184 176 / 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 50% 45%, rgb(6 40 61 / 0.12) 0%, transparent 65%);
}

.public-section-lighting--showcase {
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgb(39 184 176 / 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 48% 55% at 20% 62%, rgb(117 222 213 / 0.15) 0%, transparent 56%),
    radial-gradient(ellipse 48% 55% at 80% 62%, rgb(216 203 181 / 0.12) 0%, transparent 56%);
}

.public-section-lighting--pricing {
  background:
    radial-gradient(ellipse 48% 58% at 50% 58%, rgb(39 184 176 / 0.17) 0%, transparent 62%),
    radial-gradient(ellipse 32% 38% at 90% 18%, rgb(117 222 213 / 0.08) 0%, transparent 52%);
}

.public-section-lighting--process {
  background:
    radial-gradient(ellipse 52% 72% at 6% 50%, rgb(117 222 213 / 0.14) 0%, transparent 56%),
    radial-gradient(ellipse 46% 62% at 50% 50%, rgb(39 184 176 / 0.1) 0%, transparent 58%),
    radial-gradient(ellipse 52% 72% at 94% 50%, rgb(6 40 61 / 0.14) 0%, transparent 56%);
}

.public-section-lighting--faq {
  background:
    radial-gradient(ellipse 42% 48% at 96% 6%, rgb(39 184 176 / 0.08) 0%, transparent 54%),
    radial-gradient(ellipse 42% 48% at 4% 94%, rgb(117 222 213 / 0.07) 0%, transparent 54%);
}

.public-section-lighting--cta {
  background:
    radial-gradient(ellipse 58% 52% at 40% 46%, rgb(39 184 176 / 0.17) 0%, transparent 58%),
    radial-gradient(ellipse 58% 52% at 60% 46%, rgb(117 222 213 / 0.15) 0%, transparent 58%),
    radial-gradient(ellipse 62% 58% at 50% 50%, rgb(3 26 43 / 0.12) 0%, transparent 66%);
}

.public-section-lighting--contact-main {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgb(117 222 213 / 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 75% 45%, rgb(39 184 176 / 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 45% 50% at 65% 50%, rgb(6 40 61 / 0.1) 0%, transparent 60%);
}

.public-section-lighting--contact-followup {
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgb(39 184 176 / 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 40% 45% at 95% 10%, rgb(117 222 213 / 0.06) 0%, transparent 52%),
    radial-gradient(ellipse 40% 45% at 5% 90%, rgb(117 222 213 / 0.05) 0%, transparent 52%);
}

@media (prefers-reduced-motion: reduce) {
  .public-section-network-canvas {
    display: none;
  }
}