/* device-mockup.css - renders a case background as a device frame + a video
   corner-pinned into the screen. cases.js applies one class per case in
   sequence: dm--1, dm--2, dm--3, dm--1, ...

   Markup:
     <div class="dm dm--1">
       <div class="dm-screen"><video …></video></div>   video (behind)
       <div class="dm-frame"></div>                       device image (in front)
     </div>
   Each class sets its corner-pin (--dm-matrix) and frame image (--dm-frame-src).
   Re-find points with the calibrator (cms-admin/_tool-mockup-calibrator.html). */

:root {
  --dm-stage-w: 2560px;
  --dm-stage-h: 1440px;
  --dm-screen-w: 1024px;
  --dm-screen-h: 640px;
  --dm-matrix: matrix3d(1.161237,0.1461035,0,0.0001012, -0.0194551,1.1687549,0,-0.00001, 0,0,1,0, 815.78552,185.4169104,0,1);
  --dm-frame-src: url("../images/frames/case-frame-1.png");
}

.dm--1 {
--dm-matrix: matrix3d(1.0768214,0.134763,0,0.0000696,-0.0167658,1.1775333,0,-0.0000113,0,0,1,0,826.1333333,196.8,0,1);
  --dm-frame-src: url("../images/frames/case-frame-1.png");
}
.dm--2 {
--dm-matrix: matrix3d(1.0088527,-0.0005211,0,0,-0.002766,1.0452145,0,-0.0000024,0,0,1,0,800.5333333,275.7333333,0,1);
  --dm-frame-src: url("../images/frames/case-frame-2.png");
}
.dm--3 {
--dm-matrix: matrix3d(0.8271344,0.1664622,0,-0.0000259,0.0095841,1.1068338,0,0.0000082,0,0,1,0,1068.2666667,130.6666667,0,1);
  --dm-frame-src: url("../images/frames/case-frame-3.png");
}

/* Fixed coordinate space; device-mockup.js scales it to cover the section. */
.dm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dm-stage-w);
  height: var(--dm-stage-h);
  transform: translate(-50%, -50%) scale(var(--dm-scale, 1));
  transform-origin: center center;
}

.dm-screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* behind the frame */
  width: var(--dm-screen-w);
  height: var(--dm-screen-h);
  transform: var(--dm-matrix);
  transform-origin: 0 0;
  overflow: hidden;
  background: #111; /* placeholder until the video paints */
  will-change: transform;
  backface-visibility: hidden;
}

.dm-screen > video,
.dm-screen > img,
.dm-screen > .dm-content {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Device image on top - its opaque bezel/base hides the video edges. */
.dm-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: var(--dm-stage-w);
  height: var(--dm-stage-h);
  background: var(--dm-frame-src) center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

/* Mobile: the section is narrow and tall, so fit the device to WIDTH and anchor
   it to the top (device-mockup.js sets --dm-scale to width/stage here). The case
   content flows below via content.css `section.case > .content { margin-top }`. */
@media (max-width: 1000px) {
  .dm {
    top: 0;
    left: 0;
    transform: scale(var(--dm-scale, 1));
    transform-origin: top left;
  }
}