/* ---------- Liquid glass ----------
   Figma: Effect GLASS, radius 100. Полупрозрачная заливка из макета + размытие/насыщение фона,
   тонкий блик по верхней-левой кромке и мягкое затемнение снизу. */
.glass {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.12),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -12px 24px -18px rgba(0, 0, 0, 0.6);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.04) 100%);
  z-index: -1;
}

/* ---------- Hover: тусклые элементы становятся ярче ---------- */
.nav-item, .btn, .lang__opt, .field__control, .carousel__arrow, .contact-row a, .socials a {
  transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover), opacity var(--t-hover), filter var(--t-hover), box-shadow var(--t-hover);
}
.nav-item:not(.is-active):hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.nav-item:not(.is-active):hover .nav-item__label { opacity: 1; }
.nav-item:not(.is-active):hover .is-off { filter: brightness(1.8); }
.nav-item.is-active:hover { background: rgba(199, 112, 249, 0.2); }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; white-space: pre; cursor: pointer; }

/* Фиолетовая «тонированная» кнопка (Start an order, Discuss a mix) */
.btn--tint {
  height: 39px;
  padding: 12px 18px;
  border-radius: 11px;
  background: var(--accent-tint);
  border: 0.5px solid var(--accent-border);
  color: var(--accent);
  font: 900 14px/normal var(--f-verano);
  letter-spacing: 0.7px;
}
.btn--tint:hover { background: rgba(199, 112, 249, 0.22); border-color: #d9a6f2; color: #d89bfb; }

/* Кнопки тарифов */
.btn--pill {
  width: 205px;
  height: 39px;
  padding: 12px 18px;
  border-radius: 200px;
  background: rgba(188, 130, 217, 0.1);
  border: 1px solid rgba(199, 112, 249, 0.15);
  color: var(--accent);
  font: 700 18px/normal var(--f-verano);
  letter-spacing: 0.9px;
}
.btn--pill:hover { background: rgba(188, 130, 217, 0.24); border-color: rgba(199, 112, 249, 0.45); color: #d89bfb; }

/* Яркая фиолетовая → инверсия в белую */
.btn--accent {
  padding: 10px;
  border-radius: 200px;
  background: var(--accent);
  border: 1px solid #838383;
  color: #000;
  font: 900 16px/normal var(--f-verano);
  letter-spacing: 0.8px;
}
.btn--accent:hover { background: #fff; border-color: #fff; color: #000; }

/* Белая → инверсия в чёрную */
.btn--white {
  padding: 12px 18px;
  border-radius: 11px;
  background: #fff;
  border: 0.5px solid #fff;
  color: #000;
  font: 900 14px/normal var(--f-verano);
  letter-spacing: 0.7px;
}
.btn--white:hover { background: #000; color: #fff; }

/* Let's start — тёмное стекло, чтобы белый текст читался на светлой части картинки */
.btn--ghost {
  justify-content: flex-start;
  gap: 12px;
  width: 236px;
  height: 50px;
  padding: 12px 22px;
  border-radius: 11px;
  background: rgba(8, 4, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.12), 0 8px 30px rgba(0, 0, 0, 0.35);
  font: 900 13px/normal var(--f-verano);
  letter-spacing: 0.65px;
  text-transform: uppercase;
}
.btn--ghost img { transition: filter var(--t-hover), translate var(--t-hover); }
.btn--ghost:hover { background: #fff; border-color: #fff; color: #000; }
.btn--ghost:hover img { filter: invert(1); translate: 4px 0; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  height: 25px;
  padding: 12px 18px;
  border-radius: 11px;
  background: var(--teal-bg);
  border: 0.5px solid var(--teal);
  color: var(--teal);
  font-weight: 900;
}
.badge__in { display: flex; align-items: center; gap: 7px; }
.badge__dot { width: 9px; font-size: 14px; letter-spacing: 0.7px; }
.badge__text { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }

/* ---------- Lang switcher (слайдер; пока заглушка — перевода ещё нет) ---------- */
.lang {
  top: 65px;
  right: 0;
  display: flex;
  width: 80px;
  height: 41px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  z-index: 5;
  cursor: pointer;
}
.lang__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 39px;
  height: 39px;
  border-radius: 11px;
  background: rgba(199, 112, 249, 0.28);
  border: 1px solid var(--glass-border);
  translate: 39px 0;
  transition: translate 0.45s var(--ease-out), background-color var(--t-hover);
}
.lang.is-ru .lang__thumb { translate: 0 0; }
.lang__opt {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding-top: 3px; /* прописные Verano Sans сидят на 1.5px выше центра строки — выравниваем: сверху и снизу по 14.5px */
  font: 900 14px/normal var(--f-verano);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity var(--t-hover);
}
.lang:hover .lang__opt { opacity: 0.8; }
.lang:hover .lang__thumb { background: rgba(199, 112, 249, 0.42); }

/* ---------- Feedback form ---------- */
/* Высота 546 → 586: место под галочку согласия. Текст слева стоит там же, где при 546 (63 / 98 / 158 / 264px) */
.feedback { left: 0; right: 0; height: 586px; border-radius: 22px; background: var(--glass-bg-soft); }
.feedback__crumb { position: absolute; left: 4.71%; top: 63px; }
.feedback__t1, .feedback__t2 { position: absolute; text-transform: capitalize; white-space: nowrap; }
.feedback__t1 { left: 4.89%; top: 98px; font-size: 74px; letter-spacing: 3.7px; }
.feedback__t2 { left: 4.71%; top: 158px; font: 400 64px/normal var(--f-onest); letter-spacing: 3.2px; }
.feedback__text { position: absolute; left: 4.71%; top: 264px; width: 500px; white-space: pre-wrap; }
.feedback__form {
  position: absolute;
  left: 55.89%;
  right: 3.8%;
  top: calc(50% + 0.5px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font: 400 14px/17px var(--f-verano); letter-spacing: 0.7px; text-transform: uppercase; opacity: 0.5; white-space: nowrap; }
.field__control {
  width: calc(100% - 9px);
  height: 44px;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  font: 400 14px/normal var(--f-verano);
  letter-spacing: 0.7px;
  color: #fff;
}
.field__control::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.field__control:hover { border-color: rgba(255, 255, 255, 0.22); background-color: rgba(255, 255, 255, 0.03); }
.field__control:focus { border-color: var(--accent-border); }
.field__control.is-invalid { border-color: #ff6b8b; }
textarea.field__control { height: 78px; min-height: 78px; max-height: 160px; resize: none; overflow-y: auto; } /* растёт с текстом (блок формы растёт вместе с ним, см. forms.js), дальше прокрутка */
.field__select { position: relative; width: calc(100% - 9px); }
.field__select .field__control { width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; }
.field__select option { background: #111; color: #fff; }
.field__select img { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.feedback__form .btn--tint { width: 100%; }
/* Обязательная галочка согласия на обработку персональных данных (152-ФЗ) */
.consent { display: flex; align-items: flex-start; gap: 10px; font: 400 12px/1.45 var(--f-verano); letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.6); cursor: pointer; }
.consent input { flex: none; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04) center / 10px no-repeat; cursor: pointer; transition: border-color var(--t-hover), background-color var(--t-hover); }
.consent input:hover { border-color: rgba(255, 255, 255, 0.3); }
.consent input:checked { border-color: var(--accent-border); background-color: rgba(199, 112, 249, 0.28); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5 8.5 2.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.consent input:focus-visible { outline: 1px solid var(--accent-border); outline-offset: 2px; }
.consent input.is-invalid { border-color: #ff6b8b; }
.consent button { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent button:hover { color: #d89bfb; }
.form-error { color: #ff8fa8; line-height: 1.45; }
form.is-sending [type="submit"] { opacity: 0.5; pointer-events: none; } /* защита от двойной отправки */
.ts-box:empty { display: none; } /* проверка Turnstile видна только когда Cloudflare её показывает */
.form-note { font: 400 12px/normal var(--f-verano); letter-spacing: 0.6px; color: var(--accent-soft); min-height: 0; }

/* ---------- Footer ---------- */
.footer-line { left: 0; right: 0; height: 1px; }
.footer-line img { width: 100%; height: 1px; }
/* Футер: всё одного размера (14px, как Privacy Policy): слева копирайт, по центру политика, справа дизайнер */
.footer-copy, .footer-legal, .footer-rights { font: 400 14px/normal var(--f-verano); letter-spacing: 0.7px; white-space: nowrap; }
.footer-copy { left: 0; opacity: 0.3; }
.footer-legal { left: 50%; transform: translateX(-50%); }
.footer-rights { right: 0; }
.footer-legal button, .footer-rights a { opacity: 0.3; transition: opacity var(--t-hover); }
.footer-legal button:hover, .footer-rights a:hover { opacity: 0.8; }

/* ---------- След за курсором (рисуется на canvas в motion.js) ---------- */
.cursor-trail { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; filter: blur(12px); mix-blend-mode: screen; } /* размытие превращает линию в мягкое свечение */

/* ---------- Motion ----------
   Вход экрана: блоки выезжают слева направо с проявлением и снятием размытия (по видео-референсу).
   Скролл: нижние блоки поднимаются и проявляются. Анимируем translate/filter/opacity,
   чтобы не конфликтовать с transform, которым позиционированы элементы. */
[data-anim] {
  opacity: 0;
  filter: blur(10px);
  translate: -48px 0;
  transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), translate 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-anim].is-below { translate: 0 48px; }
[data-anim].is-in { opacity: var(--o, 1); filter: none; /* none, а не blur(0): любой filter отключает backdrop-filter стекла */ translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; filter: none; translate: none; transition: none; }
}

/* ---------- Попап «заявка отправлена» ----------
   Появляется как блоки сайта: проявление из размытия + лёгкий подъём; галочка «рисуется». */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35); /* без backdrop-filter: иначе стекло карточки размывает только этот слой, а не страницу */
  animation: modal-fade 0.4s ease backwards;
}
.modal[hidden] { display: none; }
.modal.is-closing { animation: modal-fade 0.3s ease reverse both; }
.modal__card {
  position: relative;
  width: 520px;
  padding: 44px 48px 40px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  text-align: center;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.14), inset -1px -1px 0 rgba(255, 255, 255, 0.04), 0 20px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(199, 112, 249, 0.1);
  animation: modal-in 0.7s var(--ease-out) backwards; /* стекло видно сразу: двигаем и масштабируем без opacity/filter, иначе сквозь карточку виден текст */
}
.modal.is-closing .modal__card { animation: modal-out 0.3s ease both; }
.modal__check { display: block; margin: 0 auto 22px; overflow: visible; filter: drop-shadow(0 0 14px rgba(199, 112, 249, 0.6)); }
.modal__ring { stroke-dasharray: 214; stroke-dashoffset: 214; transform: rotate(-90deg); transform-origin: center; animation: draw 0.8s var(--ease-out) 0.25s forwards; }
.modal__tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw 0.45s var(--ease-out) 0.85s forwards; }
.modal__title { font: 400 44px/normal var(--f-onest); letter-spacing: 2.2px; }
.modal__title .t-fet { font-size: 52px; }
.modal__text { margin: 14px auto 30px; max-width: 400px; opacity: 0.7; }
.modal__btn { width: 100%; }
/* Попап с формой заявки (Discuss a mix): поля как в блоке формы, без текста слева */
.modal--form { overflow-y: auto; padding: 24px 0; }
.modal__card--form { width: 520px; padding: 48px 40px 40px; text-align: left; }
.modal__card--form .feedback__form { position: static; transform: none; }
/* Поля уже лежат на стекле карточки: своё размытие им не нужно. Иначе пока форма проявляется
   (opacity), их backdrop-filter выключен и в конце анимации резко «включается» — рывок полей */
.modal__card--form .field__control { -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal__x { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; font: 300 26px/1 var(--f-onest); opacity: 0.5; transition: opacity var(--t-hover); }
.modal__x:hover { opacity: 1; }
/* Попап-документ (Privacy Policy): шире, текст слева, прокрутка внутри */
.modal__card--doc { width: 760px; max-height: calc(100vh / var(--zoom) - 48px); display: flex; flex-direction: column; padding: 44px 0 0; text-align: left; }
.modal__card--doc .modal__title { padding: 0 48px; font-size: 40px; }
.modal__card--doc .modal__title .t-fet { font-size: 48px; }
.doc { overflow-y: auto; padding: 8px 48px 40px; font: 400 15px/1.6 var(--f-verano); letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.75); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.doc h3 { margin: 26px 0 8px; font: 800 17px/normal var(--f-onest); letter-spacing: 0.6px; color: #fff; }
.doc p + p { margin-top: 10px; }
.doc ul { margin-top: 6px; padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc b { color: #fff; font-weight: 700; }
.doc a { color: var(--accent); }
.doc__date { margin-bottom: 16px; font-size: 13px; opacity: 0.6; }
@keyframes modal-fade { from { background-color: transparent; } } /* не opacity: прозрачный родитель отключает стекло карточки */
@keyframes modal-in { from { translate: 0 24px; scale: 0.96; } }
.modal__card > * { animation: modal-content 0.5s ease 0.1s backwards; } /* проявляется только содержимое */
@keyframes modal-content { from { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; translate: 0 24px; scale: 0.96; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__card, .modal__card > *, .modal__ring, .modal__tick { animation: none; stroke-dashoffset: 0; }
}