/**
 * delight-button.css — стили кнопки «Сделать приятное» и окна поддержки.
 * Версия: 1.0.0 (2026-06-28)
 * Owner: Infrastructure Lead
 *
 * Только var(--*) из theme.css — нет hardcoded hex/rgba, КРОМЕ скрим-значения
 * оверлея (rgba(0,0,0,0.6)) — тот же допустимый одноразовый скрим, что в
 * onboarding.css (см. там §6). Светлая/тёмная темы — через наследование токенов.
 *
 * Анимации иконок (.dlb-*) — ВЕРБАТИМ из src/design-system/styles.css (демо
 * галереи 9 вариантов, commit 8f08460). Перенесены ТОЛЬКО 3 выбранных Александром:
 * Капкейк (день/«day») / Какао (вечер/«evening») / Пицца (пицца-кусок/«pizza»).
 * Имена классов dlb-* сохранены, т.к. JS переиспользует тот же SVG-разметку.
 *
 * z-index окна — те же константы, что у тура обучения (выше sidebar/FAB/cookie):
 *   оверлей  10000, окно 10001.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. КНОПКА в .biz-row — наследует .biz-btn (page-shell.css), чтобы по
      размеру/виду совпадать с кнопкой «Обучение». Сверху накладываем
      анимированную иконку и hover-акцент по варианту времени суток.
   ════════════════════════════════════════════════════════════════════════ */

.mad-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Кнопка-лаунчер: .biz-btn + наш модификатор */
.mad-btn {
  /* Наследует .biz-btn из page-shell.css (padding/border/radius/bg/font) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
  overflow: visible;
}

.mad-btn:hover {
  border-color: var(--dlb-accent, var(--accent));
  color: var(--text);
}

.mad-btn:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
}

/* Контейнер иконки (увеличенный viewport для пара/искр/звёзд) */
.mad-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dlb-accent, var(--accent));
}
.mad-icon svg { overflow: visible; }

/* Icon-only режим: ТОЛЬКО иконка + tooltip через title/aria-label (подписи нет).
   Компактная квадратная кнопка под высоту .biz-btn соседей. */
.mad-btn.mad-btn--icon-only {
  gap: 0;
  padding: 3px 7px;
}
.mad-btn.mad-btn--icon-only .mad-icon {
  width: 20px;
  height: 20px;
}

/* ── Привязка акцента по варианту (как в демо) ── */
.mad-btn--cupcake { --dlb-accent: var(--accent); }
.mad-btn--cupcake .mad-icon { color: var(--accent); }

.mad-btn--cocoa { --dlb-accent: var(--brand-gradient-end, #8b5cf6); }
.mad-btn--cocoa .mad-icon { color: var(--brand-gradient-end, #8b5cf6); }

.mad-btn--pizza { --dlb-accent: var(--red); }
.mad-btn--pizza .mad-icon { color: var(--red); }

/* ════════════════════════════════════════════════════════════════════════
   2. АНИМАЦИИ ИКОНОК (.dlb-*) — ВЕРБАТИМ из design-system/styles.css,
      только для 3 выбранных вариантов (Капкейк/Какао/Пицца).
   ════════════════════════════════════════════════════════════════════════ */

/* ── ОБЩИЙ ПАР (используется Пиццей) ── */
.dlb-steam-path {
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  animation: dlb-steam 2.2s ease-in-out infinite;
}
.dlb-steam-path:nth-child(1) { animation-delay: 0s; }
.dlb-steam-path:nth-child(2) { animation-delay: 0.4s; }
.dlb-steam-path:nth-child(3) { animation-delay: 0.8s; }

@keyframes dlb-steam {
  0%   { opacity: 0; transform: translateY(0px) scaleX(1); }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-9px) scaleX(0.6); }
}

/* ── КАПКЕЙК (день): свечка + искорки ── */
/* Огонёк свечки — twinkle scale+opacity */
.dlb-flame {
  transform-origin: 50% 80%;
  animation: dlb-flame 1.4s ease-in-out infinite;
}
@keyframes dlb-flame {
  0%,100% { transform: scale(1) rotate(-2deg);  opacity: 1; }
  30%      { transform: scale(1.18) rotate(2deg); opacity: 0.85; }
  60%      { transform: scale(0.88) rotate(-1deg); opacity: 0.95; }
}

/* Искорки (2 точки) */
.dlb-spark {
  animation: dlb-spark 1.8s ease-out infinite;
  transform-origin: center;
}
.dlb-spark:nth-child(2) { animation-delay: 0.6s; }

@keyframes dlb-spark {
  0%   { opacity: 0; transform: translate(0,0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx,3px), var(--sy,-6px)) scale(0.2); }
}

/* На hover капкейк подпрыгивает */
.mad-btn--cupcake:hover .mad-icon {
  animation: dlb-cake-bounce 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes dlb-cake-bounce {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-5px); }
  60%     { transform: translateY(-2px); }
}

