/* GRIMLIFE capture pipeline — compositor-first recording path. */

/* Keep the capture surface laid out during the countdown so the first recorded
   frame does not pay for display:none -> flex construction. */
.app[data-recording="true"][data-record-stage="countdown"] #grimRecordingLayer,
.app[data-recording="true"][data-record-stage="capture"] #grimRecordingLayer{
  display:flex;
}
.app[data-recording="true"][data-record-stage="countdown"] #grimRecordingLayer{
  visibility:hidden;
  pointer-events:none;
}
#grimRecordingLayer{
  contain:layout style;
}
#grim-simple-unfold{
  contain:layout style;
}

/* Scanner progress is transform-driven instead of animating width/layout. */
#grim-simple-unfold .fill{
  width:100% !important;
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* Avoid live backdrop sampling over the moving WebGL canvas during capture.
   These surfaces retain the same dark/glass read using their own fill. */
.app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .pill,
.app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .prod-names span,
.app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* The big capture plate no longer requires a full-size mask texture. A feathered
   radial fill gives the same dark falloff with less WebKit compositing work. */
@media(max-width:720px){
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::before{
    -webkit-mask-image:none !important;
    mask-image:none !important;
    background:radial-gradient(
      ellipse 106% 102% at 50% 48%,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.86) 48%,
      rgba(0,0,0,.72) 70%,
      rgba(0,0,0,.36) 87%,
      rgba(0,0,0,0) 100%
    ) !important;
    transform:translate3d(0,0,0) scale(.18,.055);
    backface-visibility:hidden;
    will-change:transform,opacity;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold.screen-in .screen::before{
    transform:translate3d(0,0,0) scale(1);
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .wave-shell,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .gss-wave-viewport,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .top,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold h1,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .prod,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta{
    backface-visibility:hidden;
    transform-style:flat;
  }
}