/* The launch screen (launch.js), shown while a business is created, opened or subscribed. */
#launch {
  display: none;
}

html.is-launching #launch {
  box-sizing: border-box;
  margin: 0;
  padding: 1rem;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: Roboto, sans-serif;
  color: #212121;
}

/* Hidden until the theme's font is ready (launch.js), so the words never change font on screen. */
#launch .launch__message,
#launch .launch__note {
  visibility: hidden;
}

html.launch-font-ready #launch .launch__message,
html.launch-font-ready #launch .launch__note {
  visibility: visible;
}

/* Set in full here, so the app's own styles, which load later, never change the spacing. */
#launch .launch__message {
  margin: 0 0 0.375rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-align: center;
}

#launch .launch__note {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  text-align: center;
  opacity: 0.7;
}

/* A tree grows from a seedling, fills with leaves and fruit, then sways: a business taking root. */
.tree {
  width: 13rem;
  height: 12rem;
  margin-bottom: 1rem;
  overflow: visible;
}

.tree__soil {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleX(0);
  animation: tree-soil 0.5s ease-out forwards;
}

.tree__trunk {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: tree-draw 1s ease-out 0.4s forwards;
}

.tree__branch {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: tree-draw 0.6s ease-out forwards;
}

.tree__leaf,
.tree__fruit {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: tree-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}

.tree__crown {
  transform-box: view-box;
  transform-origin: 80px 150px;
  animation: tree-sway 3.2s ease-in-out 3.4s infinite;
}

.tree__falling {
  opacity: 0;
  animation: tree-fall 4s ease-in 4s infinite;
}

@keyframes tree-soil {
  to {
    transform: scaleX(1);
  }
}

@keyframes tree-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes tree-pop {
  to {
    transform: scale(1);
  }
}

@keyframes tree-sway {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(1.6deg);
  }
  75% {
    transform: rotate(-1.6deg);
  }
}

@keyframes tree-fall {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  10%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-26px, 62px) rotate(200deg);
  }
}

/* Without motion the tree shows fully grown and still. */
@media (prefers-reduced-motion: reduce) {
  .tree__soil,
  .tree__trunk,
  .tree__branch,
  .tree__leaf,
  .tree__fruit,
  .tree__crown {
    animation: none;
    transform: none;
    stroke-dashoffset: 0;
  }

  .tree__falling {
    display: none;
  }
}