#os-logo {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000 url('/shared/resources/branding/initlogo.png') no-repeat center / cover;
  z-index: 65538;
  opacity: 1;
  transition: opacity 1s ease 2s;
  pointer-events: none;
}

#carrier-logo {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#carrier-logo > img,
#poweroff-splash > img {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  transition: opacity 1s ease 2s;
}

#carrier-logo > video,
#poweroff-splash > video {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  transition: opacity 1s ease;
}

#carrier-logo.transparent {
  background: transparent;
}

#carrier-logo > img.hide,
#carrier-logo > video.hide,
#os-logo.hide,
#poweroff-splash > img.hide,
#poweroff-splash > video.hide {
  opacity: 0;
}

@media (min-width: 1200px) and (orientation: landscape) {
  #os-logo {
    background: #000 url('/shared/resources/branding/initlogo_large.png') no-repeat center / cover;
  }
}

/* Keep one size throughout Gaia's boot lifecycle. */
#os-logo { background:#071d35; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#os-logo::before { content:""; width:min(42vw,190px); aspect-ratio:1; flex:none; background:url('/shared/resources/branding/vulpes-symbol.png') center / contain no-repeat; animation:vulpes-boot 2s ease-in-out infinite alternate; }
#os-logo::after { content:"VULPES\A Firefox OS Community Project"; white-space:pre-line; padding:12px 22px; color:#f5f8fa; font:500 20px/1.8 FiraSans,sans-serif; text-align:center; }
#poweroff-splash { background:#071d35 url('/shared/resources/branding/vulpes-symbol.png') center / 190px 190px no-repeat; }
@keyframes vulpes-boot { from {opacity:.75} to {opacity:1} }
@media (prefers-reduced-motion: reduce) { #os-logo::before {animation:none} }