/* Rara Pixel Office v0.8 — visible stand / sit 2.5D motion */
.v3-art-stage{
  --mx:0px;--my:0px;--rx:0deg;--ry:0deg;
  perspective:1200px;
  transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .22s ease;
  will-change:transform;
}
.v3-art-stage.v7-tilting{
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 22px 50px rgba(143,74,108,.20);
}
.v3-art-image{transform:translate3d(var(--mx),var(--my),0) scale(1.002);transition:transform .18s ease-out;will-change:transform}
.v7-motion-root{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;transform:translate3d(var(--mx),var(--my),0)}
.v7-character-layer{
  position:absolute;inset:0;
  background-image:url('home-v3-final.webp?v=10');
  background-size:100% 100%;background-repeat:no-repeat;
  will-change:transform,filter;
  transform-origin:center bottom;
  image-rendering:auto;
}

/* each staff member moves at a different moment so the office feels alive */
.v7-character-layer:nth-child(1){animation-delay:-.4s!important}
.v7-character-layer:nth-child(2){animation-delay:-2.1s!important}
.v7-character-layer:nth-child(3){animation-delay:-4.0s!important}
.v7-character-layer:nth-child(4){animation-delay:-1.3s!important}
.v7-character-layer:nth-child(5){animation-delay:-3.2s!important}
.v7-character-layer:nth-child(6){animation-delay:-5.0s!important}
.v7-character-layer:nth-child(7){animation-delay:-2.7s!important}
.v7-character-layer:nth-child(8){animation-delay:-4.8s!important}
.v7-character-layer:nth-child(9){animation-delay:-1.7s!important}
.v7-character-layer:nth-child(10){animation-delay:-3.8s!important}
.v7-character-layer:nth-child(11){animation-delay:-5.7s!important}

/* idle = occasionally stands up, stretches, then sits */
.v7-character-layer.idle{animation:v8StandSitIdle 7.2s steps(2,end) infinite}
/* working = gets up more often, as if checking something and sitting back down */
.v7-character-layer.working{animation:v8StandSitWork 5.2s steps(2,end) infinite;filter:drop-shadow(0 2px 0 rgba(255,255,255,.45))}
/* review = noticeable stand / sit + warm glow */
.v7-character-layer.review{animation:v8StandSitReview 4.7s steps(2,end) infinite;filter:drop-shadow(0 0 6px rgba(255,197,104,.55))}
.v7-character-layer.done{animation:v8Done 2s steps(2,end) 2}

@keyframes v8StandSitIdle{
  0%,24%,82%,100%{transform:translateY(0) scaleY(1)}
  30%{transform:translateY(-5px) scaleY(1.025)}
  38%,62%{transform:translateY(-11px) scaleY(1.055)}
  70%{transform:translateY(-5px) scaleY(1.025)}
}
@keyframes v8StandSitWork{
  0%,18%,74%,100%{transform:translateY(0) scaleY(1)}
  24%{transform:translateY(-6px) scaleY(1.03)}
  32%,54%{transform:translateY(-13px) scaleY(1.065)}
  62%{transform:translateY(-6px) scaleY(1.03)}
}
@keyframes v8StandSitReview{
  0%,16%,70%,100%{transform:translateY(0) scaleY(1)}
  22%{transform:translateY(-7px) scaleY(1.035)}
  30%,50%{transform:translateY(-14px) scaleY(1.07)}
  58%{transform:translateY(-7px) scaleY(1.035)}
}
@keyframes v8Done{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-12px) scale(1.018)}
  60%{transform:translateY(-3px) scale(1.006)}
}

.v7-monitor{position:absolute;border-radius:3px;background:rgba(210,229,255,.10);box-shadow:0 0 8px rgba(167,206,255,.25);animation:v7Screen 2.1s steps(2,end) infinite}
@keyframes v7Screen{0%,82%,100%{opacity:.15}84%,90%{opacity:.68}}
.v7-typing{position:absolute;display:flex;gap:3px;align-items:center;justify-content:center;height:10px}
.v7-typing i{width:4px;height:4px;border-radius:50%;background:#e26da3;opacity:.22;animation:v7Dot 1s ease-in-out infinite}
.v7-typing i:nth-child(2){animation-delay:.15s}.v7-typing i:nth-child(3){animation-delay:.3s}
@keyframes v7Dot{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-3px);opacity:.9}}

.v7-petal{position:absolute;top:-5%;width:7px;height:5px;border-radius:70% 30% 65% 35%;background:rgba(255,174,206,.86);filter:drop-shadow(0 1px 1px rgba(171,79,121,.12));animation:v7PetalFall linear infinite}
@keyframes v7PetalFall{0%{transform:translate3d(0,-10px,0) rotate(0deg);opacity:0}10%{opacity:.9}100%{transform:translate3d(70px,640px,0) rotate(520deg);opacity:0}}
.v7-zzz{position:absolute;left:7.2%;top:80.5%;font-weight:900;color:#96546f;font-size:10px;letter-spacing:1px;animation:v7Zzz 2.4s ease-in-out infinite;text-shadow:0 1px #fff}
@keyframes v7Zzz{0%,100%{transform:translateY(0) scale(.92);opacity:.25}50%{transform:translateY(-8px) scale(1.05);opacity:.8}}
.v7-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff3ad;box-shadow:0 0 8px #ffd769;animation:v7Spark 2s ease-in-out infinite}
@keyframes v7Spark{0%,100%{transform:scale(.35);opacity:0}45%{transform:scale(1);opacity:.9}60%{transform:scale(.55);opacity:.25}}

.v7-room-focus{position:absolute;border-radius:16px;border:1px solid rgba(255,255,255,0);background:radial-gradient(circle at 50% 42%,rgba(255,255,255,0),rgba(255,255,255,0));transition:.2s ease;pointer-events:none;z-index:3}
.v3-hotspot:hover + .v7-room-focus,.v7-room-focus.active{border-color:rgba(255,255,255,.5);background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.11),rgba(255,255,255,0) 68%);box-shadow:inset 0 0 35px rgba(255,255,255,.12)}

.v7-motion-toggle{position:absolute;left:1.2%;bottom:1.2%;z-index:11;border:1px solid rgba(203,116,156,.45);background:rgba(255,250,253,.88);backdrop-filter:blur(5px);color:#9e466f;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px rgba(127,60,90,.12)}
.v7-motion-toggle.off{opacity:.55}

.v7-motion-off .v7-motion-root,.v7-motion-off .v7-monitor,.v7-motion-off .v7-typing,.v7-motion-off .v7-petal,.v7-motion-off .v7-zzz,.v7-motion-off .v7-spark{display:none!important}
.v7-motion-off .v3-art-image{transform:none!important}
.v7-motion-off.v3-art-stage{transform:none!important}

@media (prefers-reduced-motion: reduce){.v7-motion-root,.v7-monitor,.v7-typing,.v7-petal,.v7-zzz,.v7-spark{display:none!important}.v3-art-stage,.v3-art-image{transform:none!important;transition:none!important}}
@media(max-width:900px){.v7-petal:nth-of-type(n+7){display:none}.v7-motion-toggle{font-size:9px;padding:5px 8px}}