/* Small movements stay anchored to the illustrated surfaces. */
.cat-bicolor {transform-origin:54% 91%;animation:cat-breathe 7.4s 1.8s ease-in-out infinite}
.cat-ginger {transform-origin:55% 91%;animation:cat-breathe 8.8s 4s ease-in-out infinite}
.cat-perch.is-petted .cat-bicolor {animation:cat-stretch 1.3s ease-in-out both}
.cat-heart {position:absolute;left:27%;top:0;width:17%;height:auto;color:#f6a482;opacity:0;pointer-events:none}
.cat-perch.is-petted .cat-heart {animation:cat-affection 1.3s .12s ease-out both}
.cat-perch:focus-visible {outline-offset:2px;border-radius:30%}
.cat-action-sprite {position:absolute;inset:0;background:url('assets/cat-actions-v1.webp') 0 0/400% 200% no-repeat;image-rendering:pixelated;pointer-events:none;display:none}
.cat-perch[data-cat-state] {z-index:5}
.cat-perch[data-cat-state] .cat-bicolor {visibility:hidden}
.cat-perch[data-cat-state] .cat-action-sprite {display:block}
.cat-perch[data-frame="1"] .cat-action-sprite {background-position:33.333333% 0}
.cat-perch[data-frame="2"] .cat-action-sprite {background-position:66.666667% 0}
.cat-perch[data-frame="3"] .cat-action-sprite {background-position:100% 0}
.cat-perch[data-frame="4"] .cat-action-sprite {background-position:0 100%}
.cat-perch[data-frame="5"] .cat-action-sprite {background-position:33.333333% 100%}
.cat-perch[data-frame="7"] .cat-action-sprite {background-position:100% 100%}
.cat-perch[data-cat-state="desk"] .cat-action-sprite {animation:cat-desk-blink 6s steps(1,end) infinite}
.cat-perch.is-returning[data-frame="3"] .cat-action-sprite {scale:-1 1}
.first-room {--cat-dx:calc(var(--scene-width)*-.023);--cat-dy:calc(var(--scene-width)*.173)}
.first-room.cat-at-desk .robot {translate:calc(var(--scene-width)*.052) 0;transition:translate .55s ease;filter:drop-shadow(0 0 6px #a3e9d8)}
.robot {transition:translate .55s ease}
.cat-desk-shadow {position:absolute;left:86.1%;top:67.1%;width:7%;height:1%;background:#231c22a0;border-radius:50%;filter:blur(2px);opacity:0;pointer-events:none}
.first-room.cat-at-desk .cat-desk-shadow {opacity:1;transition:opacity .3s}
.cat-screen-paw {position:absolute;left:85.9%;top:43%;width:3.4%;height:auto;color:#b6f7e5;opacity:0;pointer-events:none;clip-path:polygon(0 18%,100% 0,100% 92%,0 100%)}
.first-room.cat-at-desk .cat-screen-paw {animation:cat-screen-greeting 1.5s .9s both}
.robot {transform-origin:50% 90%;animation:robot-signal 3.8s ease-in-out infinite}
.coffee-steam {position:absolute;left:81.35%;top:54.67%;width:2.73%;height:8%;overflow:hidden;pointer-events:none}
.coffee-steam svg {display:block;width:100%;height:100%;overflow:hidden}
.coffee-steam path {stroke:#fff2d2;stroke-width:2.4;stroke-linecap:round;opacity:.6;animation:coffee-rise 3.2s ease-in-out infinite}
.coffee-steam path:nth-child(2) {animation-delay:-1.1s}
.coffee-steam path:nth-child(3) {animation-delay:-2.2s}
/* Inner display corners in the 1024 x 600 home painting: (800,258), (942,235), (942,325), (800,341). */
.screen-glow {position:absolute;left:78.125%;top:39.167%;width:13.867%;height:17.667%;background:linear-gradient(180deg,transparent 0 38%,#b0f1f8aa 48%,#85d9e877 53%,transparent 65%);background-size:100% 260%;opacity:.26;mix-blend-mode:screen;clip-path:polygon(0 21.7%,100% 0,100% 84.9%,0 100%);pointer-events:none;animation:screen-signal 5s linear infinite}
.lamp-glow {position:absolute;left:66%;top:28%;width:14%;height:15%;background:radial-gradient(ellipse,#ffd47c55,transparent 65%);mix-blend-mode:screen;pointer-events:none;opacity:.6;animation:lamp-warmth 11s 5s ease-in-out infinite}
.first-room.is-away .sprite,.first-room.is-away .coffee-steam path,.first-room.is-away .screen-glow,.first-room.is-away .lamp-glow,
.scene-paused .first-room .sprite,.scene-paused .coffee-steam path,.scene-paused .screen-glow,.scene-paused .lamp-glow {animation-play-state:paused}
.first-room.is-away .cat-action-sprite,.scene-paused .cat-action-sprite {animation-play-state:paused}
@keyframes cat-breathe {0%,30%,70%,100%{transform:scaleY(1)}48%{transform:scaleY(1.018)}}
@keyframes cat-stretch {0%,100%{transform:none}28%{transform:scale(.97,1.075) rotate(-2deg)}60%{transform:scale(1.025,.98) rotate(1deg)}}
@keyframes cat-affection {0%{opacity:0;transform:translateY(0) scale(.65)}25%{opacity:1}100%{opacity:0;transform:translateY(-24px) scale(1)}}
@keyframes cat-desk-blink {0%,91%,96%,100%{background-position:33.333333% 100%}92%,95%{background-position:66.666667% 100%}}
@keyframes cat-screen-greeting {0%,100%{opacity:0}25%,75%{opacity:.6}}
@keyframes robot-signal {0%,60%,100%{transform:none;filter:drop-shadow(1px 3px 1px #08111c44)}18%{transform:rotate(-3deg);filter:drop-shadow(0 0 7px #8bc9bccc) brightness(1.2)}36%{transform:rotate(3deg);filter:drop-shadow(0 0 5px #8bc9bcaa) brightness(1.1)}}
@keyframes coffee-rise {0%,100%{opacity:.25;transform:translate(0,0)}50%{opacity:.85;transform:translate(3px,-9px)}}
@keyframes screen-signal {0%{background-position:0 100%;opacity:.18}50%{opacity:.4}100%{background-position:0 0;opacity:.18}}
@keyframes lamp-warmth {0%,100%{opacity:.55}50%{opacity:.8}}

@media(max-width:700px){.cat-perch{min-height:44px}}
@media(prefers-reduced-motion:reduce){
  .first-room * {animation:none!important;transition:none!important}
  .cat-perch.is-petted .cat-heart {opacity:1}
  .coffee-steam {display:none}
  .screen-glow {opacity:0}
}
