/* ==========================================
   BALLOON STAGE
========================================== */

.motion-stage {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.balloon-defs {
    position: absolute;
    width: 0;
    height: 0;
}


/* ==========================================
   BALLOON COMPONENT
========================================== */

.balloon {
    position: absolute;

    width: 66px;
    height: 104px;

    transform: translate(-50%, -50%);

    animation:
        balloonFloat var(--float-duration, 14s)
        ease-in-out
        infinite;

    animation-delay: var(--float-delay, 0s);

    will-change: transform;
}

.balloon-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;

    filter:
        drop-shadow(
            0 16px 24px rgba(36, 12, 75, .22)
        );
}

.balloon-flag {
    position: absolute;

    top: 38%;
    left: 50%;

    width: 30px;
    aspect-ratio: 3 / 2;

    object-fit: cover;

    border-radius: 3px;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 4px 8px rgba(31, 12, 70, .20);
}


/* ==========================================
   BALLOON POSITIONS
   Relative to the right column (~50% of card width)
========================================== */

.b-uk { left: 18%;  top: 18%;  --float-duration: 15s;   --float-delay: -2s;  }
.b-ru { left: 42%;  top: 14%;  --float-duration: 17s;   --float-delay: -7s;  }
.b-de { left: 65%;  top: 20%;  --float-duration: 16s;   --float-delay: -4s;  }
.b-fr { left: 85%;  top: 16%;  --float-duration: 18s;   --float-delay: -9s;  }
.b-es { left: 95%;  top: 34%;  --float-duration: 15.5s; --float-delay: -6s;  }

.b-it { left: 10%;  top: 48%;  --float-duration: 17.5s; --float-delay: -10s; }
.b-kr { left: 32%;  top: 42%;  --float-duration: 16.5s; --float-delay: -3s;  }
.b-pt { left: 58%;  top: 50%;  --float-duration: 18.5s; --float-delay: -8s;  }
.b-cn { left: 80%;  top: 54%;  --float-duration: 15.8s; --float-delay: -5s;  }

.b-jp { left: 22%;  top: 72%;  --float-duration: 19s;   --float-delay: -11s; }
.b-ar { left: 50%;  top: 76%;  --float-duration: 17s;   --float-delay: -1s;  }


/* ==========================================
   ANIMATION
========================================== */

@keyframes balloonFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translate3d(4px, -10px, 0);
    }

}