/* Shared animated background — landing, sign-in, sign-up */
.portal-bg-layers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.portal-bg-layers .grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background:
    linear-gradient(135deg, rgba(21, 128, 61, 0.07) 25%, transparent 25%) -24px 0/48px 48px,
    linear-gradient(225deg, rgba(21, 128, 61, 0.05) 25%, transparent 25%) -24px 0/48px 48px,
    linear-gradient(315deg, rgba(234, 179, 8, 0.06) 25%, transparent 25%) 0 0/48px 48px,
    linear-gradient(45deg, rgba(234, 179, 8, 0.04) 25%, transparent 25%) 0 0/48px 48px;
  animation: portalGridScroll 24s linear infinite;
}

.portal-bg-layers .mesh-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 10%, rgba(21, 128, 61, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 90%, rgba(234, 179, 8, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(21, 128, 61, 0.06), transparent 45%);
  animation: portalMeshPulse 12s ease-in-out infinite;
}

@keyframes portalGridScroll {
  to {
    background-position: 200px 200px, -200px -200px, 100px 100px, -100px -100px;
  }
}

@keyframes portalMeshPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.03);
  }
}

body.portal-animated-bg,
body[data-auth-page] {
  background: linear-gradient(165deg, #fafefa 0%, #f4fbf7 45%, #ecfdf5 100%);
}

body.portal-animated-bg > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

body.portal-animated-bg > main,
body.portal-animated-bg > footer,
body.portal-animated-bg > .site-footer {
  position: relative;
  z-index: 1;
}

body.portal-animated-bg > main {
  padding-top: 84px;
}

body[data-auth-page] .page-section {
  position: relative;
  z-index: 1;
}

body[data-auth-page] .page-section .grid-bg,
body[data-auth-page] .page-section > .grid-bg:not(.portal-bg-layers .grid-bg) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .portal-bg-layers .grid-bg,
  .portal-bg-layers .mesh-bg {
    animation: none;
  }
}