/* Same entrance motion as Xeokit, after the initial Potree view is ready. */
body.potree-page {
  --potree-topbar-reveal-duration: 420ms;
  --potree-topbar-separator-duration: 320ms;
  --potree-topbar-reveal-step: 45ms;
  --potree-topbar-reveal-offset: -18px;
  --potree-topbar-reveal-scale: .96;
  --potree-topbar-separator-scale: .35;
  --potree-topbar-reveal-easing: cubic-bezier(.2, .75, .2, 1);
}

#top-bar-right[data-topbar-reveal="pending"] > button,
#top-bar-right[data-topbar-reveal="pending"] > .sep-btn {
  opacity: 0;
}

#top-bar-right[data-topbar-reveal="running"] > button[data-topbar-reveal-item] {
  animation: potreeTopbarButtonReveal var(--potree-topbar-reveal-duration) var(--potree-topbar-reveal-easing) both;
  animation-delay: calc(var(--potree-topbar-reveal-index, 0) * var(--potree-topbar-reveal-step));
  transform-origin: left center;
}

#top-bar-right[data-topbar-reveal="running"] > .sep-btn[data-topbar-reveal-item] {
  animation: potreeTopbarSeparatorReveal var(--potree-topbar-separator-duration) ease-out both;
  animation-delay: calc(var(--potree-topbar-reveal-index, 0) * var(--potree-topbar-reveal-step));
}

@keyframes potreeTopbarButtonReveal {
  from { opacity: 0; transform: translateX(var(--potree-topbar-reveal-offset)) scale(var(--potree-topbar-reveal-scale)); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes potreeTopbarSeparatorReveal {
  from { opacity: 0; transform: scaleY(var(--potree-topbar-separator-scale)); }
  to { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  #top-bar-right[data-topbar-reveal] > button,
  #top-bar-right[data-topbar-reveal] > .sep-btn {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}