/* ORION Build studio: the particle universe in the big moments (studio-space.js). Layout and sizes of the
   studio are unchanged; this only styles the layer itself and the panels it shows through. */
.studio-space { position: absolute; inset: 0; z-index: 0; border-radius: var(--r); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(70% 60% at 50% 45%, rgba(10, 30, 54, .55), transparent 70%); }
.studio-space.on { opacity: 1; }
.studio-space.top { z-index: 6; background: none; }
.studio-space canvas { display: block; width: 100%; height: 100%; }

/* the empty and waiting panels let the universe show through; the particles replace the orb and the dots */
#view-preview.has-space .empty, #view-preview.has-space .loading { background: transparent; z-index: 1; }
#view-preview.has-space .empty .orb, #view-preview.has-space .loading .dots { display: none; }
#view-preview.has-space .empty p, #view-preview.has-space .loading p { margin-top: auto; padding: 8px 16px; border-radius: 999px; background: rgba(2, 8, 16, .6); color: var(--text); letter-spacing: .01em; }
#view-preview.has-space .empty, #view-preview.has-space .loading { place-content: end center; padding-bottom: 28px; }
#view-preview.has-space .loading p::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 1px; transform: rotate(45deg); background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: ss-pulse 1.4s ease-in-out infinite; }
@keyframes ss-pulse { 50% { opacity: .3; } }

/* phones, new app: the constellation sits above "What do you want to build?" */
.hello.has-space { position: relative; margin-top: 4vh; }
.hello > .studio-space { position: relative; inset: auto; height: 240px; margin: 0 -16px 10px; background: none; }

/* the finished app opens out from the middle of the preview, like the cards on the front page */
.frame.reveal { animation: ss-open 1.2s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes ss-open {
  from { clip-path: circle(0% at 50% 50%); filter: brightness(2) saturate(.4); }
  60% { filter: brightness(1.15); }
  to { clip-path: circle(150% at 50% 50%); filter: none; }
}
@media (prefers-reduced-motion: reduce) { .frame.reveal { animation: none; } }