/* BSD mascots in the red bar. A layer behind the bar's content: the bar keeps
   its height, its layout and its colours; the characters keep to its edges. */
.bar { position: relative; overflow: hidden; }
.bar-inner { position: relative; z-index: 1; }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky > * { position: absolute; left: 0; top: 0; will-change: transform; }
.sky svg, .sky img { display: block; width: 100%; height: 100%; }

/* Stars: four-pointed sparkles that grow, turn and fade */
.sky .star { width: var(--s, 6px); height: var(--s, 6px); color: #fff; opacity: 0;
  animation: sparkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite; }
.sky .star svg { overflow: visible; }
.sky .meteor { top: 0; width: 40px; height: 1.5px; opacity: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .95)); }
.sky .meteor.go { animation: meteor .9s ease-out forwards; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: var(--at) scale(.2) rotate(0deg); }
  45%, 55% { opacity: .95; transform: var(--at) scale(1) rotate(45deg); }
}
@keyframes meteor {
  0% { opacity: 0; transform: var(--from) rotate(14deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: var(--to) rotate(14deg); }
}

/* The characters; JS sets each one's transform, CSS only its size and its own small motions */
.sky .beastie { width: 32px; height: 34px; filter: drop-shadow(0 0 1px rgb(255 255 255 / .85)); transform-origin: 50% 100%; }
.sky .beastie .leg { transform-box: view-box; }
.sky .beastie .leg.front { transform-origin: 385px 728px; }
.sky .beastie .leg.back { transform-origin: 470px 726px; }
.sky .orb { width: 18px; height: 18px; }
.sky .opn { width: 15px; height: 15px; transform-origin: 50% 50%; }
.sky .puffy { width: 30px; height: 26px; transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.sky .puffy.puffed { scale: 1.3; }
.sky .dragonfly { width: 24px; height: 25px; }
.sky .dragonfly .wings { transform-box: fill-box; transform-origin: 50% 50%; animation: flutter .05s linear infinite alternate; }
.sky .flag { width: 30px; height: 31px; left: auto; top: auto; right: 28px; bottom: 0; transform-origin: 8% 0%; animation: wave 1.6s ease-in-out infinite alternate; }
.sky .moon { width: 24px; height: 27px; }
.sky .ghost { width: 20px; height: 22px; opacity: 0; transition: opacity .7s; }
.sky .ghost.shown { opacity: .9; }
@keyframes flutter { to { transform: scaleX(.45); } }
@keyframes wave { from { transform: skewY(-3deg) scaleX(.96); } to { transform: skewY(2deg) scaleX(1); } }

/* Pause, Stop, Hide (WCAG 2.2.2): a small control in the bar's corner */
.sky-toggle { position: absolute; z-index: 2; right: 2px; bottom: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .25); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .55; }
.sky-toggle:hover, .sky-toggle:focus-visible { opacity: 1; }
.sky-toggle[hidden] { display: none; }
.sky-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.sky-toggle svg { width: 10px; height: 10px; }
.bar.sky-paused .sky * { animation-play-state: paused !important; }