/* A still floor, distant air and a few soft shapes close to the camera. */
.room.has-room-depth {
  --room-depth-x: 0;
  --room-depth-y: 0;
  --room-depth-leaf: #557149;
  --room-depth-leaf-tip: #8eaa6a;
}
.room-depth-backdrop,
.room-depth-air,
.room-depth-near {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.room-depth-backdrop {
  z-index: 0;
  inset: 0;
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  transform: translate3d(calc(var(--room-depth-x) * -2px), calc(var(--room-depth-y) * -1px), 0);
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}
.room-depth-air {
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 16% 15% at 49% 23%, rgba(255, 249, 225, .13), transparent 100%),
    radial-gradient(ellipse 26% 9% at 48% 64%, rgba(255, 243, 205, .11), transparent 100%);
}
.room[data-depth-habitat="garden"] .room-depth-air,
.room[data-depth-habitat="walk"] .room-depth-air {
  background:
    radial-gradient(ellipse 45% 9% at 50% 36%, rgba(243, 250, 225, .17), transparent 100%),
    radial-gradient(ellipse 35% 15% at 50% 67%, rgba(255, 248, 211, .07), transparent 100%);
}
.room[data-depth-habitat="luxury"] .room-depth-air {
  background:
    radial-gradient(ellipse 13% 17% at 50% 29%, rgba(255, 249, 225, .13), transparent 100%),
    radial-gradient(ellipse 26% 8% at 50% 70%, rgba(255, 243, 205, .1), transparent 100%);
}
.room[data-depth-slot="evening"] .room-depth-air { opacity: .7; }
.room[data-depth-slot="night"] .room-depth-air { opacity: .16; }
.room-depth-near {
  z-index: 4;
  inset: 0;
  overflow: hidden;
  contain: strict;
}
.room-depth-branch {
  position: absolute;
  bottom: 104px;
  width: clamp(44px, 8%, 102px);
  height: clamp(170px, 29%, 270px);
  overflow: hidden;
  opacity: .62;
  filter: blur(.6px);
  transform: translate3d(calc(var(--room-depth-x) * 6px), calc(var(--room-depth-y) * 3px), 0);
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
  mask-image: linear-gradient(transparent, #000 23%, #000 77%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 23%, #000 77%, transparent);
}
.room-depth-branch-left { left: -13px; }
.room-depth-branch-right { right: -20px; bottom: 89px; opacity: .43; }
.room-depth-branch::before {
  content: "";
  position: absolute;
  left: 13%;
  top: 15%;
  width: 2px;
  height: 95%;
  background: linear-gradient(transparent, var(--room-depth-leaf) 23%, var(--room-depth-leaf) 88%, transparent);
  transform: rotate(-21deg);
}
.room-depth-leaf {
  position: absolute;
  display: block;
  width: 115%;
  height: 11%;
  border-radius: 85% 8% 78% 12%;
  background: linear-gradient(155deg, var(--room-depth-leaf-tip), var(--room-depth-leaf) 65%);
  box-shadow: inset 0 -1px 2px rgba(20, 37, 22, .12);
  transform-origin: 10% 70%;
}
.room-depth-leaf-0 { left: -35%; top: 8%; transform: rotate(-38deg); }
.room-depth-leaf-1 { left: -55%; top: 34%; transform: rotate(24deg); }
.room-depth-leaf-2 { left: -24%; top: 57%; transform: rotate(-30deg); }
.room-depth-leaf-3 { left: -53%; top: 77%; transform: rotate(28deg); }
.room-depth-branch-right .room-depth-leaf { transform-origin: 90% 70%; border-radius: 12% 82% 18% 72%; }
.room-depth-branch-right .room-depth-leaf-0 { left: 31%; transform: rotate(38deg); }
.room-depth-branch-right .room-depth-leaf-1 { left: 49%; transform: rotate(-34deg); }
.room-depth-branch-right .room-depth-leaf-2 { left: 17%; transform: rotate(33deg); }
.room-depth-branch-right .room-depth-leaf-3 { left: 40%; transform: rotate(-38deg); }
.room-depth-branch-right::before { left: auto; right: 13%; transform: rotate(21deg); }
.room[data-depth-habitat="garden"],
.room[data-depth-habitat="walk"] { --room-depth-leaf: #3f6540; --room-depth-leaf-tip: #82a45a; }
.room[data-depth-habitat="home"] .room-depth-branch-right { display: none; }
.room[data-depth-habitat="luxury"] .room-depth-branch-right { opacity: .3; }
.room[data-depth-slot="evening"] { --room-depth-leaf: #5c6440; --room-depth-leaf-tip: #a39a62; }
.room[data-depth-slot="night"] { --room-depth-leaf: #1b3540; --room-depth-leaf-tip: #496452; }
.room[data-depth-slot="night"] .room-depth-branch { opacity: .48; }
.room-depth-backdrop[hidden], .room-depth-air[hidden], .room-depth-near[hidden] { display: none; }
.room[data-depth-motion="still"] .room-depth-backdrop,
.room[data-depth-motion="still"] .room-depth-branch { transition: none; }

/* LifeSprite supplies translateX(-50%) while animating the primary shadow.
   Anchor it at the actual body centre and retain its existing scale/opacity. */
.room.has-room-depth .pet-shadow,
.room.has-room-depth .companion-pet-shadow {
  /* Both approved idle atlases and stills retain 20.6% transparent bottom
     padding. Put the contact centre at their feet, not at the canvas edge. */
  bottom: calc(20.6% - 12px);
  height: 24px;
}
.room.has-room-depth .pet-shadow {
  left: 50%;
  right: auto;
  width: calc(100% - 84px);
  transform: translateX(-50%) scaleX(1.05);
  background:
    radial-gradient(ellipse 35% 21% at 50% 55%, rgba(65, 52, 36, .32), transparent 100%),
    radial-gradient(ellipse at center, rgba(84, 69, 48, var(--pet-shadow-strength, .18)) 0 32%, rgba(84, 69, 48, .08) 55%, transparent 74%);
  filter: blur(1.5px);
}
.room.has-room-depth .companion-pet-shadow {
  background:
    radial-gradient(ellipse 35% 21% at 50% 55%, rgba(65, 52, 36, .32), transparent 100%),
    radial-gradient(ellipse, rgba(76, 55, 36, .2) 0 28%, rgba(76, 55, 36, .07) 59%, transparent 75%);
  filter: blur(1.5px);
}
@media (max-width: 860px) {
  /* Pair posture rules used desktop offsets even on a cropped mobile room. */
  .app[data-pair-event="nap"] .pet-wrap,
  .app[data-pair-event="nap"] .companion-pet-wrap { bottom: 200px !important; }
  .app[data-pair-event="guard"] .pet-wrap { bottom: 198px !important; }
  .app[data-habitat="luxury"][data-pair-event="nap"] .pet-wrap,
  .app[data-habitat="luxury"][data-pair-event="nap"] .companion-pet-wrap { bottom: 190px !important; }
  .app[data-habitat="luxury"][data-pair-event="guard"] .pet-wrap { bottom: 188px !important; }
  .room-depth-branch { bottom: 91px; opacity: .48; }
  .room-depth-branch-right { bottom: 76px; opacity: .34; }
}
@media (prefers-reduced-motion: reduce) {
  .room-depth-backdrop { transform: none !important; transition: none !important; }
  .room-depth-branch { transform: none !important; transition: none !important; }
}