/* Environment only: a sibling behind the page, never a filter on its content.
   Keep existing glass surfaces and their backdrop sampling contexts untouched. */
.portfolio-ambient {
  --ambient-cool: rgba(102, 156, 168, .120);
  --ambient-blue: rgba(132, 154, 183, .090);
  --ambient-warm: rgba(206, 175, 147, .085);
  --ambient-light: rgba(255, 253, 244, .34);
  --ambient-refracted: rgba(129, 162, 170, .058);
  --ambient-grain: .022;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.portfolio-ambient::before,
.portfolio-ambient::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.portfolio-ambient::before {
  /* Overscan hides moving edges. Offscreen, elongated sources have no blob outline.
     Gentle nonuniform scaling varies the oversized light curves without repainting. */
  inset: -56px;
  background:
    radial-gradient(ellipse 110% 78% at -22% 24%, var(--ambient-cool), transparent 78%),
    radial-gradient(ellipse 105% 86% at 119% 86%, var(--ambient-warm), transparent 80%),
    radial-gradient(ellipse 88% 110% at 84% -34%, var(--ambient-blue), transparent 82%),
    radial-gradient(ellipse 145% 120% at -36% -24%, transparent 46%, var(--ambient-light) 60%, transparent 73%),
    radial-gradient(ellipse 140% 105% at 128% 122%, transparent 39%, var(--ambient-refracted) 57%, transparent 76%);
  animation: ambient-light-drift 37s ease-in-out infinite;
}
.portfolio-ambient::after {
  inset: 0;
  /* Static, seamless procedural micrograin: no animated SVG filter or canvas. */
  background: url("./assets/ambient-grain.svg") repeat;
  background-size: 384px 384px;
  opacity: var(--ambient-grain);
}
html[data-theme="dark"] .portfolio-ambient {
  --ambient-cool: rgba(84, 132, 142, .095);
  --ambient-blue: rgba(126, 121, 148, .072);
  --ambient-warm: rgba(150, 140, 124, .052);
  --ambient-light: rgba(159, 177, 187, .065);
  --ambient-refracted: rgba(95, 133, 154, .056);
  --ambient-grain: .015;
}
@keyframes ambient-light-drift {
  0%, 100% { transform: translate3d(-18px, -10px, 0) scale(1.01, 1.04); }
  50% { transform: translate3d(22px, 16px, 0) scale(1.055, 1.01); }
}
@media (max-width:760px) {
  /* Quieter on phones; keep grain at the same fine scale, not enlarged. */
  .portfolio-ambient::before { opacity: .72; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-ambient::before { animation: none; transform: none; }
}