/* 3 · Obras — «Retablo abierto» (портфолио 02.10, направление C, ведущий S11 + ретабло из Аякучо S19/S21).
   Ниша ретабло во весь рост: в ней мир работы (своя вещь) и живой сайт в телефоне; прокрутка — дверцы закрываются
   и открываются на следующей работе; слева указатель всех работ (S30), справа — что за работа, цена и кнопки.
   Гребень, дверцы и основание — из нашей картинки ретабло (img/retablo/), ниша — шире настоящей. */

.altar { --n: 13; --ink-warm: #24170d; position: relative; height: calc(100svh + var(--n) * 46svh); background: var(--ink-warm); color: var(--paper-hi); }
.altar__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; container-type: size; --iw: 250px; --cw: 240px; --gap: 32px;
  background: radial-gradient(ellipse at 56% 46%, #4a2f17 0%, var(--ink-warm) 64%); }
.altar__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(247, 240, 225, .06) 1px, transparent 1.4px); background-size: 7px 7px; }

/* Указатель: заголовок и все работы столбиком на красной нити, текущая — с узлом */
.altar__index { position: absolute; z-index: 5; left: var(--gutter); top: 50%; width: var(--iw); transform: translateY(-46%); }
.altar__kicker { color: rgba(247, 240, 225, .7); margin-bottom: 10px; }
.altar__title { margin: 0; font: 600 clamp(44px, 4.6vw, 68px)/.9 var(--f-brand); letter-spacing: .02em; }
.altar__lead { margin: 6px 0 20px; font: italic 17px/1.25 var(--f-old); color: rgba(247, 240, 225, .82); }
.altar__names { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.altar__names::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--kipu) 0 6px, var(--kipu-deep) 6px 8px); }
.altar__names li { position: relative; }
.altar__names button { display: block; width: 100%; padding: 3px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 13.5px/1.35 var(--f-display); color: rgba(247, 240, 225, .5); letter-spacing: .02em; transition: color .3s; }
.altar__names button:hover { color: var(--paper-hi); }
.altar__names button span { font-weight: 700; font-size: 11px; margin-right: 4px; }
.altar__names button em { font: italic 12px var(--f-old); color: var(--kipu-hi); }
.altar__names li.is-on button { color: var(--paper-hi); font-weight: 700; }
.altar__names li.is-on::before { content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 14px; transform: translate(-1px, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--kipu-hi), var(--kipu) 55%, var(--kipu-deep)); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* Ретабло: гребень и основание — куски нашей картинки, дверцы — её створки; ниша — во весь рост */
.altar__box { position: absolute; z-index: 3; left: 54%; top: calc(50% + 20px); height: min(86svh, 720px); aspect-ratio: 1000 / 1050; transform: translate(-50%, -50%); }
/* ретабло — по центру свободного места между указателем и подписью и не шире его (02.10: на 1440×874 подпись заезжала на правую дверцу) */
@supports (width: 1cqw) {
  .altar__box { --free: calc(100cqw - 2 * var(--gutter) - var(--iw) - var(--cw) - 2 * var(--gap));
    left: calc(var(--gutter) + var(--iw) + var(--gap) + var(--free) / 2); height: min(86cqh, 720px, calc(var(--free) * 1.05)); }
}
.altar__crest { position: absolute; z-index: 4; left: 16%; right: 16%; top: 0; height: 21%; background: url(img/retablo/crest.webp) center bottom / 100% 100% no-repeat; }
.altar__base { position: absolute; z-index: 4; left: 16%; right: 16%; bottom: 0; height: 15%; background: url(img/retablo/base.webp) center top / 100% 100% no-repeat; }
.altar__niche { position: absolute; z-index: 2; left: 18%; right: 18%; top: 19%; bottom: 14%; overflow: hidden; background: #e2a64c;
  box-shadow: inset 0 0 0 10px #2f5f9c, inset 0 0 0 13px #1d3d6b, inset 0 18px 40px rgba(60, 30, 0, .55); }
.altar__world { position: absolute; inset: 13px; width: calc(100% - 26px); max-width: none; height: calc(100% - 26px); object-fit: cover; transition: transform 6s ease-out; }
.altar__niche::after { content: ""; position: absolute; inset: 13px; pointer-events: none; background: linear-gradient(0deg, rgba(36, 23, 13, .5), rgba(36, 23, 13, 0) 46%); }
.altar__phone { position: absolute; z-index: 2; left: 50%; bottom: 7%; width: 30%; padding: 6px; border-radius: 22px; background: #0d0907;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55); transform: translateX(-50%) rotate(-2deg); }
.altar__live { border-radius: 17px; }
.altar__door { position: absolute; z-index: 5; top: 17%; bottom: 13%; width: 17.4%; background-size: 100% 100%; transition: transform .45s cubic-bezier(.6, 0, .4, 1); }
.altar__door--l { left: 0; background-image: url(img/retablo/door-l.webp); transform-origin: left center; }
.altar__door--r { right: 0; background-image: url(img/retablo/door-r.webp); transform-origin: right center; }
/* закрытые створки ложатся на нишу — каждая на половину (ниша шире настоящей: створки на миг растягиваются) */
.altar__box.is-shut .altar__door--l { transform: translateX(103.4%) scaleX(1.84); }
.altar__box.is-shut .altar__door--r { transform: translateX(-103.4%) scaleX(1.84); }
.altar__ribbon { position: absolute; z-index: 6; left: 50%; top: 15.5%; margin: 0; transform: translateX(-50%); padding: 7px 28px 6px; background: var(--paper-hi); color: var(--ink); white-space: nowrap;
  font: 600 clamp(19px, 2vw, 29px)/1 var(--f-brand); letter-spacing: .06em; box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); max-width: 66%; overflow: hidden; text-overflow: ellipsis; }

/* Подпись справа: номер, что за работа, слова клиента, цифры, цена, кнопки */
.altar__caption { position: absolute; z-index: 5; right: var(--gutter); top: 50%; width: var(--cw); transform: translateY(-44%); }
.altar__no { margin: 0; font: 800 66px/1 var(--f-display); font-stretch: 75%; color: var(--kipu); }
.altar__no small { font-size: 18px; color: rgba(247, 240, 225, .55); font-weight: 600; }
.altar__kind { margin: 10px 0 0; font: 650 11.5px/1.35 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 240, 225, .75); }
.altar__phrase { margin: 8px 0 0; font: italic 19px/1.25 var(--f-old); }
.altar__facts { margin: 10px 0 0; font: 500 13px/1.35 var(--f-display); color: #ffd08a; }
.altar__price { margin: 6px 0 0; font: 700 14px/1.2 var(--f-display); letter-spacing: .04em; }
.altar__price:empty { display: none; }
.altar__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.altar__go, .altar__want { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; font: 700 12px/1 var(--f-display);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s, transform .2s; }
.altar__go { border: 2px solid var(--paper-hi); color: var(--paper-hi); }
.altar__go:hover { background: var(--paper-hi); color: var(--ink); }
.altar__want { background: var(--kipu); color: var(--paper-hi); }
.altar__want:hover { background: var(--kipu-deep); }
.altar__go:active, .altar__want:active { transform: scale(.97); }
.altar__hint { margin: 18px 0 0; font: italic 14px/1.3 var(--f-old); color: rgba(247, 240, 225, .66); }
/* живой сайт у работы со страницей — строкой под кнопками */
.altar__web { display: inline-block; margin-top: 12px; font: italic 17px/1.2 var(--f-old); color: var(--paper-hi); text-underline-offset: 4px; }
.altar__web[hidden] { display: none; }
.altar__web:hover { color: #ffd08a; }

/* Вход: вся ниша — ссылка, печать-узел в углу (S31 — круглая кнопка «View»); наведение — печать крупнее, мир наезжает */
.altar__enter { position: absolute; z-index: 3; inset: 13px; display: block; }
.altar__seal { position: absolute; right: 6%; bottom: 8%; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--kipu-hi), var(--kipu) 55%, var(--kipu-deep)); color: var(--paper-hi);
  font: 750 12px/1.1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(247, 240, 225, .35); transition: transform .3s ease; }