/* ── КАКАО (вечер): мягкий пар + звёздочки ── */
.dlb-eve-steam {
  stroke: color-mix(in srgb, var(--brand-gradient-end, #8b5cf6) 70%, var(--text2));
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  animation: dlb-steam 3s ease-in-out infinite;
}
.dlb-eve-steam:nth-child(1) { animation-delay: 0s; }
.dlb-eve-steam:nth-child(2) { animation-delay: 0.9s; }

/* Звёздочки (3 штуки) */
.dlb-star {
  fill: color-mix(in srgb, var(--brand-gradient-end, #8b5cf6) 80%, var(--text2));
  transform-origin: center;
  animation: dlb-star-twinkle 2.4s ease-in-out infinite;
}
.dlb-star:nth-child(1) { animation-delay: 0s; }
.dlb-star:nth-child(2) { animation-delay: 0.7s; }
.dlb-star:nth-child(3) { animation-delay: 1.4s; }

@keyframes dlb-star-twinkle {
  0%,100% { opacity: 0.3; transform: scale(0.7); }
  50%     { opacity: 1;   transform: scale(1.2); }
}

/* На hover звёзды ярче */
.mad-btn--cocoa:hover .dlb-star {
  animation-duration: 1.1s;
}

/* ── ПИЦЦА-КУСОК: пар (steam переиспользован) + «вздрагивание» ── */
/* Паровые завитки пиццы — те же .dlb-steam-path, stagger через nth-child */
.mad-btn--pizza:hover .mad-icon {
  animation: dlb-cake-bounce 0.38s cubic-bezier(.36,.07,.19,.97) both;
}

/* ════════════════════════════════════════════════════════════════════════
   3. ОКНО «СДЕЛАТЬ ПРИЯТНОЕ» — самодостаточный модал (нет общего .ma-modal).
      Тон/токены зеркалят окно тура обучения (onboarding.css §модал).
   ════════════════════════════════════════════════════════════════════════ */

.mad-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mad-overlay.mad-overlay--visible { opacity: 1; }

.mad-modal {
  position: relative;
  z-index: 10001;
  width: 520px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: scale(0.96) translateY(8px);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mad-overlay.mad-overlay--visible .mad-modal {
  transform: scale(1) translateY(0);
}

/* ── Заголовок окна ── */
.mad-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.mad-head-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.mad-head-title-wrap { flex: 1; }
.mad-headline {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.mad-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text2);
  padding: 2px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms, background 120ms;
  margin-top: -2px;
}
.mad-close:hover { color: var(--text); background: var(--surface2); }
.mad-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Вступление ── */
.mad-intro {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 18px;
}
.mad-intro p { margin: 0 0 8px; }
.mad-intro p:last-child { margin-bottom: 0; }

/* ── Значки угощений (ТОЛЬКО иконка + tooltip, без подписей) ── */
.mad-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.mad-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1);
}
.mad-tier:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
}
.mad-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Активный значок (раскрытый блок «Хорошая новость») */
.mad-tier.mad-tier--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.mad-tier-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.mad-tier-icon svg { overflow: visible; }

/* Значок «Вкусное» (treat, tone coffee) — крупнее соседних: контейнер 40px,
   SVG растягивается на всю площадь, чтобы кофе и тортик читались. */
.mad-tier--coffee .mad-tier-icon { width: 40px; height: 40px; }
.mad-tier--coffee .mad-tier-icon svg { width: 100%; height: 100%; }

/* Акцент-цвет по значку (разные оттенки тёплых токенов) */
.mad-tier--coffee  .mad-tier-icon { color: var(--orange); }
.mad-tier--coffee:hover  { border-color: var(--orange); box-shadow: 0 2px 14px color-mix(in srgb, var(--orange) 18%, transparent); }
.mad-tier--cake    .mad-tier-icon { color: var(--accent); }
.mad-tier--server  .mad-tier-icon { color: var(--text2); }
.mad-tier--server:hover  { border-color: var(--green); box-shadow: 0 2px 14px color-mix(in srgb, var(--green) 18%, transparent); }
.mad-tier--soul    .mad-tier-icon { color: var(--brand-gradient-end, #8b5cf6); }
.mad-tier--soul:hover    { border-color: var(--brand-gradient-end, #8b5cf6); box-shadow: 0 2px 14px color-mix(in srgb, var(--brand-gradient-end, #8b5cf6) 18%, transparent); }
.mad-tier--soul.mad-tier--active { border-color: var(--brand-gradient-end, #8b5cf6); background: color-mix(in srgb, var(--brand-gradient-end, #8b5cf6) 8%, var(--card)); }

/* ════════════════════════════════════════════════════════════════════════
   Анимации значков окна (.mad-fx-*) — пар/блик/мерцание LED.
   Только transform/opacity (60fps). prefers-reduced-motion → статика (внизу §4).
   ════════════════════════════════════════════════════════════════════════ */

/* Пар над чашкой (значок «Вкусное») */
.mad-fx-steam {
  stroke: var(--orange);
  fill: none;
  opacity: 0;
  animation: mad-fx-steam 2.4s ease-in-out infinite;
}
.mad-fx-steam:nth-child(2) { animation-delay: 0.7s; }
@keyframes mad-fx-steam {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.8; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-6px) scaleX(0.6); }
}

/* Блик/искра на тортике (значок «Вкусное») */
.mad-fx-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: mad-fx-spark 2.2s ease-in-out infinite;
}
@keyframes mad-fx-spark {
  0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
  45%      { opacity: 1;    transform: scale(1.05) rotate(45deg); }
}

/* LED-индикаторы сервера: последовательный пульс (scale+opacity) */
.mad-fx-led {
  transform-box: fill-box;
  transform-origin: center;
  animation: mad-fx-led 1.8s ease-in-out infinite;
}
.mad-fx-led--1 { animation-delay: 0s; }
.mad-fx-led--2 { animation-delay: 0.3s; }
.mad-fx-led--3 { animation-delay: 0.6s; }
@keyframes mad-fx-led {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
/* На hover индикаторы мигают чаще */
.mad-tier--server:hover .mad-fx-led { animation-duration: 0.7s; }

/* ── Блок «Хорошая новость» (раскрывается под значками) ── */
.mad-goodnews {
  margin-bottom: 18px;
}
.mad-gn-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease;
}
.mad-gn-input::placeholder { color: var(--text2); }
.mad-gn-input:focus {
  outline: none;
  border-color: var(--accent);
}
.mad-gn-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.mad-gn-status {
  flex: 1;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.mad-gn-status--err { color: var(--red); }
.mad-gn-submit {
  flex-shrink: 0;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent, #fff);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter 140ms ease;
}
.mad-gn-submit:hover { filter: brightness(1.06); }
.mad-gn-submit:disabled { opacity: 0.6; cursor: wait; }
.mad-gn-submit:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.mad-gn-thanks {
  margin: 0;
  padding: 14px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-md);
}

/* ── Юридическая микро-строка ── */
.mad-microline {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   4. REDUCED-MOTION — спокойный статичный вид (без пара/искр/звёзд/прыжков).
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .dlb-steam-path,
  .dlb-eve-steam,
  .dlb-flame,
  .dlb-spark,
  .dlb-star,
  .mad-fx-steam,
  .mad-fx-spark,
  .mad-fx-led {
    animation: none;
    opacity: 0.75;
    transform: none;
  }
  /* LED в покое — «онлайн», но без мигания */
  .mad-fx-led { opacity: 0.9; }
  .mad-btn--cupcake:hover .mad-icon,
  .mad-btn--pizza:hover .mad-icon { animation: none; }
  .mad-tier--server:hover .mad-fx-led { animation: none; }
  .mad-btn,
  .mad-tier,
  .mad-overlay,
  .mad-modal { transition: none; }
  .mad-overlay.mad-overlay--visible .mad-modal { transform: none; }
}

/* Узкие экраны (laptop 1366): окно остаётся читаемым, карточки в 1 колонку при тесноте */
@media (max-width: 560px) {
  .mad-tiers { grid-template-columns: 1fr; }
}