.candinder-hearts {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  z-index:0; contain:layout paint; opacity:1; transition:opacity .35s ease;
  --heart-opacity:.44; --heart-start:880px; --heart-duration:25s;
  --heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C43 87 6 62 4 35C2 12 29 2 43 18L50 26L57 18C71 2 98 12 96 35C94 62 57 87 50 94Z' fill='black'/%3E%3C/svg%3E");
}
.candinder-hearts[data-hidden="true"] { opacity:0; }
.candinder-heart-flight {
  position:absolute; top:0; width:102px; aspect-ratio:1;
  animation:candinder-heart-rise var(--heart-duration) linear infinite;
  opacity:0; transform:translate3d(0,var(--heart-start),0);
}
.candinder-hearts[data-paused="true"] .candinder-heart-flight { animation-play-state:paused; }
.candinder-heart-shell {
  position:absolute; inset:0; padding:3px; background:#f4a4b6;
  -webkit-mask-image:var(--heart-mask); mask-image:var(--heart-mask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.candinder-heart-photo {
  position:absolute; inset:3px; background:#fff8fa; overflow:hidden;
  -webkit-mask-image:var(--heart-mask); mask-image:var(--heart-mask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.candinder-heart-photo img {
  position:absolute; display:block;
  width:var(--portrait-width,100%); height:var(--portrait-height,100%);
  left:var(--portrait-left,0%); top:var(--portrait-top,0%);
  max-width:none; object-fit:fill;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 84%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.candinder-heart-photo::before {
  content:""; position:absolute; inset:-12px;
  background-image:var(--portrait-image); background-size:cover; background-position:center 30%;
  filter:blur(9px); opacity:.5;
}
@keyframes candinder-heart-rise {
  0% { transform:translate3d(0,var(--heart-start),0) rotate(calc(var(--heart-angle) * -1)); opacity:0; }
  10% { opacity:var(--heart-opacity); }
  30% { transform:translate3d(var(--heart-sway),calc(var(--heart-start) * .62),0) rotate(var(--heart-angle)); }
  65% { transform:translate3d(calc(var(--heart-sway) * -.5),calc(var(--heart-start) * .2),0) rotate(calc(var(--heart-angle) * -.5)); }
  88% { opacity:var(--heart-opacity); }
  100% { transform:translate3d(var(--heart-sway),-125px,0) rotate(var(--heart-angle)); opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  .candinder-hearts { display:none; transition:none; }
  .candinder-heart-flight { animation:none; }
}