/* v33 work loop, v5 "treadmill": Cilantro never moves horizontally; the room slides past him.
   Structure (built by work-loop.js inside .nap):
     .nap (viewport, V wide x A tall)
       .wl-clip   overflow:hidden + soft mask walls on both sides
         .wl-room (A x A, centered, slides via translateX)
            bed back, empty bed back, sleeping dog, bed front, Z's   (original .nap children, moved here)
            .wl-office (A x A at left:D) chair, laptop, sit-type-1/2, desk, bursts
       .wl-stage  (A x A, centered, never moves) walker frames, sign
   A = art size, V = viewport width. */
.nap{--a:min(400px,52vh,calc(90vw / 1.6));--v:calc(var(--a) * 1.6);
  width:var(--v);height:var(--a);aspect-ratio:auto;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
@media (max-width:420px){ /* phones: fit in the space left of the social icons */
  .nap{--v:calc(100vw - 104px);--a:min(calc(var(--v) * .92),50vh);left:6px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}}
.wl-clip{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%)}
.wl-room,.wl-stage{position:absolute;top:0;left:calc((100% - var(--a)) / 2);width:var(--a);height:var(--a);will-change:transform}
.wl-stage{pointer-events:none}
.wl-office{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.wl-office img,.wl-stage img{position:absolute;left:0;top:0;width:100%;height:100%}
.wl-walker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}
/* sleeping layers fade then hard-hide (Chromium can keep painting a composited animating layer at opacity 0) */
/* v6b: hard swap both ways (no crossfade -> never two dogs) */
.nap .dog,.nap .z,.wl-room > img.wl-bed{transition:none}
.nap.wl-awake .dog,.nap.wl-awake .z,.nap.wl-awake .wl-room > img.wl-bed{opacity:0!important;visibility:hidden;animation-play-state:paused;transition:none}
.wl-bedbox,.wl-bedbox img{position:absolute;left:0;top:0;width:100%;height:100%}
.wl-bedbox{opacity:0;visibility:hidden}
.nap.wl-turning .wl-desk{visibility:hidden}
/* turn.png: desk hidden */
/* sign: black, pulses ~1.2s, above his head (in the fixed stage, so it stays above him) */
.wl-sign{position:absolute;left:42%;top:7%;z-index:2;transform:translate(-50%,-100%);white-space:nowrap;
  font:700 clamp(8px,1.5vw,13px)/1.15 "Trebuchet MS",system-ui,sans-serif;color:#000;background:#fff;
  border:2px solid #000;border-radius:7px;padding:3px 7px;opacity:0;transition:opacity .4s ease}
.wl-typing .wl-sign{opacity:1;animation:wlpulse 1.2s ease-in-out infinite}
@keyframes wlpulse{0%,100%{transform:translate(-50%,-100%) scale(1)}50%{transform:translate(-50%,-100%) scale(1.07)}}
.wl-burst{position:absolute;transform:translate(-50%,0);font:900 clamp(9px,1.6vw,15px)/1 "Trebuchet MS",system-ui,sans-serif;
  color:#ffd54f;-webkit-text-stroke:1.2px #3f2a9c;letter-spacing:.5px;pointer-events:none;animation:wlpop .55s ease-out forwards}
.wl-burst::after{content:"";position:absolute;left:50%;top:110%;width:4px;height:4px;border-radius:50%;background:#ffd54f;
  box-shadow:-7px 3px 0 #fff59d,7px 3px 0 #fff59d;transform:translateX(-50%)}
@keyframes wlpop{0%{opacity:0;transform:translate(-50%,0) scale(.5) rotate(var(--r,0deg))}
  25%{opacity:1;transform:translate(-50%,-40%) scale(1.15) rotate(var(--r,0deg))}
  100%{opacity:0;transform:translate(-50%,-140%) scale(.9) rotate(var(--r,0deg))}}
@media (max-width:420px){.wl-burst{font-size:13px}.wl-stage .wl-burst{margin-top:-2%}
  .wl-sign{font-size:11px;top:7%;left:55%;padding:2px 5px;border-width:1.5px}}
/* OPT-IN (CANON_SIGN_BOX=true): Canon sign space x 355-559, y 30-189 of 640 art (covers his face with current art) */
@media (min-width:421px){.nap.wl-canon-sign .wl-sign{left:55.5%;top:4.7%;width:31.9%;height:24.8%;box-sizing:border-box;transform:none;
  display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
  .nap.wl-canon-sign.wl-typing .wl-sign{animation-name:wlpulse2}}
@keyframes wlpulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.wl-burst{display:none}.wl-typing .wl-sign{animation:none}}
@media (max-width:340px){.wl-sign{left:63%}} /* clear the Web Design sign at 320 */

/* v5c floor strip at his feet (art y=501), slides with the room, fades via the clip mask */
.wl-floor{position:absolute;top:78.3%;height:3px;pointer-events:none;border-radius:2px;opacity:.75;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(150,110,70,.28) 46px 48px),linear-gradient(#e8d5bc,#dcc4a3)}
.wl-floor.wl-floor-img{background-color:transparent;background-repeat:repeat-x;border-radius:0;opacity:1}
.wl-walker{transform-origin:41.875% 50%} /* flip about x=268 so the walk back stays put */