/* Birds animation styles for sunset theme */
.bird {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    animation-name: fly-cycle;
    animation-timing-function: steps(10);
    animation-iteration-count: infinite;
}

.bird--one {
    animation-duration: 1s;
    animation-delay: -0.5s;
}

.bird--two {
    animation-duration: 0.9s;
    animation-delay: -0.75s;
}

.bird--three {
    animation-duration: 1.25s;
    animation-delay: -0.25s;
}

.bird--four {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
}

.bird--five {
    animation-duration: 1.15s;
    animation-delay: -0.35s;
}

.bird--six {
    animation-duration: 0.95s;
    animation-delay: -0.65s;
}

/* Dynamic birds generated by JS */
.bird--dynamic {
    /* Animation properties set inline by JS */
}

.bird-container {
    position: fixed;
    left: -10%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    z-index: 0;
    pointer-events: none;
}

/* Some birds fly above content - use slower, smoother animation */
.bird-container:nth-child(3n),
.bird-container:nth-child(5n) {
    z-index: 15;
    animation-timing-function: ease-out; /* Smooth deceleration at the end */
}

.bird-container--one,
.bird-container--three,
.bird-container--five {
    z-index: 15;
    animation-timing-function: ease-out; /* Smooth deceleration at the end */
}

/* Dynamic bird containers */
.bird-container--dynamic {
    /* Animation properties set inline by JS */
}

.bird-container--one {
    animation-name: fly-right-one;
    animation-duration: 15s;
    animation-delay: 0;
    top: 15%;
}

.bird-container--two {
    animation-name: fly-right-one;
    animation-duration: 16s;
    animation-delay: 1s;
    top: 35%;
}

.bird-container--three {
    animation-name: fly-right-one;
    animation-duration: 14.6s;
    animation-delay: 9.5s;
    top: 8%;
}

.bird-container--four {
    animation-name: fly-right-one;
    animation-duration: 16s;
    animation-delay: 10.25s;
    top: 25%;
}

.bird-container--five {
    animation-name: fly-right-two;
    animation-duration: 17s;
    animation-delay: 5s;
    top: 42%;
}

.bird-container--six {
    animation-name: fly-right-two;
    animation-duration: 15.5s;
    animation-delay: 12s;
    top: 18%;
}

/* Hide birds by default (show only in sunset theme) */
.bird-container {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

/* Show birds in sunset theme */
body.sunset-theme .bird-container {
    display: block;
    opacity: 1;
}

@keyframes fly-cycle {
    100% {
        background-position: -900px 0;
    }
}

@keyframes fly-right-one {
    0% {
        transform: scale(0.3) translateX(-10vw);
    }
    10% {
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }
    20% {
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }
    30% {
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }
    40% {
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }
    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }
    65% {
        transform: translateY(0vh) translateX(100vw) scale(0.55);
    }
    80% {
        transform: translateY(0vh) translateX(108vw) scale(0.5);
    }
    100% {
        transform: translateY(0vh) translateX(115vw) scale(0.4);
    }
}

@keyframes fly-right-two {
    0% {
        transform: translateY(-2vh) translateX(-10vw) scale(0.5);
    }
    10% {
        transform: translateY(0vh) translateX(10vw) scale(0.4);
    }
    20% {
        transform: translateY(-4vh) translateX(30vw) scale(0.6);
    }
    30% {
        transform: translateY(1vh) translateX(50vw) scale(0.45);
    }
    40% {
        transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
    }
    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.45);
    }
    65% {
        transform: translateY(0vh) translateX(100vw) scale(0.4);
    }
    80% {
        transform: translateY(0vh) translateX(108vw) scale(0.35);
    }
    100% {
        transform: translateY(0vh) translateX(115vw) scale(0.3);
    }
}

@keyframes fly-right-three {
    0% {
        transform: translateY(1vh) translateX(-10vw) scale(0.4);
    }
    10% {
        transform: translateY(-1vh) translateX(15vw) scale(0.5);
    }
    20% {
        transform: translateY(3vh) translateX(35vw) scale(0.55);
    }
    30% {
        transform: translateY(-2vh) translateX(55vw) scale(0.5);
    }
    40% {
        transform: translateY(1vh) translateX(75vw) scale(0.55);
    }
    50% {
        transform: translateY(-1vh) translateX(95vw) scale(0.5);
    }
    65% {
        transform: translateY(0vh) translateX(102vw) scale(0.45);
    }
    80% {
        transform: translateY(0vh) translateX(109vw) scale(0.4);
    }
    100% {
        transform: translateY(0vh) translateX(115vw) scale(0.35);
    }
}