/**
 * FLOAT PARTICLE
 */

.mode-particle-float{

position:absolute;
pointer-events:none;
z-index:5;

animation:
modeFloatParticle
var(--duration)
linear
infinite;

}

.mode-particle-float img{

width:100%;
display:block;

animation:
modeRotateParticle
var(--rotate-duration)
linear
infinite;

}

@keyframes modeFloatParticle{

0%{

transform:
translateX(-120px)
translateY(0);

opacity:0;

}

10%{

opacity:1;

}

50%{

transform:
translateX(50vw)
translateY(-40px);

}

100%{

transform:
translateX(calc(100vw + 120px))
translateY(0);

opacity:0;

}

}

@keyframes modeRotateParticle{

from{

transform:
rotate(0deg);

}

to{

transform:
rotate(360deg);

}

}