/* ============================================================
   CRYSTAL — страница «Банкеты» (владелец WD, классы cr-bq-*).
   Порт макета «Crystal - Банкеты.dc.html»: сине-зелёный пролог «воды»
   с буквой «Б» → мост тьма→лён → «Почему Crystal» → драг-лента кадров
   с эффектом заглушки → «Форматы» → «Церемония» → тёмный финал с формой.

   Здесь же — ПЕРЕИСПОЛЬЗУЕМЫЙ слайдер-линза [data-cr-lens-slider]
   (классы cr-lens-*): кадр за матовым стеклом (blur), в кадре — резкое
   окно clip-path:circle(), активный кадр (.is-live, ставит JS по центру
   вьюпорта) наводится на резкость — окно раскрывается на весь кадр
   по кривой cubic-bezier(.22,1,.36,1). Drag мышью (grab/grabbing,
   отмена клика после перетаскивания — JS в шаблоне), на таче —
   нативный скролл со scroll-snap.

   Кадр задаёт фон и точку линзы кастом-свойствами:
     --cr-slide-bg — фон кадра (градиент-плейсхолдер или медиа-подложка)
     --cr-lens-x / --cr-lens-y — центр резкого окна.
   Капса кириллицы нет: трекинг макета сохранён, буквы строчные.
   ============================================================ */

