/* ================================================================
   FORTUNESPACE PROFILE PHOTO DELIGHT V1
   Fortune Profile Spark

   Presentation only.
   Does not control or modify follower counting.
   ================================================================ */

#lightbox.fs-profile-spark-active {
  overflow: hidden;
}

/*
 * Very short premium halo around the opened profile picture.
 */
#lightbox.fs-profile-spark-active .lightbox__img {
  animation:
    fs-profile-photo-glow
    900ms
    cubic-bezier(.2,.8,.2,1)
    both;
}


/*
 * Particle layer sits above the backdrop but never captures input.
 */
.fs-profile-spark-layer {
  position: fixed;
  inset: 0;

  z-index: 3;

  pointer-events: none;

  overflow: hidden;
}


/*
 * Individual sparkle.
 *
 * Position and travel values are supplied by the tiny isolated JS file.
 */
.fs-profile-spark-particle {
  position: fixed;

  left: var(--fs-spark-x);
  top: var(--fs-spark-y);

  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  margin:
    -12px
    0
    0
    -12px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 900;

  line-height: 1;

  opacity: 0;

  transform:
    translate3d(0,0,0)
    scale(.45);

  animation:
    fs-profile-spark-float
    var(--fs-spark-duration, 820ms)
    cubic-bezier(.17,.84,.32,1)
    var(--fs-spark-delay, 0ms)
    forwards;

  will-change:
    transform,
    opacity;
}


/*
 * FortuneSpace green sparkle.
 */
.fs-profile-spark-particle--green {
  color: #22c55e;

  text-shadow:
    0 0 7px rgba(34,197,94,.65),
    0 0 15px rgba(34,197,94,.28);
}


/*
 * Warm premium gold.
 */
.fs-profile-spark-particle--gold {
  color: #f2c94c;

  text-shadow:
    0 0 7px rgba(242,201,76,.68),
    0 0 15px rgba(242,201,76,.30);
}


/*
 * Hearts are deliberately fewer and softer than the sparkles.
 */
.fs-profile-spark-particle--heart {
  color: #ffffff;

  font-size: 18px;

  text-shadow:
    0 0 8px rgba(34,197,94,.70),
    0 0 16px rgba(242,201,76,.36);
}


@keyframes fs-profile-photo-glow {

  0% {
    filter:
      drop-shadow(0 0 0 rgba(34,197,94,0));

    transform:
      scale(.985);
  }

  36% {
    filter:
      drop-shadow(0 0 10px rgba(34,197,94,.28))
      drop-shadow(0 0 18px rgba(242,201,76,.16));

    transform:
      scale(1.006);
  }

  100% {
    filter:
      drop-shadow(0 0 0 rgba(34,197,94,0));

    transform:
      scale(1);
  }
}


@keyframes fs-profile-spark-float {

  0% {
    opacity: 0;

    transform:
      translate3d(0,8px,0)
      scale(.40)
      rotate(-8deg);
  }

  18% {
    opacity: .96;
  }

  62% {
    opacity: .86;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--fs-spark-dx),
        var(--fs-spark-dy),
        0
      )
      scale(1.10)
      rotate(var(--fs-spark-rotate, 12deg));
  }
}


/*
 * Reduced-motion visitors receive only a subtle halo.
 */
@media (prefers-reduced-motion: reduce) {

  .fs-profile-spark-layer {
    display: none !important;
  }

  #lightbox.fs-profile-spark-active .lightbox__img {
    animation:
      fs-profile-photo-glow-reduced
      260ms
      ease-out
      both;
  }

  @keyframes fs-profile-photo-glow-reduced {

    from {
      opacity: .88;
    }

    to {
      opacity: 1;
    }
  }
}

/* END FORTUNESPACE PROFILE PHOTO DELIGHT V1 */