/* Module-specific visual language shared by the six individual product pages. */
.module-page {
  --accent: var(--module-color);
  --module-art-opacity: 0.25;
}

.module-page.module-eq {
  --module-color: #bfff97;
  --module-glow: rgba(191, 255, 151, 0.08);
  --module-art: url("module-svgs/BLOX_MODULE__EQ.svg");
}

.module-page.module-exciter {
  --module-color: #ff6868;
  --module-glow: rgba(255, 104, 104, 0.08);
  --module-art: url("module-svgs/BLOX_MODULE__EXCITER.svg");
}

.module-page.module-reverb {
  --module-color: #ce97ff;
  --module-glow: rgba(206, 151, 255, 0.08);
  --module-art: url("module-svgs/BLOX_MODULE__REVERB.svg");
}

.module-page.module-delay {
  --module-color: #ffe500;
  --module-glow: rgba(255, 229, 0, 0.07);
  --module-art: url("module-svgs/BLOX_MODULE__DELAY.svg");
}

.module-page.module-chorus {
  --module-color: #ff5cbe;
  --module-glow: rgba(255, 92, 190, 0.08);
  --module-art: url("module-svgs/BLOX_MODULE__CHORUS.svg");
}

.module-page.module-comp {
  --module-color: #78fffb;
  --module-glow: rgba(120, 255, 251, 0.08);
  --module-art: url("module-svgs/BLOX_MODULE__COMP.svg");
}

