@property --t {
    syntax: '<number>';
    inherits: true;
    initial-value: -1;
}

.animation {
    --fly-angle: 150deg; /* 0° вправо, 90° вниз */
    --fly-radius: 55%;
    --fly-y: -8%;
    --fly-reverse-start: 0.2; /* разворот в начале */
    --fly-reverse-end: 0.05;   /* разворот в конце */
    --fly-duration: 10s; /* скорость: больше = медленнее */
    --fly-gap: calc(var(--fly-duration) / 5); /* равный шаг между 5 значками */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('../media/planet.png') center / cover no-repeat;
}

.animation > * {
    position: absolute;
    width: 22%;
    height: 22%;
    left: calc(39% + cos(var(--fly-angle)) * var(--t) * var(--fly-radius));
    top: calc(39% + var(--fly-y) + sin(var(--fly-angle)) * var(--t) * var(--fly-radius));
    background: center / contain no-repeat;
    opacity: 0;
    animation: fly-diag var(--fly-duration) linear infinite both;
}

.payment-sent {
    --sent-duration: 12s;
    --sent-slot: calc(var(--sent-duration) / 3);
    left: 0;
    top: 0;
    opacity: 1;
    height: 35%;
    width: 50%;
    animation: none;
}

.payment-sent > * {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    animation: payment-sent-up var(--sent-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.payment-sent__aed {
    background-image: url(../media/payments/payment-send-AED.svg);
    animation-delay: 0s;
}

.payment-sent__cny {
    background-image: url(../media/payments/payment-send-CNY.svg);
    animation-delay: var(--sent-slot);
}

.payment-sent__eur {
    background-image: url(../media/payments/payment-send-EUR.svg);
    animation-delay: calc(var(--sent-slot) * 2);
}

@keyframes payment-sent-up {
    0% {
        transform: translateY(28%) scale(0.94);
        opacity: 0;
    }
    8% {
        transform: translateY(6%) scale(1);
        opacity: 1;
    }
    24% {
        transform: translateY(-8%) scale(1);
        opacity: 1;
    }
    33.5% {
        transform: translateY(-22%) scale(0.97);
        opacity: 0;
    }
    33.6%,
    100% {
        transform: translateY(28%) scale(0.94);
        opacity: 0;
    }
}

.animation__usd { background-image: url('../media/value/usd-117.svg'); animation-delay: calc(var(--fly-gap) * 1); }
.animation__aed { background-image: url('../media/value/aed-117.svg'); animation-delay: calc(var(--fly-gap) * 2); }
.animation__cny { background-image: url('../media/value/cny-117.svg'); animation-delay: calc(var(--fly-gap) * 3); }
.animation__rub { background-image: url('../media/value/rub-117.svg'); animation-delay: calc(var(--fly-gap) * 4); }
.animation__check { background-image: url('../media/value/check-118.svg'); animation-delay: calc(var(--fly-gap) * 5); }

@keyframes fly-diag {
    /* появление: не на краю, а с отступом — отсюда короткий пролёт к краю */
    0%   { --t: calc(-1 + var(--fly-reverse-start)); transform: scale(0.2); opacity: 0; }
    8%   { --t: calc(-1 + var(--fly-reverse-start)); transform: scale(0.35); opacity: 1; }
    /* небольшой пролёт к краю (--fly-reverse-start) */
    18%  { --t: -1; transform: scale(0.3); opacity: 1; }
    /* разворот 1 → пролёт над планетой */
    48%  { --t: 0; transform: scale(1.25); opacity: 1; }
    72%  { --t: 0.95; transform: scale(0.35); opacity: 1; }
    /* разворот 2 → небольшой пролёт (--fly-reverse-end) и уход */
    82%  { --t: 0.95; transform: scale(0.3); opacity: 1; }
    92%  { --t: calc(0.95 - var(--fly-reverse-end)); transform: scale(0.2); opacity: 0; }
    100% { --t: calc(-1 + var(--fly-reverse-start)); transform: scale(0.2); opacity: 0; }
}

@media (max-width: 780px) {
    .payment-sent {
        top: 135px;
        left: 200px;
        width: 40%;
    }
}