/* ==========================================================================
   BALLOONS.CSS — Hot Air Balloon Visual System
   ========================================================================== */

/* 
   Hot Air Balloons — Site-wide Visual Motif
   - Multiple different pixel-art hot air balloons
   - NOT identical copies — visual variation through:
     * different silhouettes
     * different sizes
     * different balloon patterns
     * different baskets
     * different proportions
     * different pixel constructions
   - Sunset colour palette: coral, orange, peach, pink, gold, warm red, muted sunset tones
   - Tasteful, not childish — tiny pixel-art design objects floating through the interface
*/

.balloons-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-balloons);
    pointer-events: none;
    overflow: hidden;
}

/* Individual Balloon */
.balloon {
    position: absolute;
    transform-origin: center bottom;
    will-change: transform;
    pointer-events: none;
    user-select: none;
    /* Position via CSS custom properties - updated by JS */
    /* Base position + sway + parallax (from main.js cursor interaction) */
    transform: translate(var(--balloon-x, 0), var(--balloon-y, 0)) translateX(var(--sway-offset, 0)) translate(var(--parallax-x, 0), var(--parallax-y, 0));
}

/* Balloon Size Variants */
.balloon--small { width: 64px; height: 84px; }
.balloon--medium { width: 80px; height: 104px; }
.balloon--large { width: 104px; height: 136px; }

/* Balloon Envelope */
.balloon__envelope {
    position: relative;
    width: 100%;
    height: 70%;
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
    background: var(--balloon-color, #D4A574);
    box-shadow: 
        inset -8px -4px 0 rgba(0,0,0,0.1),
        inset 8px -4px 0 rgba(255,255,255,0.15),
        0 8px 24px rgba(13, 19, 33, 0.12);
}

.balloon__envelope-inner {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 70%;
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    background: rgba(255,255,255,0.1);
    box-shadow: inset -4px -2px 0 rgba(0,0,0,0.05);
}

.balloon__gores {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
    background-image: 
        linear-gradient(90deg, transparent 49%, rgba(0,0,0,0.04) 50%, transparent 51%),
        linear-gradient(90deg, transparent 24%, rgba(0,0,0,0.03) 25%, transparent 26%),
        linear-gradient(90deg, transparent 74%, rgba(0,0,0,0.03) 75%, transparent 76%);
    background-size: 20% 100%;
    opacity: 0.5;
}

/* Balloon Basket */
.balloon__basket {
    position: relative;
    width: 40%;
    height: 20%;
    left: 30%;
    top: -5%;
    background: #8b5e3c;
    border-radius: 4px 4px 8px 8px;
    box-shadow: 
        inset -3px -2px 0 rgba(0,0,0,0.2),
        inset 3px -2px 0 rgba(255,255,255,0.1),
        0 4px 12px rgba(13, 19, 33, 0.15);
}

.balloon__burner {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10px;
    background: linear-gradient(90deg, #ff6b35, #ffaa00, #ff6b35);
    border-radius: 2px;
    box-shadow: 0 0 8px 2px rgba(255, 107, 53, 0.6);
    animation: burnerFlicker 0.1s infinite alternate;
}

@keyframes burnerFlicker {
    0% { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
}

/* Balloon Tethers */
.balloon__tethers {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 10px;
    display: flex;
    justify-content: space-between;
}

.balloon__tether {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #8b5e3c, #5d3a21);
    border-radius: 1px;
}

/* Floating Animation — Base */
@keyframes balloonFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) translateX(8px) rotate(0.5deg);
    }
    50% {
        transform: translateY(-8px) translateX(-5px) rotate(-0.3deg);
    }
    75% {
        transform: translateY(-12px) translateX(3px) rotate(0.2deg);
    }
}

/* Drift Animation — Horizontal movement */
@keyframes balloonDrift {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
}

/* Bob Animation — Subtle vertical bob */
@keyframes balloonBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Sway Animation — Gentle rotation */
@keyframes balloonSway {
    0%, 100% {
        transform: rotate(-0.5deg);
    }
    50% {
        transform: rotate(0.5deg);
    }
}

/* Animation Variants — Different speeds and delays */
.balloon--float-slow {
    animation: balloonFloat 12s ease-in-out infinite;
}
.balloon--float-normal {
    animation: balloonFloat 8s ease-in-out infinite;
}
.balloon--float-fast {
    animation: balloonFloat 6s ease-in-out infinite;
}

.balloon--drift-slow {
    animation: balloonDrift 20s ease-in-out infinite;
}
.balloon--drift-normal {
    animation: balloonDrift 15s ease-in-out infinite;
}
.balloon--drift-fast {
    animation: balloonDrift 10s ease-in-out infinite;
}

.balloon--bob-slow {
    animation: balloonBob 4s ease-in-out infinite;
}
.balloon--bob-normal {
    animation: balloonBob 3s ease-in-out infinite;
}
.balloon--bob-fast {
    animation: balloonBob 2.5s ease-in-out infinite;
}

.balloon--sway-slow {
    animation: balloonSway 6s ease-in-out infinite;
}
.balloon--sway-normal {
    animation: balloonSway 4s ease-in-out infinite;
}
.balloon--sway-fast {
    animation: balloonSway 3s ease-in-out infinite;
}

/* Combined animation classes for JS assignment */
.balloon.animate-float { animation-name: balloonFloat; }
.balloon.animate-drift { animation-name: balloonDrift; }
.balloon.animate-bob { animation-name: balloonBob; }
.balloon.animate-sway { animation-name: balloonSway; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .balloon {
        animation: none !important;
    }
    .balloon__burner {
        animation: none !important;
    }
}

/* Parallax effect — handled by JS, but base transform here */
.balloon--parallax {
    transition: transform 0.1s linear;
}

/* Ensure balloon animations compose with JS-driven base transform */
/* The base transform is: translate(var(--balloon-x), var(--balloon-y)) translateX(var(--sway-offset)) translate(var(--parallax-x), var(--parallax-y))
   Animations should add relative transforms on top */
.balloon {
    animation-composition: accumulate;
}