/* Jahzy Made It — pixel office homepage. All rules are scoped to .jm-office / #jm-about. */
.jm-office{
  --jm-cream:#fbe8c4; --jm-maroon:#6b1426; --jm-maroon-dk:#3e0a16; --jm-gold:#e0a21f;
  --jm-brown:#2b160c; --jm-orange:#e8731a;
  --jm-render:pixelated;               /* set to "auto" for smooth scaling */
  --jm-font:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  position:relative; box-sizing:border-box; background:var(--jm-brown); color:var(--jm-cream);
  font-family:var(--jm-font); line-height:1.3; -webkit-tap-highlight-color:transparent;
}
.jm-office *,.jm-office *::before,.jm-office *::after{box-sizing:border-box}
.jm-scroller{position:relative;width:100%}
.jm-stage{
  position:relative; margin-inline:auto; container-type:inline-size;
  width:min(100%, calc(100svh * 1672 / 941)); aspect-ratio:1672/941; overflow:hidden;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.jm-stage img{display:block;width:100%;height:100%;image-rendering:var(--jm-render);-webkit-user-drag:none;user-drag:none}
.jm-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

/* objects */
.jm-obj{position:absolute;transform-origin:50% 100%}
.jm-obj img{pointer-events:none}
.jm-hit{position:absolute;inset:0;display:block;pointer-events:auto;color:inherit;text-decoration:none;
  border-radius:6px;cursor:pointer;touch-action:manipulation;outline:none}
.jm-hit>img{transition:transform .18s ease,filter .18s ease}
.jm-hit.jm-overlay{inset:auto}                         /* monitor hotspot: positioned by JS */
.jm-hit.jm-overlay::before{content:"";position:absolute;inset:0;border-radius:8px;transition:box-shadow .18s,background .18s}

.jm-hit:hover>img,.jm-hit:focus-visible>img{transform:translateY(-3px);
  filter:drop-shadow(0 0 7px rgba(255,205,90,.95)) drop-shadow(0 0 14px rgba(255,170,40,.55))}
.jm-hit.jm-overlay:hover::before,.jm-hit.jm-overlay:focus-visible::before{
  background:rgba(255,215,120,.14);box-shadow:0 0 0 2px rgba(255,215,120,.9),0 0 22px 4px rgba(255,190,70,.75)}
.jm-hit:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--jm-maroon)}
.jm-hit.is-pressed>img{transform:translateY(1px) scale(.985);filter:brightness(1.12)}
.jm-hit.jm-overlay.is-pressed::before{background:rgba(255,215,120,.28)}

/* labels: fixed-size, readable at any scene scale */
.jm-tag{position:absolute;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  font:700 clamp(11px,1.12cqw,17px)/1 var(--jm-font);letter-spacing:.01em;
  padding:.42em .75em .5em;background:var(--jm-cream);color:var(--jm-maroon);
  border:2px solid var(--jm-maroon);border-radius:4px;box-shadow:0 3px 0 var(--jm-maroon-dk);
  transition:transform .18s ease,background .18s}
.jm-hit:hover .jm-tag,.jm-hit:focus-visible .jm-tag{background:#fff3d6;transform:translate(-50%,-62%)}
.jm-tag.is-gold{background:var(--jm-gold);color:var(--jm-brown)}

/* greeting bubble */
.jm-bubble{position:absolute;z-index:6;transform:translate(-100%,-50%);pointer-events:none;
  width:max-content;max-width:min(30cqw,230px);padding:.55em .8em;border-radius:10px;
  font:700 clamp(11px,1.15cqw,17px)/1.25 var(--jm-font);background:#fff7e6;color:var(--jm-maroon);
  border:2px solid var(--jm-maroon);box-shadow:0 3px 0 var(--jm-maroon-dk);opacity:0;transition:opacity .5s ease}
.jm-bubble::after{content:"";position:absolute;right:-9px;top:50%;width:12px;height:12px;background:#fff7e6;
  border:solid var(--jm-maroon);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg)}
.jm-bubble.is-on{opacity:1}
.jm-obj[data-id="jahzy"].is-greeting>.jm-hit>img{animation:jm-greet 1.1s ease-in-out 2}
@keyframes jm-greet{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-1.1deg) translateY(-5px)}65%{transform:rotate(.9deg) translateY(-2px)}}

/* ambient dust in the window light */
.jm-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.jm-mote{position:absolute;width:3px;height:3px;background:#ffe4a0;opacity:0;image-rendering:pixelated;
  animation:jm-drift var(--d,14s) linear var(--delay,0s) infinite}
