/* Animated gradient backgrounds for all public pages (non-home) */

body.public-site:not(.landing-site) {
  --pub-glow-a: rgba(245, 130, 12, 0.16);
  --pub-glow-b: rgba(34, 197, 94, 0.1);
  --pub-glow-c: rgba(56, 189, 248, 0.08);
  --pub-section-base: #17181B;
  --pub-section-alt: #1C1D22;
  background: var(--pub-section-base);
}

body.public-site:not(.landing-site) main > section {
  --pub-glow-a: rgba(245, 130, 12, 0.16);
  --pub-glow-b: rgba(34, 197, 94, 0.1);
  --pub-glow-c: rgba(56, 189, 248, 0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  border-top: 1px solid var(--hairline);
  background-color: var(--pub-section-base);
  background-image:
    radial-gradient(ellipse 75% 55% at 12% 8%, var(--pub-glow-a), transparent 58%),
    radial-gradient(ellipse 65% 50% at 88% 18%, var(--pub-glow-b), transparent 55%),
    radial-gradient(ellipse 80% 45% at 50% 100%, var(--pub-glow-c), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 35%, rgba(0, 0, 0, 0.18));
  background-size: 160% 160%, 150% 150%, 140% 140%, 100% 100%;
  background-position: 0% 40%, 100% 0%, 50% 100%, 0 0;
  animation: pub-mesh-drift 28s ease-in-out infinite alternate;
}

body.public-site:not(.landing-site) main > section > .wrap {
  position: relative;
  z-index: 1;
}

body.public-site:not(.landing-site) main > section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 75%);
  opacity: 0.32;
  animation: pub-grid-pan 48s linear infinite;
}

body.public-site:not(.landing-site) main > section::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  top: -12%;
  right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pub-glow-a), transparent 68%);
  filter: blur(8px);
  opacity: 0.85;
  animation: pub-orb-float 16s ease-in-out infinite;
}

body.public-site:not(.landing-site) main > section:nth-child(even) {
  --pub-glow-a: rgba(34, 197, 94, 0.12);
  --pub-glow-b: rgba(245, 130, 12, 0.14);
  --pub-glow-c: rgba(56, 189, 248, 0.1);
  background-color: var(--pub-section-alt);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

body.public-site:not(.landing-site) main > section:nth-child(even)::after {
  top: auto;
  bottom: -18%;
  right: auto;
  left: -10%;
  background: radial-gradient(circle at 60% 40%, var(--pub-glow-b), transparent 68%);
  animation-duration: 20s;
  animation-direction: reverse;
}

body.public-site:not(.landing-site) main > section:nth-child(3n)::after {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  top: 35%;
  right: 8%;
  left: auto;
  bottom: auto;
  background: radial-gradient(circle at 50% 50%, var(--pub-glow-c), transparent 70%);
  animation-duration: 22s;
}

body.public-site:not(.landing-site) main > section.hero {
  --pub-glow-a: rgba(245, 130, 12, 0.22);
  --pub-glow-b: rgba(34, 197, 94, 0.12);
  --pub-glow-c: rgba(56, 189, 248, 0.1);
  animation-duration: 24s;
}

body.public-site:not(.landing-site) main > section.hero::after {
  width: min(58vw, 600px);
  height: min(58vw, 600px);
  top: -16%;
  right: -10%;
  opacity: 1;
}

body.public-site:not(.landing-site) main > section.final-cta {
  --pub-glow-a: rgba(245, 130, 12, 0.18);
  --pub-glow-b: rgba(34, 197, 94, 0.14);
  --pub-glow-c: rgba(139, 92, 246, 0.08);
}

/* Glass cards on public pages */
body.public-site:not(.landing-site) .p-card,
body.public-site:not(.landing-site) .price-card,
body.public-site:not(.landing-site) .blog-card,
body.public-site:not(.landing-site) .faq-item,
body.public-site:not(.landing-site) .contact-card,
body.public-site:not(.landing-site) .contact-form-wrap,
body.public-site:not(.landing-site) .template-card,
body.public-site:not(.landing-site) .testi-card,
body.public-site:not(.landing-site) .philo,
body.public-site:not(.landing-site) .solution-highlights__chip,
body.public-site:not(.landing-site) .legal-content,
body.public-site:not(.landing-site) .blog-article-content {
  backdrop-filter: blur(6px);
}

body.public-site:not(.landing-site) .p-card,
body.public-site:not(.landing-site) .price-card,
body.public-site:not(.landing-site) .blog-card,
body.public-site:not(.landing-site) .faq-item,
body.public-site:not(.landing-site) .contact-card,
body.public-site:not(.landing-site) .contact-form-wrap,
body.public-site:not(.landing-site) .template-card,
body.public-site:not(.landing-site) .testi-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgba(42, 43, 48, 0.82);
}

@keyframes pub-mesh-drift {
  0% {
    background-position: 0% 40%, 100% 0%, 50% 100%, 0 0;
  }
  50% {
    background-position: 40% 10%, 60% 50%, 30% 80%, 0 0;
  }
  100% {
    background-position: 80% 60%, 20% 30%, 70% 20%, 0 0;
  }
}

@keyframes pub-grid-pan {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 56px 56px, 56px 56px;
  }
}

@keyframes pub-orb-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(-4%, 6%, 0) scale(1.08);
  }
  66% {
    transform: translate3d(5%, -4%, 0) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-site:not(.landing-site) main > section,
  body.public-site:not(.landing-site) main > section::before,
  body.public-site:not(.landing-site) main > section::after {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  body.public-site:not(.landing-site) main > section {
    background-size: 120% 120%, 120% 120%, 120% 120%, 100% 100%;
    animation-duration: 36s;
  }

  body.public-site:not(.landing-site) main > section::before {
    opacity: 0.2;
    animation-duration: 60s;
  }

  body.public-site:not(.landing-site) main > section::after {
    width: min(70vw, 360px);
    height: min(70vw, 360px);
    filter: blur(12px);
    opacity: 0.65;
  }
}