.flow { position: relative; z-index: 2; }
.hero-spacer { height: 100svh; pointer-events: none; }
.universe { position: relative; height: 110svh; min-height: 680px; background: #fbf3e6; overflow: hidden; isolation: isolate; }
.universe::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #d2b6aa 0, #f1e7db 35%, transparent 70%); }
.universe::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .12; background: url('../../public/tex/grain.png'); }
.universe__title { position: absolute; top: 6%; left: 50%; width: 90%; transform: translateX(-50%); z-index: 5; text-align: center; }
.universe__over { font: 500 10px var(--ui); letter-spacing: .45em; color: #9f281a; margin: 0 0 18px; text-transform: uppercase; }
.universe__name { margin: 0; font: 400 clamp(30px,3.6vw,58px)/1.1 'Bodoni Moda',serif; letter-spacing: .08em; text-transform: uppercase; color: #4a221d; }
.universe__sub { margin: 18px 0 0; font: 400 11px var(--ui); letter-spacing: .3em; text-transform: uppercase; color: #88655d; }
.design-lab { position: absolute; width: min(1300px,98vw); height: 74%; left: 50%; top: 25%; transform: translateX(-50%); perspective: 1200px; }
.lab-orbit { position: absolute; width: 82%; height: 73%; border: 1px solid #9f2f22; border-radius: 50%; left: 9%; top: 12%; transform: rotate(-19deg); box-shadow: 0 0 28px #9f271933, inset 0 0 30px #9f271922; }
.lab-orbit::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 12%; top: 13%; background: #9f2719; box-shadow: 0 0 26px 10px #9f2719; }
.lab-orbit--two { transform: rotate(26deg) scale(.8); border-color: #b7a197; }
.lab-piece { position: absolute; margin: 0; filter: drop-shadow(0 24px 28px #fff7ea88); animation: labFloat 7s ease-in-out infinite alternate; animation-play-state: paused; }
.lab-piece img { width: 100%; display: block; border-radius: inherit; }
.universe.is-on .lab-piece { animation-play-state: running; }
.lab-browser { left: 18%; top: 12%; width: 66%; transform: rotate(-7deg) rotateY(8deg); border-radius: 14px; }
.lab-phone { left: 71%; top: 30%; width: 17%; transform: rotate(10deg) rotateY(-12deg); animation-delay: -3s; }
.lab-components { left: 1%; top: 45%; width: 25%; transform: rotate(-11deg) rotateY(14deg); animation-delay: -5s; }
.lab-dashboard { right: 2%; top: 1%; width: 28%; transform: rotate(11deg) rotateY(-15deg); animation-delay: -1s; border-radius: 10px; }
.lab-caption { position: absolute; bottom: 5%; left: 6%; color: #805951; font: 400 11px/2 var(--ui); letter-spacing: .28em; text-transform: uppercase; }
.lab-caption b { color: #4d2924; font-weight: 500; }
@keyframes labFloat { from { translate: 0 0; } to { translate: 0 -15px; } }
.universe.is-static .lab-piece { animation: none; }
@media (max-width: 760px) {
  .universe { min-height: 650px; height: 95svh; }
  .universe__title { top: 7%; }
  .universe__name { font-size: 34px; }
  .universe .universe__sub { font-size: 10px; letter-spacing: .16em; }
  .design-lab { top: 38%; height: 56%; width: 100%; }
  .lab-browser { left: 3%; top: 12%; width: 91%; }
  .lab-dashboard { width: 49%; right: 4%; top: 1%; }
  .lab-phone { width: 30%; left: 59%; top: 32%; }
  .lab-components { width: 46%; left: 5%; top: 40%; }
  .lab-caption { bottom: 5%; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .lab-piece { animation: none; } }