/* ════════════════════════════════════════════════════════════════════════
   glass.css — движок «живого стекла» (Этап R2 ребилда). См. DESIGN_SYSTEM.md §3.
   Режим: БАЛАНС (без тяжёлого SVG-преломления).
   Классы .glass* в разметке раньше НЕ использовались → это канонический движок,
   который R3 применит к фокусным поверхностям. Аддитивно. Откат: убрать <link>.

   Состав «живого стекла»:
     • заливка + backdrop-blur + saturate
     • верхний rim-блик (inset box-shadow)
     • диагональный specular-перелив (::before, mix-blend screen)
     • модификатор .glass-glow / .is-glowing — контурное свечение (hover/выделение)
     • .glass-reactive — световой блик от курсора (--mx/--my пишет glass-reactive.js)
     • .glass-sheen — «жидкий» блик-проводка по стеклу на hover
   ════════════════════════════════════════════════════════════════════════ */

/* ── Базовое стекло (3 уровня блюра) ─────────────────────────── */
.glass,
.glass-thin,
.glass-thick {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-md), var(--glass-rim);
  overflow: hidden;
}
.glass        { backdrop-filter: blur(var(--glass-blur)) saturate(180%);       -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); }
.glass-thin   { backdrop-filter: blur(var(--glass-blur-thin)) saturate(150%);  -webkit-backdrop-filter: blur(var(--glass-blur-thin)) saturate(150%); }
.glass-thick  { backdrop-filter: blur(var(--glass-blur-thick)) saturate(200%); -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(200%);
                background: var(--glass-fill-strong); }

/* Диагональный specular-перелив (на всех уровнях) */
.glass::before,
.glass-thin::before,
.glass-thick::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 26%, transparent 48%);
  mix-blend-mode: screen;
  z-index: 0;
}
/* контент стекла поверх блика */
.glass > *,
.glass-thin > *,
.glass-thick > * { position: relative; z-index: 1; }

/* ── Контурное свечение: hover/выделение ──────────────────────
   Включать ТОЛЬКО на фокусных поверхностях (см. DESIGN_SYSTEM §3.4). */
.glass-glow,
.is-glowing {
  border-color: rgba(150,175,255,0.65);
  box-shadow: var(--shadow-md), var(--glow-accent-ring), var(--glow-accent),
              inset 0 1px 0 rgba(255,255,255,0.50);
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
/* интерактивный glow по наведению */
.glass-interactive {
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.glass-interactive:hover {
  border-color: rgba(150,175,255,0.55);
  box-shadow: var(--shadow-md), var(--glow-accent-ring), var(--glow-accent),
              inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-1px);
}

/* ── Pointer-reactive свет (десктоп, только фокусные элементы) ──
   glass-reactive.js пишет --mx/--my (позиция курсора в %). */
.glass-reactive::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,0.20), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.glass-reactive:hover::after { opacity: 1; }

/* ── «Жидкий» блик-проводка по стеклу на hover ─────────────────
   Тонкая яркая полоса проходит по диагонали — главный «жидкий» штрих. */
.glass-sheen { position: relative; overflow: hidden; }
.glass-sheen::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(0) rotate(8deg);
  pointer-events: none;
  opacity: 0;
}
.glass-sheen:hover::after {
  animation: sheenSweep var(--dur-3) var(--ease-out);
}

/* ── Премиум-стекло: «дешёвые» принципы реалистичного стекла ───────────────
   Единый источник света (specular сверху-слева), направленный rim (светлая
   верх-лево грань + тёмная низ-право), фейк-хром-аберрация по кромке. Чистый CSS,
   работает везде (в т.ч. iOS). На Chromium glass-engine.js добавляет поверх этого
   настоящее преломление фона (backdrop-filter: url(#…)). См. glass-engine.js. */
.glass-premium {
  position: relative;
  isolation: isolate;   /* свой стек-контекст: блики не вылезают за карточку (вёрстку детей НЕ трогает) */
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),   /* светлая верхняя грань (свет) */
    inset 1px 0 0 rgba(255, 255, 255, 0.16),   /* светлая левая грань */
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);        /* тёмная нижняя грань (тень) */
}
/* острый specular у светового угла (верх-лево) */
.glass-premium::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 12% 0%,
    rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 30%, transparent 52%);
  mix-blend-mode: screen;
}
/* хром-аберрация по кромке (циан↔маджента край + блик) через маску «только рамка» */
.glass-premium::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(120, 200, 255, 0.5), rgba(255, 255, 255, 0.14) 35%,
    transparent 55%, rgba(255, 140, 220, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.85;
}
/* Блики не трогают вёрстку: pointer-events:none + subtle, поверх контента слегка
   (как настоящий отблеск стекла). Позиционирование детей НЕ переопределяем —
   иначе ломались бы абсолютные кнопки закрытия в модалках. */
@media (prefers-reduced-motion: reduce) {
  .glass-premium::before, .glass-premium::after { display: none; }
}