/* Let the module's own panel artwork frame the hero, like an expanded rack faceplate. */
.module-page .plugin-section {
  isolation: isolate;
  background:
    radial-gradient(760px circle at 50% 38%, var(--module-glow), transparent 64%),
    radial-gradient(900px circle at 90% 0%, rgba(59, 130, 246, 0.1), transparent 58%),
    linear-gradient(180deg, #030712 0%, #0a1128 100%);
}

/* Blend each module accent into the existing purple/navy page atmosphere. */
.module-page .testimonials-section {
  background:
    radial-gradient(
      900px circle at 50% 0%,
      color-mix(in srgb, var(--module-color) 13%, transparent),
      transparent 62%
    ),
    linear-gradient(180deg, #05050a 0%, #0a0a12 100%);
}

.module-page .how-it-works-section {
  background:
    radial-gradient(
      900px circle at 78% 100%,
      color-mix(in srgb, var(--module-color) 13%, transparent),
      transparent 62%
    ),
    radial-gradient(
      760px circle at 12% 10%,
      rgba(124, 58, 237, 0.08),
      transparent 62%
    ),
    linear-gradient(180deg, #0a0a12 0%, #0d0a14 100%);
}

.module-page #features.feature-section {
  background:
    radial-gradient(
      1100px circle at 18% 0%,
      color-mix(in srgb, var(--module-color) 17%, transparent),
      transparent 61%
    ),
    radial-gradient(
      900px circle at 88% 68%,
      rgba(124, 58, 237, 0.1),
      transparent 64%
    ),
    linear-gradient(180deg, #0d0a14 0%, #120f1f 100%);
}

.module-page .plugin-section::before,
.module-page .plugin-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10%;
  bottom: -10%;
  width: clamp(360px, 48vw, 720px);
  background-image: var(--module-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  opacity: var(--module-art-opacity);
  pointer-events: none;
  filter: saturate(1.08);
}

.module-page .plugin-section::before {
  left: clamp(-430px, -28vw, -190px);
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at left center, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 88% 80% at left center, #000 26%, transparent 78%);
}

.module-page .plugin-section::after {
  right: clamp(-430px, -28vw, -190px);
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at right center, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 88% 80% at right center, #000 26%, transparent 78%);
}

/* EQ's contour artwork needs a closer, quieter hero crop. */
.module-page.module-eq .plugin-section::before,
.module-page.module-eq .plugin-section::after {
  top: -22%;
  bottom: -22%;
  width: clamp(540px, 68vw, 980px);
  opacity: 0.08;
}

.module-page.module-eq .plugin-section::before {
  left: clamp(-390px, -22vw, -220px);
  -webkit-mask-image: radial-gradient(ellipse 105% 92% at left center, #000 42%, transparent 91%);
  mask-image: radial-gradient(ellipse 105% 92% at left center, #000 42%, transparent 91%);
}

.module-page.module-eq .plugin-section::after {
  right: clamp(-390px, -22vw, -220px);
  -webkit-mask-image: radial-gradient(ellipse 105% 92% at right center, #000 42%, transparent 91%);
  mask-image: radial-gradient(ellipse 105% 92% at right center, #000 42%, transparent 91%);
}

.module-page .plugin-section > * {
  position: relative;
  z-index: 1;
}

.module-page .hero-tagline strong {
  color: rgba(255, 255, 255, 0.88) !important;
}

.module-page .detail-kicker {
  color: var(--module-color) !important;
}

.module-page .plugin-card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.module-page .hero-image-wrap--module::before {
  background: radial-gradient(ellipse, var(--module-glow), transparent 70%);
  opacity: 0.55;
}

.module-page .btn-ghost {
  border-color: color-mix(in srgb, var(--module-color) 48%, transparent);
}

/* Keep account controls in Pine DSP's brand cyan, not the module accent. */
.module-page .nav-btn-signin {
  border-color: #06b6d4;
  color: #06b6d4;
}

.module-page .nav-btn-signin:hover {
  background: #06b6d4;
  color: #fff;
}

/* Continue the same artwork through the page as a restrained watermark. */
.module-page .testimonials-section,
.module-page .how-it-works-section,
.module-page .feature-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.module-page .testimonials-section::before,
.module-page .how-it-works-section::before,
.module-page .feature-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  bottom: -18%;
  width: clamp(360px, 48vw, 720px);
  background-image: var(--module-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  opacity: 0.08;
  pointer-events: none;
}

.module-page .testimonials-section::before,
.module-page .feature-section::before {
  right: clamp(-430px, -28vw, -190px);
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at right center, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 88% 80% at right center, #000 26%, transparent 78%);
}

.module-page .how-it-works-section::before {
  left: clamp(-430px, -28vw, -190px);
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at left center, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 88% 80% at left center, #000 26%, transparent 78%);
}

/*
 * Below the existing opening arrangement, use a much closer crop of the
 * same artwork. The opacity intentionally matches the first scrolled
 * section; only the scale and off-canvas position change.
 */
.module-page .how-it-works-section::before,
.module-page .feature-section::before {
  top: -42%;
  bottom: -42%;
  width: clamp(680px, 74vw, 1120px);
  opacity: 0.07;
}

.module-page .how-it-works-section::before {
  left: clamp(-300px, -18vw, -160px);
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at left center, #000 46%, transparent 92%);
  mask-image: radial-gradient(ellipse 110% 95% at left center, #000 46%, transparent 92%);
}

.module-page .feature-section::before {
  right: clamp(-300px, -18vw, -160px);
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at right center, #000 46%, transparent 92%);
  mask-image: radial-gradient(ellipse 110% 95% at right center, #000 46%, transparent 92%);
}

.module-page .testimonials-section > *,
.module-page .how-it-works-section > *,
.module-page .feature-section > * {
  position: relative;
  z-index: 1;
}

/* Carry the faint, close-cropped faceplate through the final page area. */
.module-page .footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Remove the base accent orb that otherwise sits behind the newsletter. */
.module-page .footer::after {
  display: none;
}

.module-page .footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -110%;
  bottom: -110%;
  left: clamp(-300px, -18vw, -160px);
  width: clamp(680px, 74vw, 1120px);
  background: var(--module-art) center / 100% auto no-repeat;
  opacity: 0.07;
  transform: scaleX(-1);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at left center, #000 46%, transparent 92%);
  mask-image: radial-gradient(ellipse 110% 95% at left center, #000 46%, transparent 92%);
}

.module-page .footer > * {
  position: relative;
  z-index: 1;
}

.module-page .testimonial-card:hover {
  border-color: color-mix(in srgb, var(--module-color) 48%, transparent);
}

.module-page .detail-img-wrap--module {
  position: relative;
}

.module-page .detail-img-wrap--module::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34px -70px;
  background: var(--module-art) center / auto 96% no-repeat;
  opacity: 0.08;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse, #000 32%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 32%, transparent 74%);
}

.module-page .detail-img-wrap--module img {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .module-page {
    --module-art-opacity: 0.18;
  }

  .module-page .plugin-section::before,
  .module-page .plugin-section::after {
    top: 4%;
    bottom: 4%;
    width: 78vw;
    background-size: 100% auto;
  }

  .module-page .plugin-section::before {
    left: -56vw;
  }

  .module-page .plugin-section::after {
    right: -56vw;
  }

  .module-page.module-eq .plugin-section::before,
  .module-page.module-eq .plugin-section::after {
    top: -10%;
    bottom: -10%;
    width: 110vw;
    opacity: 0.055;
  }

  .module-page.module-eq .plugin-section::before {
    left: -68vw;
  }

  .module-page.module-eq .plugin-section::after {
    right: -68vw;
  }

  .module-page .testimonials-section::before,
  .module-page .how-it-works-section::before,
  .module-page .feature-section::before {
    width: 78vw;
    opacity: 0.055;
  }

  .module-page .testimonials-section::before,
  .module-page .feature-section::before {
    right: -56vw;
  }

  .module-page .how-it-works-section::before {
    left: -48vw;
  }

  .module-page .how-it-works-section::before,
  .module-page .feature-section::before {
    top: -32%;
    bottom: -32%;
    width: 124vw;
    opacity: 0.05;
  }

  .module-page .feature-section::before {
    right: -48vw;
  }

  .module-page .footer::before {
    top: -100%;
    bottom: -100%;
    left: -48vw;
    width: 124vw;
    opacity: 0.05;
  }

  .module-page .detail-img-wrap--module::before {
    inset: -22px -38px;
    opacity: 0.07;
  }

}

@media (prefers-reduced-motion: reduce) {
  .module-page .plugin-section::before,
  .module-page .plugin-section::after {
    filter: none;
  }
}