/* ==========================================================================
   INTERIOLYFX - 3D ROOM STYLESHEET
   Pure CSS 3D Model Room with Lighting, Walls, Floors, Furniture & Palette Presets
   ========================================================================== */

.stage {
  position: relative;
  height: 520px;
  display: grid;
  place-items: center;
  perspective: 1400px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.stage:active {
  cursor: grabbing;
}

/* Ambient Color Blob Behind Room */
.blob {
  position: absolute;
  width: 470px;
  height: 470px;
  background-color: var(--blob);
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  transition: background-color 0.6s ease;
  z-index: 0;
  pointer-events: none;
}

/* 3D Room Container */
.room {
  position: relative;
  width: 560px;
  height: 360px;
  transform-style: preserve-3d;
  z-index: 1;
  transform: scale(0.82);
  margin-top: 20px;
  will-change: transform;
}

.room > div,
.cube > div {
  position: absolute;
}

.face {
  left: 50%;
  top: 50%;
}

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

.cube {
  position: absolute;
  transform-style: preserve-3d;
}

/* Back Wall */
.wb {
  width: 560px;
  height: 360px;
  transform: translateZ(-280px);
  background: linear-gradient(var(--wall), var(--wall2));
}

/* Left Wall */
.wl {
  width: 560px;
  height: 360px;
  transform: rotateY(90deg) translateZ(-280px);
  background-color: var(--wall2);
  filter: brightness(0.88);
}

/* Right Wall */
.wr {
  width: 560px;
  height: 360px;
  transform: rotateY(-90deg) translateZ(-280px);
  background-color: var(--wall2);
  filter: brightness(0.74);
}

/* Hardwood Floor */
.fl {
  width: 560px;
  height: 560px;
  top: -100px;
  transform: rotateX(90deg) translateZ(-180px);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 56px), var(--floor);
}

/* Window with Sunlight Diffusion */
.win {
  left: 150px;
  top: 50px;
  width: 150px;
  height: 170px;
  transform: translateZ(-279px);
  background: linear-gradient(#bfe3ee, #fbeecb);
  border: 8px solid #f6f4ee;
  box-shadow: 0 0 40px rgba(251, 238, 203, 0.55);
}

.win::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#f6f4ee 0 0) center / 6px 100% no-repeat,
              linear-gradient(#f6f4ee 0 0) center / 100% 6px no-repeat;
}

/* Wall Art Frame */
.frame {
  width: 70px;
  height: 90px;
  background: linear-gradient(135deg, var(--m), #8a6a1c 60%, #f0d98a);
  border: 5px solid #f6f4ee;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25);
}

/* Floor Contact Shadows */
.shadow {
  background-color: rgba(0, 0, 0, 0.38);
  filter: blur(9px);
}

/* Handwritten Stage Callouts */
.stage-note {
  position: absolute;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--g);
  z-index: 3;
  pointer-events: none;
}

.stage-note-top {
  left: 2%;
  top: 6%;
  transform: rotate(-5deg);
}

.stage-note-bottom {
  right: 2%;
  bottom: 4%;
  transform: rotate(3deg);
}

.stage-note svg {
  width: 70px;
  fill: none;
  stroke: var(--g);
  stroke-width: 2.5;
  stroke-linecap: round;
  display: block;
}

/* ==========================================================================
   Mini Read-Only 3D Room (For Service Detail Pages)
   ========================================================================== */
.stage-mini {
  height: 320px;
  cursor: default;
  perspective: 1100px;
}

.stage-mini:active {
  cursor: default;
}

.stage-mini .blob {
  width: 300px;
  height: 300px;
}

.stage-mini .room {
  transform: scale(0.55) rotateX(-12deg) rotateY(-26deg);
  margin-top: 0;
}

/* Scoped Palette Themes for Service Mini-Rooms */
[data-room-palette="chalk"] {
  --wall: #e9e5d8;
  --wall2: #d6d1c1;
  --floor: #8a6a48;
  --sofa: #2f4a8a;
  --blob: #e9b8a6;
}

[data-room-palette="haldi"] {
  --wall: #e0b13c;
  --wall2: #c9992a;
  --floor: #6e5a4a;
  --sofa: #2c3a2a;
  --blob: #f1efe8;
}

[data-room-palette="mehendi"] {
  --wall: #7d9560;
  --wall2: #657a4c;
  --floor: #a98a62;
  --sofa: #f1efe8;
  --blob: #dba11c;
}

[data-room-palette="neel"] {
  --wall: #34508a;
  --wall2: #283f6e;
  --floor: #8a6a48;
  --sofa: #dba11c;
  --blob: #e9b8a6;
}

[data-room-palette="gulabi"] {
  --wall: #d98e9b;
  --wall2: #bf7683;
  --floor: #6e5a4a;
  --sofa: #2c3a2a;
  --blob: #dba11c;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .stage {
    height: 400px;
  }

  .stage .room {
    transform: scale(0.55);
  }

  .blob {
    width: 340px;
    height: 340px;
  }

  .stage-note {
    display: none;
  }

  .stage-mini {
    height: 260px;
  }

  .stage-mini .room {
    transform: scale(0.44) rotateX(-12deg) rotateY(-26deg);
  }
}