/* ============================================================
   VOID terminal mockup, REAL app captures.
   .vt reconstructs the terminal from real panel images layered at
   their measured positions (assembly). .vtp shows one real panel.
   Images are captured 1:1 from the running app, so this IS the app.
   ============================================================ */

.vt {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1040;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 100px rgba(203, 255, 191, 0.05);
}
.vt__layer {
  position: absolute;
  object-fit: fill;
  opacity: 0;
  transform: var(--from);
  transition: opacity .75s cubic-bezier(.2, .75, .25, 1), transform .8s cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--d);
  will-change: transform, opacity;
}
.vt.is-assembled .vt__layer { opacity: 1; transform: none; }

.vtp { width: 100%; }
.vtp__img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.vtp__reveal {
  opacity: 0;
  transform: translateY(24px) scale(.99);
  transition: opacity .7s cubic-bezier(.2, .75, .25, 1), transform .7s cubic-bezier(.2, .75, .25, 1);
}
.vtp.is-assembled .vtp__reveal { opacity: 1; transform: none; }
.vtp__img--mobile { max-width: 300px; margin-inline: auto; border-radius: 30px; }

@media (prefers-reduced-motion: reduce) {
  .vt__layer { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vtp__reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}