/* css/components/background.css */

html {
  background: #020617;
}

/* Cinematic page atmosphere */
body {
  position: relative;
  min-height: 100%;
  color: #fff;
  background:
    radial-gradient(circle at 16% 8%, rgba(56, 189, 248, 0.22), transparent 34rem),
    radial-gradient(circle at 84% 14%, rgba(168, 85, 247, 0.19), transparent 36rem),
    radial-gradient(circle at 62% 36%, rgba(251, 146, 60, 0.085), transparent 28rem),
    radial-gradient(circle at 18% 68%, rgba(14, 165, 233, 0.08), transparent 38rem),
    radial-gradient(circle at 88% 82%, rgba(99, 102, 241, 0.08), transparent 34rem),
    radial-gradient(circle at 70% 45%, rgba(255, 120, 60, 0.095), transparent 40rem),
    linear-gradient(180deg, #020617 0%, #050816 42%, #030712 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -12;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(56, 189, 248, 0.035) 34%,
      transparent 48%,
      rgba(168, 85, 247, 0.045) 64%,
      transparent 80%
    ),
    linear-gradient(
      65deg,
      transparent 0%,
      transparent 58%,
      rgba(251, 146, 60, 0.025) 72%,
      transparent 88%
    );
  mix-blend-mode: screen;
  opacity: 0.78;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -11;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 18rem),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 82px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0,
      rgba(255, 255, 255, 0.008) 1px,
      transparent 1px,
      transparent 82px
    );
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.site-background-glow {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 24%, rgba(34, 211, 238, 0.13), transparent 25rem),
    radial-gradient(circle at 88% 30%, rgba(124, 58, 237, 0.15), transparent 30rem),
    radial-gradient(circle at 74% 72%, rgba(251, 146, 60, 0.07), transparent 26rem),
    radial-gradient(circle at 28% 92%, rgba(59, 130, 246, 0.08), transparent 32rem),
    radial-gradient(circle at 52% 48%, rgba(236, 72, 153, 0.035), transparent 28rem);
  filter: blur(2px);
}

.site-background-glow::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 36%, rgba(124, 58, 237, 0.1), transparent 34rem),
    radial-gradient(circle at 78% 58%, rgba(34, 211, 238, 0.08), transparent 30rem),
    radial-gradient(circle at 56% 26%, rgba(251, 146, 60, 0.045), transparent 26rem);
  filter: blur(32px);
  opacity: 0.86;
}

.site-background-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.42) 38%, rgba(2, 6, 23, 0.82) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 80px
    );
  opacity: 0.42;
}

main > section {
  position: relative;
  isolation: isolate;
}

main > section:nth-of-type(2)::before,
main > section:nth-of-type(6)::before,
main > section:nth-of-type(8)::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 40%, rgba(124, 58, 237, 0.1), transparent 38rem),
    radial-gradient(circle at 78% 65%, rgba(34, 211, 238, 0.075), transparent 30rem),
    radial-gradient(circle at 55% 30%, rgba(251, 146, 60, 0.045), transparent 24rem);
  filter: blur(30px);
  opacity: 0.88;
}

/* Featured System (nth-of-type 5) — rebalanced: deeper violet, suppressed cyan, buried warm */
main > section:nth-of-type(5)::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 40%, rgba(108, 46, 220, 0.13), transparent 38rem),
    radial-gradient(circle at 78% 65%, rgba(34, 211, 238, 0.038), transparent 30rem),
    radial-gradient(circle at 55% 30%, rgba(168, 74, 16, 0.058), transparent 24rem),
    radial-gradient(circle at 16% 74%, rgba(122, 50, 10, 0.030), transparent 22rem);
  filter: blur(30px);
  opacity: 0.88;
}

main > section:nth-of-type(3)::after,
main > section:nth-of-type(7)::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 18%;
  z-index: -1;
  width: min(34rem, 58vw);
  height: min(34rem, 58vw);
  pointer-events: none;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.105), transparent 70%);
  filter: blur(60px);
  opacity: 0.60;
}

main > section:nth-of-type(4)::after,
main > section:nth-of-type(9)::after {
  content: "";
  position: absolute;
  left: 4%;
  bottom: 2%;
  z-index: -1;
  width: min(38rem, 66vw);
  height: min(38rem, 66vw);
  pointer-events: none;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.082), transparent 68%);
  filter: blur(64px);
  opacity: 0.82;
}

/* Value-matrix (nth 2) — bottom-exit atmospheric bleed.
   Extends the purple/cyan palette downward into the intro-strip gap, preventing
   the photography cards from ending on a hard atmospheric floor. */
main > section:nth-of-type(2)::after {
  content: "";
  position: absolute;
  inset: -8% -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 84%, rgba(34, 211, 238, 0.06), transparent 28rem),
    radial-gradient(circle at 16% 80%, rgba(124, 58, 237, 0.05), transparent 22rem);
  filter: blur(44px);
  opacity: 0.70;
}

/* Systems-preview (nth 4) — entrance atmospheric bridge.
   Fills the atmospheric gap at the section's top: the intro-strip above has an
   orange-right signature; this ::before creates warm/cyan depth at the opening of
   systems-preview, bridging the transition and warming the section's entrance.
   Extends 12% above into the inter-section gap. */
main > section:nth-of-type(4)::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 24%, rgba(251, 146, 60, 0.062), transparent 30rem),
    radial-gradient(circle at 24% 36%, rgba(56, 189, 248, 0.055), transparent 28rem);
  filter: blur(38px);
  opacity: 0.78;
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 12% 6%, rgba(56, 189, 248, 0.12), transparent 24rem),
      radial-gradient(circle at 88% 18%, rgba(168, 85, 247, 0.1), transparent 24rem),
      radial-gradient(circle at 58% 42%, rgba(251, 146, 60, 0.04), transparent 20rem),
      linear-gradient(180deg, #020617 0%, #050816 48%, #030712 100%);
  }

  body::before {
    opacity: 0.42;
  }

  body::after,
  .site-background-glow::after {
    opacity: 0.34;
  }

  main > section:nth-of-type(2)::before,
  main > section:nth-of-type(5)::before,
  main > section:nth-of-type(6)::before,
  main > section:nth-of-type(8)::before {
    inset: -8% -14%;
    opacity: 0.58;
  }
  /* Preserve mobile opacity override for featured-system */

  main > section:nth-of-type(2)::after,
  main > section:nth-of-type(4)::before {
    inset: -6% -10%;
    opacity: 0.48;
  }
}