/* Июль: воздушный шар (редкое событие) */

#julyBalloonLayer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

.jul-bln {
    position: absolute;
    left: -120px;
    bottom: -30px;
    pointer-events: none;
    z-index: 20;
    animation: julBlnFloatUp var(--float-dur, 18s) ease-in-out forwards;
    opacity: 0;
}

@keyframes julBlnFloatUp {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    5% { opacity: 1; }
    15% { transform: translate(10vw, -10vh) rotate(2deg); }
    35% { transform: translate(30vw, -30vh) rotate(-1deg); }
    60% { transform: translate(55vw, -60vh) rotate(3deg); }
    85% {
        transform: translate(80vw, -90vh) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: translate(105vw, -120vh) rotate(0deg);
        opacity: 0;
    }
}

.jul-bln-body {
    width: 80px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%,
            #ff6b6b 0%, #ff8e8e 40%, #e55a5a 100%);
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    position: relative;
    box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.2);
    animation: julBlnSway 3s ease-in-out infinite alternate;
}

@keyframes julBlnSway {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}

.jul-bln-body::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 18%;
    width: 28%;
    height: 20%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.jul-bln-body::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    background: #b33a3a;
    border-radius: 0 0 4px 4px;
}

.jul-bln-string {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    width: 1.5px;
    height: 80px;
    background: #b89b7b;
    opacity: 0.7;
    animation: julBlnStringWave 3s ease-in-out infinite alternate;
    transform-origin: top center;
}

@keyframes julBlnStringWave {
    0% { transform: translateX(-50%) rotate(5deg); }
    100% { transform: translateX(-50%) rotate(-5deg); }
}

.jul-bln-body.jul-bln-body--color2 {
    background: radial-gradient(circle at 30% 30%, #f9ca24 0%, #ffbe76 40%, #f0932b 100%);
}

.jul-bln-body.jul-bln-body--color3 {
    background: radial-gradient(circle at 30% 30%, #6ab04c 0%, #badc58 40%, #4a8c2a 100%);
}

.jul-bln-body.jul-bln-body--color4 {
    background: radial-gradient(circle at 30% 30%, #7ed6df 0%, #c7ecee 40%, #22a6b3 100%);
}

@media (prefers-reduced-motion: reduce) {
    #julyBalloonLayer {
        display: none;
    }
}