.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; }

   
  .avatar-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(transparent 0deg 100deg, var(--accent-2) 145deg,
      #fff 180deg, var(--accent) 205deg, transparent 245deg);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    animation: fx-orbit 1.8s linear infinite;
    animation-play-state: paused;
  }
  body:not(.fx-paused) .avatar-wrap:focus-visible::after {
    opacity: 1;
    animation-play-state: running;
  }
  @media (hover: hover) and (pointer: fine) {
    body:not(.fx-paused) .avatar-wrap:hover::after {
      opacity: 1;
      animation-play-state: running;
    }
  }

  @media (min-width: 960px) and (hover: hover) and (pointer: fine) {
    .card { rotate: 0deg; }
    body:not(.fx-paused) .card.active:not(.tall):hover {
      rotate: var(--fx-tilt, 0deg);
    }
  }

  @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);
    }
  }
  @keyframes fx-orbit {
    to { transform: rotate(360deg); }
  }
}