/* Decorative sprout beside the selected desktop harvest explanation. */
#dd .opening-sprout {
  display: none;
}

@media (min-width: 1000px) {
  #dd .opening-sprout {
    position: absolute;
    inset-inline-end: calc(100% + 8px);
    top: 50%;
    display: block;
    width: 56px;
    height: 62px;
    overflow: visible;
    color: var(--oh-lime, #a4cd3a);
    opacity: .86;
    pointer-events: none;
    transform: translateY(-54%);
  }

  #dd [data-harvest-badge] .opening-sprout {
    inset-inline-start: 16px;
    inset-inline-end: auto;
    width: 42px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .opening-sprout[data-motion] .sprout-stem {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .opening-sprout[data-motion] .sprout-leaf {
    opacity: 0;
    transform-box: view-box;
  }

  .sprout-leaf-left { transform-origin: 30px 33px; }
  .sprout-leaf-right { transform-origin: 34px 24px; }

  .opening-sprout[data-grown] .sprout-stem {
    animation: sprout-stem-grow .78s cubic-bezier(.25, .65, .3, 1) forwards;
  }

  .opening-sprout[data-grown] .sprout-leaf {
    animation: sprout-leaf-open .52s cubic-bezier(.25, .65, .3, 1) both;
  }

  .opening-sprout[data-grown] .sprout-leaf-left { animation-delay: .31s; }
  .opening-sprout[data-grown] .sprout-leaf-right { animation-delay: .46s; }
}

@keyframes sprout-stem-grow {
  to { stroke-dashoffset: 0; }
}

@keyframes sprout-leaf-open {
  from { opacity: 0; transform: scale(.28) rotate(-7deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}