/* ============================================================
   Sparkle for Divi 5 — Frontend CSS v0.0.6
   ============================================================ */

.sfd-sparkle-host {
  position: relative;
  /* overflow controlled per-element by JS via clipOverflow config */
}

/* ══════════════════════════════════════════
   STAR — 3-layer rotating (ibtn.pro style)
══════════════════════════════════════════ */
.sparkle-star {
  position: absolute; pointer-events: none; opacity: 0;
}
.sparkle-star.animate {
  animation: sfd-star-fade var(--sfd-duration,2.5s) ease-out forwards;
}
@keyframes sfd-star-fade {
  0%{opacity:0} 10%{opacity:1} 50%{opacity:1} 75%{opacity:.5} 100%{opacity:0}
}
.sparkle-star .large   { animation: sfd-large   var(--sfd-duration,2.5s) ease-out forwards; transform-origin:42.5px 42.5px; }
.sparkle-star .large-2 { animation: sfd-large-2 var(--sfd-duration,2.5s) ease-out forwards; transform-origin:42.5px 42.5px; }
.sparkle-star .small   { animation: sfd-small   var(--sfd-duration,2.5s) ease-out forwards; transform-origin:42.5px 42.5px; }
@keyframes sfd-large   { 0%{opacity:0;transform:rotate(0deg) scale(0)}   20%{opacity:1} 40%{opacity:1;transform:rotate(360deg) scale(1.5)}  100%{opacity:0;transform:rotate(360deg) scale(0)} }
@keyframes sfd-large-2 { 0%{opacity:0;transform:rotate(45deg) scale(0)}  20%{opacity:.8} 40%{opacity:.8;transform:rotate(405deg) scale(1.2)} 100%{opacity:0;transform:rotate(405deg) scale(0)} }
@keyframes sfd-small   { 0%{opacity:0;transform:rotate(0deg) scale(0)}   20%{opacity:1} 40%{opacity:1;transform:rotate(-360deg) scale(1.5)} 100%{opacity:0;transform:rotate(-360deg) scale(0)} }

/* ══════════════════════════════════════════
   DOT / SQUARE / CONFETTI — motion variants
══════════════════════════════════════════ */
.sparkle-shape {
  position: absolute; pointer-events: none; opacity: 0;
}

/* motion: sparkle (pulse + spin) */
.sparkle-shape.motion-sparkle.animate {
  animation: sfd-motion-sparkle var(--sfd-duration,2.5s) ease-out forwards;
}
@keyframes sfd-motion-sparkle {
  0%  {opacity:0;transform:scale(0) rotate(0deg)}
  15% {opacity:1;transform:scale(1.3) rotate(90deg)}
  45% {opacity:1;transform:scale(1) rotate(200deg)}
  80% {opacity:.5;transform:scale(.8) rotate(300deg)}
  100%{opacity:0;transform:scale(0) rotate(360deg)}
}

/* motion: float (gentle drift up + fade) */
/* Split into two independent animations so movement and fade never interfere */
.sparkle-shape.motion-float.animate {
  animation:
    sfd-float-move var(--sfd-duration,2.5s) ease-out forwards,
    sfd-float-fade var(--sfd-duration,2.5s) ease-in-out forwards;
}
@keyframes sfd-float-move {
  0%  { transform: translateY(0)              scale(0) }
  15% { transform: translateY(var(--sfd-t15,0px)) scale(1) }
  100%{ transform: translateY(var(--sfd-t100,0px)) scale(.8) }
}
@keyframes sfd-float-fade {
  0%  { opacity: 0 }
  15% { opacity: 1 }
  75% { opacity: 1 }
  100%{ opacity: 0 }
}

/* motion: fall (drop down + rotate) */
.sparkle-shape.motion-fall.animate {
  animation:
    sfd-fall-move var(--sfd-duration,2.5s) ease-in forwards,
    sfd-fall-fade var(--sfd-duration,2.5s) ease-in-out forwards;
}
@keyframes sfd-fall-move {
  0%  { transform: translateY(var(--sfd-t0,0px))   rotate(0deg) }
  100%{ transform: translateY(var(--sfd-t100,0px)) rotate(var(--sfd-fall-rot,180deg)) }
}
@keyframes sfd-fall-fade {
  0%  { opacity: 0 }
  12% { opacity: 1 }
  75% { opacity: 1 }
  100%{ opacity: 0 }
}

/* motion: spin (rotate in place + pulse) */
.sparkle-shape.motion-spin.animate {
  animation: sfd-motion-spin var(--sfd-duration,2.5s) ease-out forwards;
}
@keyframes sfd-motion-spin {
  0%  {opacity:0;transform:scale(0) rotate(0deg)}
  15% {opacity:1;transform:scale(1.2) rotate(120deg)}
  50% {opacity:1;transform:scale(1) rotate(360deg)}
  80% {opacity:.5;transform:scale(.9) rotate(540deg)}
  100%{opacity:0;transform:scale(0) rotate(720deg)}
}

/* ── Accessibility ── */
@media (prefers-reduced-motion:reduce) {
  .sparkle-star,.sparkle-star.animate,
  .sparkle-star .large,.sparkle-star .large-2,.sparkle-star .small,
  .sparkle-shape,.sparkle-shape.animate {
    animation:none!important; opacity:0!important;
  }
}