.project-card.has-particle-layer {
  isolation: isolate;
}

.project-particle-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.52;
  mix-blend-mode: screen;
  transition: opacity 320ms ease;
}

.project-card.has-particle-layer:hover .project-particle-layer,
.project-card.has-particle-layer:focus-within .project-particle-layer {
  opacity: 0.88;
}

/* Keep the decorative canvas behind every meaningful card control. */
.project-card.has-particle-layer > .project-content,
.project-card.has-particle-layer > .project-number,
.project-card.has-particle-layer > .project-icon,
.project-card.has-particle-layer > .project-topline,
.project-card.has-particle-layer > h3,
.project-card.has-particle-layer > p,
.project-card.has-particle-layer > .tag-list,
.project-card.has-particle-layer > .project-detail-button,
.project-card.has-particle-layer > .wide-index,
.project-card.has-particle-layer > .wide-copy,
.project-card.has-particle-layer > .wide-graph {
  z-index: 2;
}

.project-card.has-particle-layer > .project-visual {
  z-index: auto;
}

.project-card.has-particle-layer .visual-label,
.project-card.has-particle-layer .visual-caption,
.project-card.has-particle-layer .orbit-tag {
  z-index: 2;
}

[data-theme="light"] .project-particle-layer {
  opacity: 0.34;
  mix-blend-mode: multiply;
}

[data-theme="light"] .project-card.has-particle-layer:hover .project-particle-layer,
[data-theme="light"] .project-card.has-particle-layer:focus-within .project-particle-layer {
  opacity: 0.54;
}

@media (max-width: 760px), (pointer: coarse) {
  .project-particle-layer {
    opacity: 0.3;
  }

  .project-card.has-particle-layer:hover .project-particle-layer,
  .project-card.has-particle-layer:focus-within .project-particle-layer {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-particle-layer,
  .project-card.has-particle-layer:hover .project-particle-layer,
  .project-card.has-particle-layer:focus-within .project-particle-layer {
    opacity: 0.24;
    transition: none;
  }
}

/* Pause decorative timelines when a card is offscreen or the device asks for
   the static, lower-power experience. The product scenes remain fully visible. */
html.card-effects-static .project-card.has-particle-layer .project-visual,
html.card-effects-static .project-card.has-particle-layer .project-visual *,
.project-card.has-particle-layer:not(.is-card-fx-visible) .project-visual,
.project-card.has-particle-layer:not(.is-card-fx-visible) .project-visual * {
  animation-play-state: paused !important;
}