/* ARTTIM — сцены для модуля «как работа будет смотреться у вас».

   Три пространства собраны средствами CSS: стена, пол, плинтус и намёк на мебель
   силуэтом. Причины ровно две:

   1. Чужая комната с чужой мебелью — самая частая претензия к такому модулю
      («картина залезает на диван», «это не мой дом»). У сцены, собранной кодом,
      зона для работы задана числом, и наложение физически невозможно.
   2. Свободных фотографий нужного размера, света и без чужой развески найти не
      удалось: кадры из открытых источников выходили либо мрачными, либо уже
      занятыми другими картинами и подписями. Сцена весит 0 КБ — телефону легче.

   Когда у автора появятся фотографии работ у заказчиков, сцену можно заменить
   на реальный интерьер: модуль берёт картинку из data/works.json, а зону — из
   настроек в js/pages.js (ROOMS). */

.stage{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0b0a0d;isolation:isolate;
}
.stage__wall,.stage__floor,.stage__base,.stage__furn{position:absolute}
.stage__wall{inset:0}
.stage__floor{left:0;right:0;bottom:0;height:21%}
.stage__base{left:0;right:0;bottom:21%;height:7px;z-index:2}

/* работа: положение и ширина задаются из js/pages.js (--ix, --iy, --iw),
   высота считается от РЕАЛЬНЫХ сантиметров, поэтому 120 × 90 см — это ровно
   120 × 90 см на стене, а не «как влезло» */
.inroom__work{
  position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);z-index:3;
  box-shadow:0 26px 48px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.16);
  transition:left .4s cubic-bezier(.22,.61,.36,1),top .4s cubic-bezier(.22,.61,.36,1),
             width .4s cubic-bezier(.22,.61,.36,1);
}
.inroom__work::after{
  content:'';position:absolute;left:-4%;right:-4%;top:100%;height:14%;
  background:radial-gradient(52% 100% at 50% 0,rgba(0,0,0,.5),rgba(0,0,0,0) 74%);
}
/* полоска света по верхней кромке работы: так рамка читается объёмной */
.inroom__work::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,236,205,0),rgba(255,236,205,.5),rgba(255,236,205,0));
}
.inroom__work img{display:block;width:100%;height:auto;background:#12100f}

/* ── 1. ГОСТИНАЯ: тёплая штукатурка, дерево, светлый диван ── */
.stage[data-scene="living"] .stage__wall{
  background:
    radial-gradient(58% 62% at 50% 0%,rgba(255,214,160,.22),rgba(255,214,160,0) 68%),
    linear-gradient(180deg,#312721,#241d19 72%,#1d1815);
}
.stage[data-scene="living"] .stage__floor{
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,rgba(0,0,0,0) 2px 46px),
    linear-gradient(180deg,#2a1f18,#191310);
}
.stage[data-scene="living"] .stage__base{background:linear-gradient(180deg,#3a2f28,#221b17)}
.stage[data-scene="living"] .stage__furn{
  left:50%;bottom:21%;transform:translateX(-50%);width:52%;height:15%;
  border-radius:26px 26px 6px 6px;
  background:linear-gradient(180deg,#332b25,#221c18 78%),linear-gradient(180deg,#4a3f36,#2a231e);
  box-shadow:inset 0 1px 0 rgba(255,225,180,.18),0 20px 28px -20px rgba(0,0,0,.95);
}
/* спинки дивана: две подушки со скруглением и своей тенью — иначе силуэт
   читается как скамья, а не как мебель в гостиной */
.stage[data-scene="living"] .stage__furn::before,
.stage[data-scene="living"] .stage__furn::after{
  content:'';position:absolute;top:-46%;height:78%;width:29%;
  border-radius:14px 14px 3px 3px;
  background:linear-gradient(180deg,#5b4f44,#312922);
  box-shadow:inset 0 1px 0 rgba(255,228,186,.22),0 10px 16px -12px rgba(0,0,0,.9);
}
.stage[data-scene="living"] .stage__furn::before{left:5%}
.stage[data-scene="living"] .stage__furn::after{right:5%}
/* тень под диваном: прижимает мебель к полу, а работу — к стене */
.stage[data-scene="living"] .stage__floor::before{
  content:'';position:absolute;left:24%;right:24%;top:0;height:14%;
  background:radial-gradient(60% 100% at 50% 0,rgba(0,0,0,.6),rgba(0,0,0,0) 75%);
}
/* мягкое затемнение по краям стены — глубина без картинки и без нагрузки */
.stage__wall::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(115% 95% at 50% 38%,rgba(0,0,0,0) 52%,rgba(0,0,0,.42) 100%);
}

/* ── 2. ГАЛЕРЕЯ: прохладная стена, светлый полированный пол, скамья ── */
.stage[data-scene="gallery"] .stage__wall{
  background:
    radial-gradient(40% 70% at 22% -6%,rgba(255,240,214,.20),rgba(255,240,214,0) 62%),
    radial-gradient(40% 70% at 78% -6%,rgba(255,240,214,.20),rgba(255,240,214,0) 62%),
    linear-gradient(180deg,#33333a,#26262c 70%,#222228);
}
.stage[data-scene="gallery"] .stage__floor{
  background:linear-gradient(180deg,#6a6a70,#3d3d43 60%,#33333a);
}
.stage[data-scene="gallery"] .stage__floor::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.25));
}
.stage[data-scene="gallery"] .stage__base{background:linear-gradient(180deg,#43434b,#2a2a30)}
.stage[data-scene="gallery"] .stage__furn{
  left:50%;bottom:21%;transform:translateX(-50%);width:26%;height:7%;
  border-radius:8px 8px 0 0;background:linear-gradient(180deg,#4a4a52,#2d2d33);
  box-shadow:0 14px 22px -16px rgba(0,0,0,.85);
}

/* ── 3. КАБИНЕТ: тёмно-зелёная стена, латунный свет, кресло ── */
.stage[data-scene="study"] .stage__wall{
  background:
    radial-gradient(46% 58% at 18% -4%,rgba(255,206,140,.24),rgba(255,206,140,0) 64%),
    linear-gradient(180deg,#22302a,#1a2420 72%,#161f1c);
}
.stage[data-scene="study"] .stage__floor{
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 2px,rgba(0,0,0,0) 2px 40px),
    linear-gradient(180deg,#241c16,#15100d);
}
.stage[data-scene="study"] .stage__base{background:linear-gradient(180deg,#2c2620,#1b1613)}
.stage[data-scene="study"] .stage__furn{
  left:9%;bottom:21%;width:23%;height:19%;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#3d3a33,#26241f);
  box-shadow:inset 0 2px 0 rgba(255,220,170,.22),0 16px 24px -18px rgba(0,0,0,.9);
}
.stage[data-scene="study"] .stage__furn::after{
  content:'';position:absolute;right:-34%;bottom:0;width:34%;height:64%;
  border-radius:6px 6px 0 0;background:linear-gradient(180deg,#2f4a3b,#1e2f26);
}

/* подпись внизу сцены: не мешает разглядывать работу */
.inroom__hint{
  position:absolute;left:14px;bottom:14px;right:auto;z-index:4;
  font:600 11.5px/1.45 var(--txt);letter-spacing:.03em;color:var(--text);
  background:rgba(10,9,12,.66);border:1px solid var(--line);
  padding:9px 12px;border-radius:11px;backdrop-filter:blur(6px);max-width:74%;
}
@media (max-width:700px){
  .stage{aspect-ratio:4/3}
  .inroom__hint{position:static;margin:12px 0 0;max-width:none;background:transparent;
    border:0;padding:0;backdrop-filter:none;color:var(--mut)}
}