/* «Наши работы» — хроника собранных букетов.
 *
 * Эстетика намеренно НЕ каталожная. Каталог отвечает на «что купить»,
 * эта страница — на «кто это делает»: живая лента с датами, составом
 * и честной ценой на сегодня. Поэтому крупная засечная типографика,
 * асимметрия и воздух, а не ровная сетка плиток.
 *
 * ⚠ Тёмный фон здесь не выбор настроения, а условие: снимки букетов
 * сняты на тёмном, и на кремовом фоне сайта они выглядят вырезанными.
 * Страница держит свою тему независимо от остальных — единственное
 * место на сайте, где это оправдано.
 *
 * ⚠ Движение сделано CSS и одним наблюдателем, без библиотек: страницу
 * открывают с телефона в горячий час, и три секунды на скрипты ради
 * красоты — это ушедший покупатель.
 */

.rb {
  /* ⚠ Переменные ТЁМНОЙ темы сайта — те же значения, что в critical.css
     под [data-theme="dark"]. Страница держит тёмный вид независимо от
     темы сайта, но цвета берёт фирменные, а не свои: иначе золото здесь
     и золото на кнопке «В корзину» разъедутся при первой же правке
     палитры. Благодаря этому на странице работают обычные .btn. */
  --color-bg:            #14110D;
  --color-surface:       #221D16;
  --color-surface-raised:#2A241C;
  --color-text:          #FAF6EF;
  --color-text-soft:     #C9BDAB;
  --color-accent:        #D9B383;
  --color-accent-hover:  #E8C79C;
  --color-accent-text:   #D9B383;
  --color-border:        rgba(250, 246, 239, 0.12);
  --color-border-strong: rgba(250, 246, 239, 0.20);
  --color-on-accent:     #1C1712;

  --rb-bg:      #14110D;
  --rb-tuman:   #221D16;
  --rb-tekst:   #FAF6EF;
  --rb-tihiy:   #C9BDAB;
  --rb-zoloto:  #D9B383;

  position: relative;
  min-height: 100vh;
  background: var(--rb-bg);
  color: var(--rb-tekst);
  overflow: clip;
}

/* Живой фон: размытый кадр текущей работы. Меняется при прокрутке —
   страница дышит тем, что на ней показано. */
.rb__fon {
  position: fixed;
  inset: -12vh -12vw;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(1.4);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.2s ease, background-image 0s;
  pointer-events: none;
}

.rb__fon.is-vidno { opacity: 0.55; }

/* ⚠ Вуаль между фоном и текстом обязательна, а не «для настроения».
   Первая живая проверка на телефоне: светлый размытый кадр поднял фон
   до уровня текста, и состав с ценой стали нечитаемы — при том что
   цвета формально «фирменные». Фотография всегда светлее, чем ждёшь;
   контраст держит вуаль, а не удачный кадр. */
.rb::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20, 17, 13, 0.86),
    rgba(20, 17, 13, 0.78) 45%,
    rgba(20, 17, 13, 0.88)
  );
}

/* Зерно поверх всего: без него размытый фон выглядит цифровой кашей,
   с ним — плёнкой. Рисуется один раз, ничего не грузит. */
.rb::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.rb__soderzhimoe {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 120px;
}

/* ── Обложка ────────────────────────────────────────────────────── */

.rb__shapka {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 40px;
}

.rb__znak {
  width: 64px;
  height: 64px;
  color: var(--rb-zoloto);
  margin-bottom: 28px;
  animation: rb-znak 1.4s cubic-bezier(.22,.61,.36,1) both;
}

.rb__znak svg { width: 100%; height: 100%; display: block; }

.rb__znak path {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: rb-linia 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}

.rb__znak path:nth-child(2) { animation-delay: 0.22s; }
.rb__znak path:nth-child(3) { animation-delay: 0.42s; }

