.fx-ambient,
.fx-sparks {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

html.fx-theme-transition .theme-backdrop::view-transition {
  pointer-events: none;
}
html.fx-theme-transition .theme-backdrop::view-transition-group(root),
html.fx-theme-transition .theme-backdrop::view-transition-old(root),
html.fx-theme-transition .theme-backdrop::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.fx-theme-transition .theme-backdrop::view-transition-old(root) { z-index: 1; }
html.fx-theme-transition .theme-backdrop::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  .fx-ambient,
  .fx-sparks { display: block; }

  .fx-ambient {
    --fx-travel: 1;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .motion-ready:not(.fx-paused) .fx-ambient { opacity: 1; }

  .fx-dust-layer {
    position: absolute;
    inset: 0;
    --dust-x: 24px;
    opacity: 0.35;
    animation: fx-drift 18s ease-in-out -5s infinite alternate;
    animation-play-state: paused;
  }
  .fx-dust-layer:nth-child(2) {
    --dust-x: -32px;
    animation-duration: 24s;
    animation-delay: -13s;
  }
  .fx-dust {
    position: absolute;
    width: var(--dust-size);
    height: var(--dust-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.55);
    opacity: var(--dust-opacity);
  }
  .fx-dust-star {
    border-radius: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  }
  .light .fx-dust {
    background: rgba(var(--accent-rgb), 0.8);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  }
  .motion-ready:not(.fx-paused) .fx-dust-layer { animation-play-state: running; }
  html.fx-theme-transition .motion-ready .fx-dust-layer { animation-play-state: paused; }

  .fx-sparks { z-index: 99998; }
  .fx-spark {
    position: absolute;
    opacity: 0;
    background: linear-gradient(135deg, #fff, var(--accent) 55%, var(--accent-2));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  }
  .fx-paused .fx-sparks { visibility: hidden; }

  @media (max-width: 959px) {
    .fx-ambient { --fx-travel: 0.5; }
    .fx-dust:nth-child(n+4) { display: none; }
  }

  @keyframes fx-drift {
    0% { opacity: 0.35; transform: translate3d(0, 18px, 0); }
    100% {
      opacity: 0.85;
      transform: translate3d(calc(var(--dust-x) * var(--fx-travel)), calc(-60px * var(--fx-travel)), 0);
    }
  }
}