/* ========================================
   FLAGS BACKGROUND — Floating country flags effect
   Voxtral supported languages + Switzerland
   Include this CSS + flags-background.js on any page
   ======================================== */

@keyframes flag-drift-1 {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    25%  { transform: translate(30px, -40px) rotate(calc(var(--rot) + 8deg)); }
    50%  { transform: translate(-20px, -70px) rotate(calc(var(--rot) - 5deg)); }
    75%  { transform: translate(40px, -30px) rotate(calc(var(--rot) + 12deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

@keyframes flag-drift-2 {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    20%  { transform: translate(-35px, -25px) rotate(calc(var(--rot) - 10deg)); }
    40%  { transform: translate(15px, -60px) rotate(calc(var(--rot) + 6deg)); }
    60%  { transform: translate(-40px, -40px) rotate(calc(var(--rot) - 3deg)); }
    80%  { transform: translate(25px, -15px) rotate(calc(var(--rot) + 9deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

@keyframes flag-drift-3 {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    33%  { transform: translate(45px, -50px) rotate(calc(var(--rot) + 15deg)); }
    66%  { transform: translate(-30px, -20px) rotate(calc(var(--rot) - 8deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

@keyframes flag-drift-4 {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    15%  { transform: translate(-20px, -35px) rotate(calc(var(--rot) + 5deg)); }
    35%  { transform: translate(35px, -65px) rotate(calc(var(--rot) - 12deg)); }
    55%  { transform: translate(-45px, -30px) rotate(calc(var(--rot) + 7deg)); }
    75%  { transform: translate(20px, -55px) rotate(calc(var(--rot) - 4deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

@keyframes flag-drift-5 {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    25%  { transform: translate(50px, -20px) rotate(calc(var(--rot) - 7deg)); }
    50%  { transform: translate(-15px, -55px) rotate(calc(var(--rot) + 11deg)); }
    75%  { transform: translate(30px, -45px) rotate(calc(var(--rot) - 6deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

.flags-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.flag-item {
    position: absolute;
    width: var(--size);
    height: var(--size);
    opacity: var(--opa);
    animation: var(--anim) var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
    --rot: 0deg;
    --anim: flag-drift-1;
}

.flag-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Mobile: reduce animation amplitude to prevent overlap */
@media (max-width: 768px) {
    .flag-item {
        animation-name: flag-drift-mobile;
    }
}

@keyframes flag-drift-mobile {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    25%  { transform: translate(10px, -15px) rotate(calc(var(--rot) + 4deg)); }
    50%  { transform: translate(-8px, -25px) rotate(calc(var(--rot) - 3deg)); }
    75%  { transform: translate(12px, -10px) rotate(calc(var(--rot) + 5deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}