.rb__zagolovok {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(52px, 13vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* Вторая строка курсивом и золотом — единственное цветное пятно
   первого экрана. Дальше цвет отдан фотографиям. */
.rb__zagolovok em {
  display: block;
  font-style: italic;
  color: var(--rb-zoloto);
  padding-left: 0.12em;
}

.rb__podpis {
  max-width: 34em;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.65;
  color: var(--rb-tihiy);
  margin: 0 0 30px;
}

.rb__cifry {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.rb__cifra b {
  display: block;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  color: var(--rb-zoloto);
}

.rb__cifra span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-tihiy);
}

/* ── Лента работ ────────────────────────────────────────────────── */

.rb__rabota {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 96px;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.22,.61,.36,1);
}

.rb__rabota.is-vidno { opacity: 1; transform: none; }

/* Асимметрия: каждая вторая работа сдвинута и уже. Ровная сетка
   читается как склад, смещённая — как разворот журнала. */
@media (min-width: 760px) {
  .rb__rabota { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }
  .rb__rabota:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
  .rb__rabota:nth-child(even) .rb__kadr { order: 2; }
  .rb__rabota:nth-child(3n) { margin-left: 6%; }
  .rb__rabota:nth-child(4n) { margin-right: 8%; }
}

.rb__kadr {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--rb-tuman);
  aspect-ratio: 3 / 4;
}

.rb__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.rb__rabota:hover .rb__kadr img { transform: scale(1.06); }

.rb__nomer {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--rb-tekst);
  background: rgba(20, 17, 13, 0.55);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 2px;
}

.rb__data {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-tihiy);
  margin: 0 0 10px;
}

.rb__imya {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.1;
  margin: 0 0 14px;
}

/* Описание — то, ради чего страница называется «нашей гордостью».
   Набрано засечным вразрядку: это не подпись к фотографии, а текст,
   который читают. Ограничение по ширине обязательно — при 1080 px
   строка шла бы в 130 знаков при читаемых 60–75. */
.rb__slova {
  max-width: 34em;
  margin: -4px 0 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.55;
  color: var(--rb-tekst);
  opacity: 0.88;
}

.rb__cena {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  color: var(--rb-zoloto);
  margin: 0 0 4px;
}

.rb__cena small {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--rb-tihiy);
  margin-top: 4px;
}

/* Состав — то, чего почти не показывают цветочные сайты. Он объясняет
   цену лучше любого текста про качество. */
.rb__sostav {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  border-top: 1px solid rgba(250, 246, 239, 0.12);
}

.rb__sostav li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--rb-tihiy);
  border-bottom: 1px solid rgba(250, 246, 239, 0.07);
}

.rb__sostav b { color: var(--rb-tekst); font-weight: 500; }

/* ── Можно ли собрать сегодня ───────────────────────────────────── */

.rb__mozhno {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 14px;
  border-radius: 2px;
  font-size: 13.5px;
  line-height: 1.45;
}

.rb__mozhno--da {
  background: rgba(111, 191, 149, 0.14);
  color: #9FD9BC;
}

.rb__mozhno--pochti {
  background: rgba(217, 179, 131, 0.14);
  color: var(--rb-zoloto);
}

.rb__mozhno--net {
  background: rgba(250, 246, 239, 0.07);
  color: var(--rb-tihiy);
}

/* ⚠ Кнопки — общие .btn/.btn--primary/.btn--secondary сайта, а не свои.
   Первая редакция рисовала прямоугольник с золотой рамкой; на сайте
   кнопка — пилюля (--radius-pill), и на фоне остальных страниц это
   читалось как чужой раздел. Здесь остаются только отступы. */
.rb__knopki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@keyframes rb-linia { to { stroke-dashoffset: 0; } }

@keyframes rb-znak {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ⚠ Без движения страница обязана остаться читаемой, а не пустой:
   карточки появляются скриптом, и если отключить им переход, они
   так и не проявятся. Поэтому показываем сразу. */
@media (prefers-reduced-motion: reduce) {
  .rb__rabota { opacity: 1; transform: none; transition: none; }
  .rb__znak, .rb__znak path { animation: none; stroke-dashoffset: 0; }
  .rb__kadr img { transition: none; }
  .rb__fon { transition: none; }
}