/* The Window Valet scene: a laptop and two monitors with app windows on them.
   Drawn at 400×190 and scaled to fit its .frame (see scene.js). */

.frame { width: 100%; position: relative; }
.scene { position: absolute; left: 50%; top: 0; width: 400px; height: 190px; margin-left: -200px; transform-origin: top center; }
.device { position: absolute; padding: 4px; border-radius: 8px; background: #0b0d16;
          box-shadow: 0 14px 30px rgba(0, 0, 0, .22), inset 0 0 0 .5px rgba(255, 255, 255, .1); }
.laptop { left: 141px; top: 104px; width: 118px; height: 74px; z-index: 3; }
.laptop::after { content: ""; position: absolute; left: -11px; right: -11px; bottom: -7px; height: 7px;
                 border-radius: 1px 1px 9px 9px; background: linear-gradient(#dfe2e9, #8f95a3); }
.mon { top: 0; width: 170px; height: 104px; }
.ma { left: 20px; } .mb { left: 210px; }
.stand { position: absolute; top: 102px; width: 18px; height: 34px;
         background: linear-gradient(90deg, #8f95a3, #cfd3dc, #8f95a3); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.sa { left: 96px; } .sb { left: 286px; }
.foot { position: absolute; top: 134px; width: 50px; height: 5px; border-radius: 3px; background: #a7adb9; }
.fa { left: 80px; } .fb { left: 270px; }
.glass { width: 100%; height: 100%; border-radius: 4px; position: relative; overflow: hidden; transition: filter .7s cubic-bezier(.2, .8, .2, 1);
         background: radial-gradient(120% 90% at 15% 0%, #4b6fe0 0%, transparent 60%),
                     radial-gradient(90% 80% at 100% 100%, #b04ea6 0%, transparent 60%), #1d2452; }
.glass::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: rgba(255, 255, 255, .25); }
.device.off .glass { filter: brightness(.16) saturate(0); }
.cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cable path { fill: none; stroke: #8f95a3; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 70;
              transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.cable path.on { stroke-dashoffset: 0; }
.sw { position: absolute; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .93);
      box-shadow: 0 4px 10px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .25); display: grid; place-items: center;
      transition: left .75s cubic-bezier(.3, 1.25, .45, 1), top .75s cubic-bezier(.3, 1.25, .45, 1),
                  width .75s cubic-bezier(.3, 1.25, .45, 1), height .75s cubic-bezier(.3, 1.25, .45, 1); }
.sw i { position: absolute; inset: 0 0 auto; height: 7px; background: rgba(0, 0, 0, .06); }
.sw .app { height: 44%; max-height: 30px; aspect-ratio: 1; margin-top: 4px; }
@media (prefers-color-scheme: dark) { .sw { background: rgba(78, 82, 102, .96); } .sw i { background: rgba(255, 255, 255, .08); } }
@media (prefers-reduced-motion: reduce) { .sw, .glass, .cable path { transition: none; } }