.fn-stage {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.fn-char {
  position: absolute;
  width: clamp(110px, 14vw, 190px);
  opacity: 0.92;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

.fn-char img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

.fn-char--a {
  top: 14%;
  left: 1%;
  animation: fn-float-a 7s ease-in-out infinite;
}

.fn-char--b {
  top: 38%;
  right: 1%;
  animation: fn-float-b 8s ease-in-out infinite;
}

.fn-char--c {
  bottom: 10%;
  left: 4%;
  width: clamp(100px, 12vw, 170px);
  animation: fn-float-c 6.5s ease-in-out infinite;
}

.fn-char--d {
  top: 18%;
  right: 10%;
  width: clamp(96px, 11vw, 160px);
  animation: fn-float-d 9s ease-in-out infinite;
}

.fn-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--fn-yellow);
  opacity: 0.75;
  animation: fn-spark 4s linear infinite;
}

.fn-spark--1 {
  top: 30%;
  left: 18%;
}

.fn-spark--2 {
  top: 60%;
  right: 20%;
  background: var(--fn-blue);
  animation-delay: -1.4s;
}

.fn-spark--3 {
  bottom: 24%;
  left: 40%;
  background: var(--green);
  animation-delay: -2.2s;
}

@keyframes fn-float-a {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-18px) rotate(2deg);
  }
}

@keyframes fn-float-b {
  0%,
  100% {
    transform: translateY(0) rotate(4deg);
  }
  50% {
    transform: translateY(-22px) rotate(-3deg);
  }
}

@keyframes fn-float-c {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(-14px) rotate(-2deg);
  }
}

@keyframes fn-float-d {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

@keyframes fn-spark {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-28px) scale(1.2);
    opacity: 0.85;
  }
}

@media (max-width: 900px) {
  .fn-char--c,
  .fn-char--d,
  .fn-spark {
    display: none;
  }

  .fn-char {
    width: clamp(84px, 22vw, 130px);
    opacity: 0.7;
  }
}