.split-img-full .split-img-full-magic {
transform-origin: 55% 60%;
animation: split-img-full-magic-float 4.5s ease-in-out infinite;
}
.split-img-full .split-img-full-sparkles {
overflow: visible;
}
.split-img-full .split-img-full-sparkle {
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
transform-origin: center;
filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor);
}
.split-img-full .split-img-full-sparkle::before, .split-img-full .split-img-full-sparkle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: currentColor;
transform: translate(-50%, -50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.split-img-full .split-img-full-sparkle::before {
width: 24%;
height: 100%;
}
.split-img-full .split-img-full-sparkle::after {
width: 100%;
height: 24%;
}
.split-img-full .split-img-full-sparkle--trail {
opacity: 0;
animation: split-img-full-sparkle-fall ease-out forwards;
}
@keyframes split-img-full-magic-float {
0% {
transform: translate3d(0, 0, 0) rotate(-2deg);
}
50% {
transform: translate3d(0, -10px, 0) rotate(2deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(-2deg);
}
}
@keyframes split-img-full-sparkle-fall {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.15);
}
18% {
opacity: 1;
transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% + 6px)) scale(1);
}
100% {
opacity: 0;
transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% + var(--fall, 48px))) scale(0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.split-img-full .split-img-full-magic {
animation: none;
}
.split-img-full .split-img-full-sparkle--trail {
animation: none;
display: none;
}
}