/* The birds that build the home page, and the oak at its foot (Nov 4 2026). Goes with js/mo-birds.js.
   Every rule here only matters once that script has run: it adds the classes and the elements these rules style.
   Without the script (blocked, failed, JS off) nothing is hidden. */
#bb-flock { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; transition: opacity .6s; }
#bb-guide { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10000; }
/* the button the guide bird is sitting on */
.bb-perched { box-shadow: 0 0 0 3px rgba(20, 168, 118, .32); transition: box-shadow .25s ease; }
#bb-oak { position: fixed; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .6s; overflow: visible; }
#bb-tail { height: 75vh; }
/* the oak grows behind the footer, so the footer goes see-through once the oak is on the page */
#bb-tail ~ .mo-footer { position: relative; z-index: 6; background: rgba(251, 250, 248, .74); }
.bb-piece { opacity: 0; transform: scale(.97); transition: opacity .3s ease, transform .3s ease; }
.bb-piece.bb-built { opacity: 1; transform: none; }
.bb-type.bb-built { transition: opacity .15s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .bb-piece { opacity: 1; transform: none; transition: none; }
  #bb-flock { display: none; }
}