/* Floating track & field icon background for .cd-content
   Pair this with cd-floating-icons.js.
   Color / opacity / size / speed are configurable in the JS CONFIG block,
   but sensible defaults live here too. */

/* The script adds this class to .cd-content only if it is position:static,
   so content stacks correctly above the icon layer. */
.cd-content {
  position: relative;
}

/* The icon layer sits behind the container's content but above its background. */
.cd-fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;        /* clip icons that drift past the edges */
  pointer-events: none;    /* never intercept clicks */
  z-index: 0;
}

/* Keep the real content above the icons. position:relative with no offsets
   does not change layout, it only lifts the content in the stacking order. */
.cd-content > *:not(.cd-fx-layer) {
  position: relative;
  z-index: 1;
}

/* Each individual drifting icon. */
.cd-fx-icon {
  position: absolute;
  top: 0;
  left: 0;
  color: #000;             /* SVGs use currentColor, so this sets the ink */
  opacity: 0.06;           /* low opacity; overridden by JS CONFIG.opacity */
  pointer-events: none;
  will-change: transform;
}

.cd-fx-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Respect users who prefer no motion: the JS stops animating, icons stay put. */
@media (prefers-reduced-motion: reduce) {
  .cd-fx-icon {
    will-change: auto;
  }
}