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

.sfd-sparkle-host {
  position: relative;
}
/* clip-path set by JS — overrides Divi builder hover styles and wrapper transforms */
.sfd-sparkle-host.sfd-clipped {
  clip-path: inset(0) !important;
}

/* ══════════════════════════════════════════
   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) */
/* motion: sparkle (flash in, scale pulse, fade — no rotation) */
.sparkle-shape.motion-sparkle.animate {
  animation:
    sfd-sparkle-scale var(--sfd-duration,2.5s) ease-out forwards,
    sfd-sparkle-fade  var(--sfd-duration,2.5s) ease-in-out forwards;
}
@keyframes sfd-sparkle-scale {
  0%   { transform: scale(0) }
  20%  { transform: scale(1.4) }
  50%  { transform: scale(1.0) }
  80%  { transform: scale(1.1) }
  100% { transform: scale(0) }
}
@keyframes sfd-sparkle-fade {
  0%   { opacity: 0 }
  15%  { opacity: 1 }
  70%  { opacity: 1 }
  100% { opacity: 0 }
}

/* 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 + fade) */
.sparkle-shape.motion-spin.animate {
  animation:
    sfd-spin-rotate var(--sfd-duration,2.5s) ease-out forwards,
    sfd-spin-fade   var(--sfd-duration,2.5s) ease-in-out forwards;
}
@keyframes sfd-spin-rotate {
  0%   { transform: scale(0) rotate(0deg) }
  15%  { transform: scale(1.2) rotate(120deg) }
  50%  { transform: scale(1.0) rotate(360deg) }
  80%  { transform: scale(0.9) rotate(540deg) }
  100% { transform: scale(0) rotate(720deg) }
}
@keyframes sfd-spin-fade {
  0%   { opacity: 0 }
  15%  { opacity: 1 }
  75%  { opacity: 1 }
  100% { opacity: 0 }
}



/* ══ float-spin / fall-spin — two-layer architecture ══
   Base rules — must come before the animation classes */
.sfd-combo-outer {
  position:       absolute;
  pointer-events: none;
  opacity:        0;          /* starts invisible; fade keyframe reveals it */
}
.sfd-combo-inner {
  width:    100%;
  height:   100%;
  display:  block;
  opacity:  1 !important;  /* outer handles fade; inner must stay fully opaque */
  position: relative;      /* override sparkle-shape position:absolute */
}

/* ══ float-spin / fall-spin — two-layer architecture ══
   The CSS transform property can only be driven by ONE animation at a time.
   Combining translateY + rotate in a single animation class causes only the
   last animation to win. Solution: two nested divs — outer carries movement
   and fade, inner carries rotation. They never share transform ownership.

   Outer wrapper:  .sfd-combo-outer  → translateY + fade
   Inner spinner:  .sfd-combo-inner  → rotate (continuous)
*/

/* Outer: movement only — translate, no rotate */
.sfd-combo-outer.motion-float-spin.animate {
  animation:
    sfd-floatspin-move var(--sfd-move-dur, 2.5s) ease-out     forwards,
    sfd-floatspin-fade var(--sfd-move-dur, 2.5s) ease-in-out  forwards;
}
@keyframes sfd-floatspin-move {
  0%   { transform: translateY(0)                        }
  15%  { transform: translateY(var(--sfd-t15,  -6px))   }
  100% { transform: translateY(var(--sfd-t100, -60px))  }
}
@keyframes sfd-floatspin-fade {
  0%   { opacity: 0 } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

.sfd-combo-outer.motion-fall-spin.animate {
  animation:
    sfd-fallspin-move  var(--sfd-move-dur, 2.5s) ease-in      forwards,
    sfd-fallspin-fade  var(--sfd-move-dur, 2.5s) ease-in-out  forwards;
}
@keyframes sfd-fallspin-move {
  0%   { transform: translateY(var(--sfd-t0,    0px)) }
  100% { transform: translateY(var(--sfd-t100, 60px)) }
}
@keyframes sfd-fallspin-fade {
  0%   { opacity: 0 } 12% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

/* Inner: rotation only — no translate, no opacity */
.sfd-combo-inner.animate {
  animation: sfd-combo-spin var(--sfd-spin-dur, 1.0s) linear infinite;
}
@keyframes sfd-combo-spin {
  from { transform: rotate(0deg)   }
  to   { transform: rotate(360deg) }
}

/* ── 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;
  }
}