/*
 * Styles for the Floating Icons background code component.
 *
 * The entry fade and the idle drift are CSS animations so they run on the
 * compositor with no per-frame JavaScript. Each animated element changes only
 * one property (opacity or transform) so nothing triggers layout or paint.
 *
 * Everything is scoped under .wf-floating-icons so nothing leaks onto the page.
 */

.wf-floating-icons {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Purely decorative: never intercept clicks meant for content above it. */
  pointer-events: none;
  /* Deliberately no background — the colour is the designer's to set. */
}

/* Fills the nearest positioned ancestor. */
.wf-floating-icons--layer {
  position: absolute;
  inset: 0;
}

/* Sits in normal flow and fills its container. */
.wf-floating-icons--flow {
  position: relative;
}

.wf-floating-icons *,
.wf-floating-icons *::before,
.wf-floating-icons *::after {
  box-sizing: border-box;
}

/* Outer node: sits on the ring and carries the cursor-repulsion offset, which
   JS writes as two custom properties so the transform is never re-parsed.
   The -50% pair centres the icon on the point its left/top describe. */
.wf-fi-item {
  position: absolute;
  transform: translate(-50%, -50%)
    translate3d(var(--wf-fi-dx, 0px), var(--wf-fi-dy, 0px), 0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Middle node: one-shot entry fade. Height is left to the image. */
.wf-fi-enter {
  width: 100%;
  opacity: 0;
  animation: wf-fi-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Inner node: the endless drift. Height is left to the image. */
.wf-fi-drift {
  width: 100%;
  animation: wf-fi-drift 6s ease-in-out infinite;
}

.wf-fi-glyph {
  display: block;
  width: 100%;
  /* Only the width is set anywhere, so every icon keeps its own proportions
     instead of being letterboxed into a square. */
  height: auto;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes wf-fi-enter {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wf-fi-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(6px, -8px, 0) rotate(5deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(-6px, 8px, 0) rotate(-5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Scrolled out of view: stop burning compositor time entirely. */
.wf-floating-icons--paused .wf-fi-enter,
.wf-floating-icons--paused .wf-fi-drift {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .wf-fi-item {
    transition: none;
  }
  .wf-fi-enter {
    animation: none;
    opacity: 1;
  }
  .wf-fi-drift {
    animation: none;
  }
}