/*
  Business Cool — паттерны для вайб-кодинга калькуляторов/квизов/мини-лендингов.
  Зависит от assets/tokens.css скилла business-cool-brand (цвета, тени, шрифты) —
  подключать ОБА файла, здесь переменные не переопределяются, только используются.
  Все размеры/тайминги — стартовая точка, подгоняй под конкретный экран.
*/

/* ---------- 1. Фон-подложка под глассморфизм ---------- */
/* Класс на body или на обёртку экрана — даёт "цветной блюр под стеклом" без картинки */
.bc-blur-bg {
  background:
    radial-gradient(900px 560px at 10% -10%, var(--bc-lavender-pale), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, var(--bc-pink-light), transparent 55%),
    radial-gradient(700px 480px at 20% 100%, var(--bc-caramel-light), transparent 55%),
    var(--bc-milk);
}

/* ---------- 2. Матовое стекло (карточка/плашка) ---------- */
.bc-glass {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(193, 171, 229, 0.35);
  border-radius: var(--bc-radius-sm, 20px);
  box-shadow: var(--bc-shadow-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* На тёмных плашках (шапки/обложки) — тот же приём, но на градиентной подложке */
.bc-glass-dark {
  background: rgba(30, 28, 36, 0.55);
  border: 1px solid rgba(212, 197, 238, 0.18);
  border-radius: var(--bc-radius-sm, 20px);
  box-shadow: var(--bc-shadow-lg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--bc-milk);
}

/* ---------- 3. Карточка товара (квиз/калькулятор) ---------- */
/* Квадратная, 4 на экран — сетка 2×2. Меньше 4 карточек = меньше ячеек, не растягивать. */
.bc-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bc-product-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  text-align: center;
}
.bc-product-card .icon { width: 44px; height: 44px; margin: 0 auto; }
.bc-product-card .title { font-family: var(--bc-font-hero); font-size: 15px; margin-top: 8px; }
.bc-product-card .price { font-variant-numeric: tabular-nums; color: var(--bc-dark-mid); font-size: 14px; }
.bc-product-card .caption { font-size: 11.5px; color: var(--bc-gray); line-height: 1.35; }
.bc-product-card .add-btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 100px;
  background: var(--bc-lavender-light); color: var(--bc-dark-mid);
  font-family: var(--bc-font-inter); font-size: 12px;
  padding: 9px 14px;
}
.bc-product-card .add-btn.in-cart { background: var(--bc-green-pale); color: var(--bc-green); }

/* ---------- 4. Кнопки-CTA ---------- */
.bc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border: none; border-radius: 100px;
  font-family: var(--bc-font-inter); font-size: 15px; color: var(--bc-dark-mid);
  background: linear-gradient(135deg, var(--bc-yellow-light), var(--bc-yellow));
  box-shadow: var(--bc-shadow-lavender);
}
/* "Молочный" вариант — для финальных переходных экранов, где жёлтый уже был использован выше */
.bc-cta-milk {
  background: linear-gradient(135deg, #ffffff, var(--bc-lavender-pale));
  color: var(--bc-dark-mid);
  box-shadow: var(--bc-shadow-md);
}
/* Пульсация — лёгкая, не "прыжок". Останавливается при reduced motion. */
.bc-cta-pulse { animation: bc-pulse 2.6s ease-in-out infinite; }
@keyframes bc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-cta-pulse { animation: none; }
}

/* ---------- 5. Шкала прогресса квиза ---------- */
/* Не "Категория N из M" — единая шкала-ощущение, растёт в %, к последнему экрану = 100% */
.bc-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.bc-progress-label { font-size: 12px; color: var(--bc-gray); }
.bc-progress-track {
  height: 8px; border-radius: 100px;
  background: var(--bc-lavender-pale);
  overflow: hidden;
}
.bc-progress-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--bc-lavender), var(--bc-pink));
  transition: width .5s ease-out;
}

/* ---------- 6. "Банк-приложение" экран суммы ---------- */
.bc-bank-account {
  text-align: center;
  padding: 28px 20px;
}
.bc-bank-account .sum {
  font-family: var(--bc-font-hero);
  font-size: 42px; /* фолбэк, если браузер не знает clamp() */
  font-size: clamp(34px, 9vw, 52px);
  font-variant-numeric: tabular-nums;
}
.bc-bank-account .label { font-size: 13px; color: var(--bc-gray); margin-top: 6px; }
.bc-bank-chip-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px; }
.bc-bank-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 64px; font-size: 11px; color: var(--bc-dark-mid); text-align: center;
}
.bc-bank-chip .badge {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bc-lavender-light);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 7. Скролл-реавил (см. reveal.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}