/* Wing-Flapping Core Element */
.bird {
    background-image: url("/images/bird-cells.svg");
    background-size: auto 100%; 
    display: block;
    width: 88px; 
    height: 125px; 
    min-height: 125px;
    max-height: 125px;
    will-change: background-position;
    animation: fly-cycle 1s steps(10) infinite;
    filter: none;
    filter: invert(1);
    opacity: 0.6;
    mix-blend-mode: screen;
    transition: fill 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .bird {
    /* Lighten up the opacity slightly on the true dark mode sky background */
    opacity: 0.8 !important;
    filter: invert(0);
}

/* Traversal Container */
.bird-container {
    position: absolute; 
    left: -10%;
    will-change: transform;
    animation: fly-right 15s linear forwards;
    pointer-events: none;
}

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

@keyframes fly-right {
    0% { 
        /* Start off-screen left at 0 horizontal offset */
        transform: translate(-15vw, 0) scale(var(--scale)); 
    }
    30% {
        /* Organic micro-dip early in flight */
        transform: translate(25vw, 4vh) scale(calc(var(--scale) * 1.05));
    }
    70% { 
        /* Organic micro-climb later in flight */
        transform: translate(75vw, -4vh) scale(calc(var(--scale) * 0.95)); 
    }
    100% { 
        /* Exit cleanly off-screen right with a unique vertical offset */
        transform: translate(115vw, var(--exit-y, 0px)) scale(var(--scale));
    }
}

@media (max-width: 1024px) {
  .bird-container {
    display: none;
  }
}