/* Тёмная страница (контракт с хромом): фон за пределами секций — ink */
body.cr-dark{background-color:#16120E}

/* Пролог уходит под стеклянную плашку шапки (в макете шапка fixed) */
.cr-banquets{margin-top:calc(-1 * var(--cr-hdr-full,88px))}

/* ---------- reveal: «дорогая» скорость макета + каскад задержек ---------- */
.cr-banquets .cr-reveal{
	transition:opacity 1.15s cubic-bezier(.22,.61,.36,1) var(--cr-rvd,0s),
		transform 1.15s cubic-bezier(.22,.61,.36,1) var(--cr-rvd,0s)}
.cr-banquets .cr-reveal:not(.is-in){transform:translateY(18px)}
.cr-banquets .cr-rvd-1{--cr-rvd:.12s}
.cr-banquets .cr-rvd-2{--cr-rvd:.24s}
.cr-banquets .cr-rvd-3{--cr-rvd:.36s}

/* ---------- пролог: единственная сине-зелёная сцена «воды» ---------- */
.cr-bq-hero{position:relative;min-height:64svh;display:flex;align-items:flex-end;overflow:hidden;
	color:#E7E1D6;box-sizing:border-box;
	padding:clamp(120px,18vh,200px) var(--cr-gutter) clamp(70px,10vh,120px);
	background:
		radial-gradient(70% 50% at 76% 18%,rgba(194,98,46,.45) 0%,rgba(194,98,46,0) 58%),
		radial-gradient(60% 50% at 20% 90%,rgba(74,86,69,.55) 0%,rgba(74,86,69,0) 60%),
		linear-gradient(180deg,#3c4a44 0%,#2b342f 40%,#16120E 100%)}
.cr-bq-hero__body{position:relative;max-width:760px;z-index:1}

/* зерно этих сцен даёт общая дизер-плёнка из cr-ui.css */

/* гигантские буквы-глифы */
.cr-bq-glyph{position:absolute;font-weight:200;line-height:.9;pointer-events:none;
	user-select:none;-webkit-user-select:none}
.cr-bq-glyph--hero{right:-8vw;top:-12vh;font-size:56vmin;color:rgba(241,235,225,.05);will-change:transform}
.cr-bq-glyph--wine{left:-5vw;bottom:-16vh;font-size:42vmin;color:rgba(107,34,51,.045)}

/* ---------- типографика ---------- */
.cr-bq-eyebrow{display:flex;align-items:center;gap:14px;margin:0;
	font-size:11px;font-weight:400;letter-spacing:.3em;color:rgba(231,225,214,.55)}
.cr-bq-eyebrow::before{content:"";flex:none;width:34px;height:1px;background:rgba(231,225,214,.4)}
.cr-bq-eyebrow--wood{color:#8A6A4B}
.cr-bq-eyebrow--wood::before{background:rgba(138,106,75,.5)}
.cr-bq-eyebrow--center{justify-content:center}
.cr-bq-eyebrow--center::after{content:"";flex:none;width:34px;height:1px;background:rgba(231,225,214,.4)}

.cr-bq-h1{margin:24px 0 0;font-weight:200;font-size:clamp(38px,5.8vw,80px);
	letter-spacing:.05em;line-height:1.04;text-wrap:balance;
	background:linear-gradient(112deg,#f5efe4 0%,#c9bda6 26%,#fffdf6 44%,#b3a488 62%,#ece4d2 80%,#cfc4b2 100%);
	background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.14);
	filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
	animation:crBqSheen 8s linear infinite}
@keyframes crBqSheen{to{background-position:200% 0}}

.cr-bq-lead{margin:24px 0 0;font-weight:300;font-size:16px;line-height:1.85;
	color:rgba(231,225,214,.72);max-width:52ch}
.cr-bq-h2{margin:22px 0 0;font-weight:250;font-size:clamp(28px,3.6vw,48px);
	letter-spacing:.02em;line-height:1.12;color:#2A231C;max-width:24ch;text-wrap:balance}

/* кнопка-линия «тихое действие»; линия растёт 44→66px (по Зайцу) */
.cr-bq-linebtn{display:inline-block;color:#6B2233;font-size:12px;font-weight:400;
	letter-spacing:.24em;text-decoration:none;transition:color .3s ease}
.cr-bq-linebtn::after{content:"";display:block;width:44px;height:1px;margin-top:9px;
	background:currentColor;opacity:.7;transition:width .45s cubic-bezier(.22,1,.36,1)}
.cr-bq-linebtn:hover{color:#C2622E}
.cr-bq-linebtn:hover::after{width:66px}
.cr-bq-linebtn--dark{color:#E7E1D6}
.cr-bq-linebtn--dark:hover{color:#C2622E}
.cr-bq-actions{margin-top:32px;display:flex;gap:34px;flex-wrap:wrap}

/* ---------- мост тьма → лён: общая рампа темы (--cr-ramp-dawn) + дизер ---------- */
.cr-bq-bridge{height:clamp(220px,34vh,420px);
	background-image:var(--cr-ramp-dawn)}

/* ---------- светлые секции (сетка — из токенов cr-ui.css) ---------- */
.cr-bq-sec{padding:clamp(70px,10vh,120px) var(--cr-gutter);box-sizing:border-box}
.cr-bq-sec__in{position:relative;max-width:var(--cr-content);margin:0 auto}
.cr-bq-sec--linen{background:#F1EBE1;color:#2A231C}
.cr-bq-sec--linen2{background:#EAE2D4;color:#2A231C;position:relative;overflow:hidden}

/* ---------- «Почему Crystal»: 6 карточек-строк ---------- */
.cr-bq-cards{margin-top:40px;display:grid;gap:clamp(18px,2.6vw,32px);
	grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.cr-bq-card{border-top:1px solid rgba(42,35,28,.16);padding-top:18px}
.cr-bq-card__t{font-weight:250;font-size:20px;color:#2A231C}
.cr-bq-card__p{margin:8px 0 0;font-weight:300;font-size:14px;line-height:1.75;color:rgba(42,35,28,.64)}

/* ============================================================
   ЛЕНТА КАДРОВ — слайдер-линза [data-cr-lens-slider]
   ============================================================ */
.cr-bq-strip-sec{background:#F1EBE1;padding:0 0 clamp(70px,10vh,120px)}

.cr-lens-strip{display:flex;gap:14px;overflow-x:auto;
	/* поля ленты = поля контентной колонки: первый кадр начинается ровно там,
	   где начинается текст секций (на широких экранах колонка центрируется) */
	padding:6px max(var(--cr-gutter),calc((100% - var(--cr-content)) / 2)) 30px;
	/* без scroll-padding браузер приклеивал первый кадр к самому краю окна,
	   съедая поле ленты (scroll-snap равняется по краю скроллпорта) */
	scroll-padding-inline:max(var(--cr-gutter),calc((100% - var(--cr-content)) / 2));
	scroll-snap-type:x proximity;cursor:grab;
	scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cr-lens-strip::-webkit-scrollbar{display:none}
.cr-lens-strip.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;
	user-select:none;-webkit-user-select:none}

/* кадр: фон из --cr-slide-bg, прямые углы, глубокая тень макета */
.cr-lens-slide{position:relative;overflow:hidden;flex:0 0 auto;margin:0;
	width:min(420px,78vw);aspect-ratio:4/3;scroll-snap-align:start;
	border-radius:var(--cr-radius-frame);
	display:flex;align-items:flex-end;justify-content:flex-start;
	padding:16px;box-sizing:border-box;
	background:var(--cr-slide-bg,#2A231C);
	box-shadow:0 22px 44px -26px rgba(42,35,28,.5)}

/* слой 1 — матовое стекло поверх кадра (эффект заглушки) */
.cr-lens-slide__frost{position:absolute;inset:0;pointer-events:none;
	-webkit-backdrop-filter:blur(8px) saturate(.96);backdrop-filter:blur(8px) saturate(.96);
	background:rgba(241,235,225,.05)}
/* слой 2 — белая дымка-ободок резкого окна */
.cr-lens-slide__haze{position:absolute;inset:0;pointer-events:none;
	clip-path:circle(30% at var(--cr-lens-x,58%) var(--cr-lens-y,44%));
	background:rgba(255,255,255,.28);
	transition:opacity .7s cubic-bezier(.22,1,.36,1)}
/* слой 3 — резкая копия кадра в окне-линзе */
.cr-lens-slide__sharp{position:absolute;inset:0;pointer-events:none;
	clip-path:circle(29.2% at var(--cr-lens-x,58%) var(--cr-lens-y,44%));
	background:var(--cr-slide-bg,#2A231C);
	filter:saturate(1.18) brightness(1.08);
	transition:clip-path .9s cubic-bezier(.22,1,.36,1)}

/* активный кадр (по центру вьюпорта) наводится на резкость:
   окно раскрывается на весь кадр, дымка тает */
.cr-lens-slide.is-live .cr-lens-slide__sharp{
	clip-path:circle(125% at var(--cr-lens-x,58%) var(--cr-lens-y,44%))}
.cr-lens-slide.is-live .cr-lens-slide__haze{opacity:0}

/* подпись кадра: шот-лист в ромбиках */
.cr-lens-slide__cap{position:relative;display:flex;align-items:center;gap:10px;
	color:rgba(231,225,214,.65);font-size:10px;letter-spacing:.26em}
.cr-lens-slide__cap::before,.cr-lens-slide__cap::after{content:"";flex:none;
	width:5px;height:5px;background:#C2622E;transform:rotate(45deg)}
.cr-lens-slide--light .cr-lens-slide__cap{color:rgba(42,35,28,.6)}
.cr-lens-slide--light .cr-lens-slide__cap::before,
.cr-lens-slide--light .cr-lens-slide__cap::after{background:#6B2233}

/* ---------- форматы: строки-hairline ---------- */
.cr-bq-rows{margin-top:40px}
.cr-bq-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
	padding:20px 0;border-top:1px solid rgba(42,35,28,.14);flex-wrap:wrap}
.cr-bq-rows > .cr-bq-row:last-child{border-bottom:1px solid rgba(42,35,28,.14)}
.cr-bq-row__t{font-weight:250;font-size:clamp(20px,2.4vw,27px);color:#2A231C}
.cr-bq-row__cap{font-size:11px;letter-spacing:.22em;color:#8A6A4B}
.cr-bq-note{margin:32px 0 0;font-weight:300;font-size:14px;line-height:1.8;
	color:rgba(42,35,28,.6);max-width:64ch}

/* ---------- церемония: шаги 01–04 ---------- */
.cr-bq-steps{margin-top:40px;display:grid;gap:clamp(18px,2.6vw,32px);
	grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.cr-bq-step{border-top:1px solid rgba(42,35,28,.16);padding-top:18px}
.cr-bq-step__n{font-size:10px;letter-spacing:.2em;color:#8A6A4B}
.cr-bq-step__t{margin-top:10px;font-weight:250;font-size:19px;color:#2A231C}
.cr-bq-step__p{margin:8px 0 0;font-weight:300;font-size:14px;line-height:1.75;color:rgba(42,35,28,.64)}

/* ---------- заявка: тёмный финал с формой на стекле ---------- */
.cr-bq-request{position:relative;overflow:hidden;color:#E7E1D6;box-sizing:border-box;
	padding:clamp(90px,14vh,160px) var(--cr-gutter) 40px;
	background-image:var(--cr-ramp-dusk-fast)}
.cr-bq-request__in{position:relative;max-width:var(--cr-narrow);margin:0 auto;padding-top:12vh;z-index:1}
/* финал без формы: телефон-гигант + кнопка, открывающая модалку брони */
.cr-bq-request__cta{margin-top:clamp(28px,5vh,44px);display:flex;flex-direction:column;
	align-items:center;gap:18px}
.cr-bq-request__phone{font-weight:200;font-size:clamp(32px,5vw,60px);letter-spacing:.06em;
	color:#F1EBE1;text-decoration:none;transition:color .3s ease}
.cr-bq-request__phone:hover{color:#C2622E}
.cr-bq-request__cta .cr-bq-form__note{margin-top:6px}
.cr-bq-request__head{text-align:center}
.cr-bq-request__title{margin:22px 0 0;font-weight:250;font-size:clamp(26px,3.4vw,44px);
	letter-spacing:.02em;line-height:1.14;color:#F1EBE1}
.cr-bq-request__text{margin:16px auto 0;font-weight:300;font-size:14px;line-height:1.8;
	color:rgba(231,225,214,.6);max-width:48ch}
.cr-bq-request__tel{color:#E7E1D6;text-decoration:none;white-space:nowrap;
	border-bottom:1px solid rgba(231,225,214,.4);transition:color .3s ease}
.cr-bq-request__tel:hover{color:#C2622E}

/* форма на тёмном стекле (рецепт макета: blur 20 + светлая кромка) */
.cr-bq-form{margin-top:36px;padding:clamp(24px,3.5vw,40px);border-radius:12px;
	background:rgba(42,35,28,.4);
	-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2),0 30px 60px -40px rgba(0,0,0,.6);
	box-sizing:border-box}
.cr-bq-form__grid{display:grid;gap:18px;
	grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.cr-bq-field{display:block}
.cr-bq-field--wide{grid-column:1/-1}
.cr-bq-field>span{display:block;font-size:10px;letter-spacing:.24em;
	color:rgba(231,225,214,.55);margin-bottom:8px}
.cr-bq-field input,.cr-bq-field select,.cr-bq-field textarea{
	width:100%;box-sizing:border-box;padding:12px 14px;
	background:rgba(241,235,225,.08);border:1px solid rgba(231,225,214,.22);border-radius:8px;
	color:#F1EBE1;font-family:inherit;font-weight:300;font-size:14px;line-height:1.4;
	outline:none;color-scheme:dark;-webkit-appearance:none;appearance:none;
	transition:border-color .3s ease,background-color .3s ease}
.cr-bq-field textarea{resize:vertical;min-height:66px}
.cr-bq-field select option{color:#16120E;background:#F1EBE1}
.cr-bq-field input:focus,.cr-bq-field select:focus,.cr-bq-field textarea:focus{
	border-color:rgba(231,225,214,.55);background:rgba(241,235,225,.12)}
.cr-bq-form ::placeholder{color:rgba(231,225,214,.38)}
.cr-bq-agree{display:flex;align-items:flex-start;gap:10px;margin-top:18px;
	font-weight:300;font-size:12.5px;line-height:1.6;color:rgba(231,225,214,.6);cursor:pointer}
.cr-bq-agree input{margin-top:3px;accent-color:#6B2233}
.cr-bq-agree a{color:#E7E1D6;text-decoration:none;border-bottom:1px solid rgba(231,225,214,.4)}
.cr-bq-agree a:hover{color:#C2622E}
/* ошибка отправки (класс — контракт cr-booking.js) */
.cr-bq-form .cr-form__err{margin-top:14px;min-height:0;text-align:center;
	font-size:13px;line-height:1.5;color:#D98F6C}
.cr-bq-form .cr-form__err:empty{margin:0}
/* кнопка-пилюля: бордо-градиент — единственная «настоящая» кнопка макетов */
.cr-bq-form__submit{display:block;width:100%;margin-top:22px;padding:15px;
	border:0;border-radius:999px;cursor:pointer;
	background:linear-gradient(120deg,#6B2233,#8a2f42 55%,#6B2233);
	background-size:180% 100%;background-position:0 0;
	color:#F1EBE1;font-family:inherit;font-size:12px;letter-spacing:.26em;
	box-shadow:0 16px 34px -18px rgba(107,34,51,.7);
	transition:background-position .5s ease,opacity .3s ease}
.cr-bq-form__submit:hover{background-position:100% 0}
.cr-bq-form__submit.is-busy{opacity:.55;pointer-events:none}
.cr-bq-form__note{margin-top:14px;text-align:center;font-size:10.5px;
	letter-spacing:.18em;color:rgba(231,225,214,.4)}

/* «Спасибо, заявка у менеджера» — cr-booking.js вставляет p.cr-form__ok
   перед формой и прячет её; стеклим блок по рецепту r_ok из макета */
.cr-bq-request .cr-form__ok{margin-top:36px;padding:clamp(28px,4vw,44px);border-radius:12px;
	text-align:center;font-weight:250;font-size:19px;line-height:1.7;color:#F1EBE1;
	background:rgba(42,35,28,.4);
	-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2)}

/* мини-навигация и копирайт финала */
.cr-bq-final__nav{margin-top:60px;padding-top:20px;border-top:1px solid rgba(231,225,214,.12);
	display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
	font-size:11px;letter-spacing:.24em}
.cr-bq-final__nav a{color:rgba(231,225,214,.6);text-decoration:none;transition:color .3s ease}
.cr-bq-final__nav a:hover{color:#C2622E}
.cr-bq-final__copy{margin-top:16px;text-align:center;font-size:10px;
	letter-spacing:.2em;color:rgba(231,225,214,.3)}

/* ---------- мобайл: зерно выключено (урок заглушки) ---------- */
@media(max-width:760px){
	.cr-bq-hero::after,.cr-bq-request::after{display:none}
}

/* ---------- prefers-reduced-motion: линза без анимации, но резкая ----------
   (глобальный transition:none уже в cr-ui.css; активному кадру просто
   мгновенно раскрываем окно) */
@media(prefers-reduced-motion:reduce){
	.cr-lens-slide.is-live .cr-lens-slide__sharp{
		clip-path:circle(125% at var(--cr-lens-x,58%) var(--cr-lens-y,44%))}
}