/* =========================================================
   QANTOVA REAL SCREENSHOTS INSIDE ORIGINAL TERMINALS
   ========================================================= */

.terminal-frame .mini-terminal{
  position:relative;
  overflow:hidden;
}

/*
  The old fake terminal stays underneath.
  Real screenshot simply covers its screen area.
*/
.terminal-frame .mini-terminal .qantova-real-shot{
  position:absolute;
  inset:0;
  z-index:50;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:top center;

  background:#02070b;

  pointer-events:none;

  opacity:1;

  transition:
    transform .45s ease,
    filter .45s ease;
}


/* Keep the physical terminal / frame hover */
.terminal-frame:hover
.mini-terminal
.qantova-real-shot{
  transform:scale(1.018);
  filter:brightness(1.05);
}


/* Very slight glass reflection remains over screenshot */
.terminal-frame .frame-screen::after{
  z-index:70;
  pointer-events:none;
}


/* ---------------------------------------------------------
   FULLSCREEN VIEWER
   Old viewer clones .mini-terminal.
   Because image lives inside .mini-terminal,
   fullscreen automatically shows real screenshot too.
   --------------------------------------------------------- */

.screen-viewer
.mini-terminal{
  position:relative;
  overflow:hidden;
}

.screen-viewer
.mini-terminal
.qantova-real-shot{
  position:absolute;
  inset:0;
  z-index:50;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;

  background:#02070b;
}


/* Hide old fake UI under the image from accessibility focus */
.mini-terminal:has(.qantova-real-shot)
> :not(.qantova-real-shot){
  pointer-events:none;
}


/* Mobile */
@media(max-width:700px){

  .terminal-frame
  .mini-terminal
  .qantova-real-shot{
    object-fit:cover;
  }

}