.altar__enter:hover .altar__seal { transform: scale(1.1) rotate(-6deg); }
.altar__niche:hover .altar__world { transform: scale(1.04); }
.altar__enter:focus-visible { outline: 3px solid var(--paper-hi); outline-offset: -8px; }
.altar__enter:active .altar__seal { transform: scale(.95); }

@media (max-width: 1100px) and (min-width: 901px) { .altar__stage { --iw: 200px; --cw: 200px; --gap: 24px; } }
/* телефон и планшет стоя (до 900 px): указатель сверху, ретабло по центру, подпись снизу */
@media (max-width: 900px) {
  .altar { height: calc(100svh + var(--n) * 40svh); }
  .altar__stage { min-height: 640px; }
  .altar__index { top: 56px; left: 18px; right: 18px; width: auto; transform: none; }
  .altar__kicker { display: none; }
  .altar__title { font-size: 38px; }
  .altar__lead { margin: 2px 0 0; font-size: 15px; }
  .altar__names { display: none; }
  /* ретабло не доходит до подписи и на низком телефоне (375×660 с полосами браузера): под подпись — 400 px от высоты (en: две строки вида и кнопки в два ряда) */
  .altar__box { left: 50%; top: 140px; height: auto; width: min(116vw, 62svh, calc((100svh - 400px) * .952)); transform: translateX(-50%); }
  .altar__ribbon { font-size: 17px; padding: 6px 20px 5px; }
  .altar__caption { left: 18px; right: 18px; top: auto; bottom: 18px; width: auto; transform: none; }
  .altar__no { display: inline; font-size: 34px; }
  .altar__kind { display: inline; margin-left: 8px; font-size: 10px; }
  .altar__phrase { margin-top: 6px; font-size: 16px; }
  .altar__facts { margin-top: 6px; font-size: 12px; }
  .altar__price { display: none; }
  .altar__acts { margin-top: 10px; }
  .altar__go, .altar__want { min-height: 42px; padding: 9px 14px; font-size: 11px; }
  .altar__hint { display: none; }
  .altar__seal { width: 62px; height: 62px; font-size: 10px; letter-spacing: .1em; }
  .altar__web { display: none; }
}
@media (prefers-reduced-motion: reduce) { .altar__door, .altar__world { transition: none; } }

/* Живая лента: сайт листается в телефоне сам — кадр стоит, потом едет к следующему (obras.js) */
.altar__live { position: relative; overflow: hidden; background: #fff; }
.altar__live .live__strip { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform: translateY(0); transition: transform 1s cubic-bezier(.6, 0, .25, 1); }