@keyframes jm-drift{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}85%{opacity:.5}100%{opacity:0;transform:translate(-34px,-60px)}}

/* toolbar + menu */
.jm-toolbar{position:absolute;z-index:20;top:max(10px,1.2%);right:max(10px,1.2%);display:flex;gap:6px}
.jm-btn{font:700 13px/1 var(--jm-font);min-height:40px;padding:0 14px;cursor:pointer;color:var(--jm-cream);
  background:rgba(43,22,12,.88);border:2px solid var(--jm-gold);border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.45);
  touch-action:manipulation}
.jm-btn:hover{background:var(--jm-maroon)}
.jm-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.jm-btn[aria-pressed="true"],.jm-btn[aria-expanded="true"]{background:var(--jm-gold);color:var(--jm-brown)}
.jm-menu{position:absolute;z-index:21;top:calc(max(10px,1.2%) + 48px);right:max(10px,1.2%);min-width:220px;margin:0;padding:6px;
  list-style:none;background:rgba(43,22,12,.96);border:2px solid var(--jm-gold);border-radius:6px;box-shadow:0 6px 0 rgba(0,0,0,.4)}
.jm-menu[hidden]{display:none}
.jm-menu a{display:block;padding:12px 14px;color:var(--jm-cream);text-decoration:none;font:700 15px/1.2 var(--jm-font);border-radius:4px}
.jm-menu a:hover{background:var(--jm-maroon)}
.jm-menu a:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* objects can always be dragged */
.jm-obj{pointer-events:auto;cursor:grab;touch-action:none}
.jm-obj.is-dragging{cursor:grabbing;z-index:50!important;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.jm-obj.is-dragging .jm-hit>img{transform:none;filter:none}
.jm-btn[hidden]{display:none}

.jm-toast{position:absolute;z-index:30;left:50%;bottom:16%;transform:translate(-50%,10px);max-width:min(88%,380px);
  padding:12px 16px;border-radius:6px;background:var(--jm-cream);color:var(--jm-maroon);border:2px solid var(--jm-maroon);
  box-shadow:0 4px 0 var(--jm-maroon-dk);font:700 14px/1.3 var(--jm-font);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.jm-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* phones / portrait: scene keeps its proportions and pans sideways */
@media (max-aspect-ratio:1/1){
  .jm-scroller{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .jm-scroller::-webkit-scrollbar{display:none}
  .jm-stage{--jm-h:min(70svh,680px);height:var(--jm-h);width:calc(var(--jm-h) * 1672 / 941);aspect-ratio:auto;margin-inline:0;overflow:hidden;flex:none}
  .jm-tag,.jm-bubble{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .jm-office *,.jm-office *::before,.jm-office *::after{animation:none!important;transition:none!important}
  .jm-mote{display:none}
}

button.jm-hit{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit}

/* dog + radio interactions */
.jm-bubble.is-up{transform:translate(-50%,-100%)}
.jm-bubble.is-up::after{right:auto;left:50%;top:auto;bottom:-8px;transform:translateX(-50%) rotate(135deg)}

@keyframes jm-wag{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-4deg) translateY(-6px)}40%{transform:rotate(3deg) translateY(0)}60%{transform:rotate(-3deg) translateY(-4px)}80%{transform:rotate(2deg) translateY(0)}}
.jm-obj[data-id="radio"].is-playing>.jm-hit>img{animation:jm-beat .7s ease-in-out infinite}
@keyframes jm-beat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* iPad: bigger tap area; dog: layered body + tail */
.jm-hit.jm-pad::after{content:"";position:absolute;inset:-14px}
.jm-layers{position:absolute;inset:0;transition:transform .18s ease,filter .18s ease}
.jm-layers img{position:absolute;inset:0}
.jm-hit:hover>.jm-layers,.jm-hit:focus-visible>.jm-layers{transform:translateY(-3px);filter:drop-shadow(0 0 7px rgba(255,205,90,.95))}
.jm-tail{animation:none}
.jm-hit:hover .jm-tail,.jm-hit:focus-visible .jm-tail,.jm-obj.is-wag .jm-tail{animation:jm-tail .42s ease-in-out infinite}
@keyframes jm-tail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
.jm-obj[data-id="dog"].is-wag>.jm-hit>.jm-layers{animation:jm-hop .45s ease-in-out 3}
@keyframes jm-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}