.particle-portal-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.1) contrast(1.1);
  transition: opacity 520ms ease, filter 520ms ease;
  contain: strict;
}

.particle-portal-field.is-active {
  opacity: 0.86;
}

body[data-surface="home"] .particle-portal-field.is-active {
  opacity: 0.8;
}

body[data-surface="private"] .particle-portal-field.is-active,
body[data-surface="missing"] .particle-portal-field.is-active {
  opacity: 0.88;
}

body[data-surface="tap"] .particle-portal-field.is-active {
  opacity: 0.84;
}

body[data-surface="about"] .particle-portal-field {
  z-index: 4;
  filter: saturate(1.28) contrast(1.16) brightness(1.08);
}

body[data-surface="about"] .particle-portal-field.is-active {
  opacity: 1;
}

body.has-particle-portals > header,
body.has-particle-portals > footer {
  position: relative;
  z-index: 4;
}

html[data-particle-portal-state="morphing"] .particle-portal-field {
  filter: saturate(1.22) contrast(1.16);
}

@media (max-width: 720px) {
  .particle-portal-field {
    z-index: 3;
    filter: saturate(1.3) contrast(1.18) brightness(1.08);
  }

  body.has-particle-portals > main {
    position: relative;
    z-index: 2;
  }

  .particle-portal-field.is-active {
    opacity: var(--page-mobile-particle-opacity, 0.58);
  }

  body[data-surface="home"] .particle-portal-field.is-active {
    opacity: calc(var(--page-mobile-particle-opacity, 0.58) - 0.04);
  }

  body[data-surface="private"] .particle-portal-field.is-active,
  body[data-surface="missing"] .particle-portal-field.is-active,
  body[data-surface="tap"] .particle-portal-field.is-active {
    opacity: calc(var(--page-mobile-particle-opacity, 0.58) + 0.04);
  }

  body[data-surface="about"] .particle-portal-field {
    z-index: 3;
    filter: saturate(1.38) contrast(1.22) brightness(1.12);
  }

  body[data-surface="about"] .particle-portal-field.is-active {
    opacity: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle-portal-field {
    transition: none;
    filter: saturate(0.92) contrast(1.04);
  }
}