/*
  Эффекты поверхностей: стекло (glassmorphism), тени, кольца фокуса, hairline-обводки.
  Фирменный визуальный язык Silvana — тонкие полупрозрачные поверхности,
  edge-to-edge hairline-разделители (--line / --line-rail) вместо жирных бордеров,
  и мягкие цветные тени от --accent на CTA-элементах.
*/

/* Стеклянная поверхность (полупрозрачная, с блюром за ней) — хедер, мега-меню, модалки */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-md)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(150%);
  border: var(--hairline-width) solid var(--glass-border);
}

/* Непрозрачный вариант (мобильные меню, где блюр не нужен/не поддерживается) */
.glass-strong {
  background: var(--glass-bg-strong);
  border: 0;
}

/* Hairline-разделитель — тонкая линия на основе inset box-shadow, а не border,
   чтобы не занимать место в layout и не резать border-radius соседних блоков */
.hairline-top {
  box-shadow: inset 0 var(--hairline-width) 0 var(--line-rail);
}
.hairline {
  border: var(--hairline-width) solid var(--line);
}

/* Мягкие фирменные тени */
.shadow-card {
  box-shadow: 0 26px 60px rgba(18, 21, 28, .06);
}
.shadow-accent-glow {
  box-shadow: 0 24px 80px color-mix(in srgb, var(--accent) 13%, transparent);
}
.shadow-section-ring {
  /* "обод" секции цветом фона — используется, чтобы отделить перекрывающиеся блоки */
  box-shadow: 0 0 0 10px var(--section-bg);
}

/* Кольца фокуса на интерактивных элементах (доступность) */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Фирменный градиент бренда (используется в кнопках, бейджах, декоративных пятнах) */
:root {
  --gradient-accent: linear-gradient(115deg, var(--accent), var(--accent-hover));
}
.bg-gradient-accent {
  background: var(--gradient-accent);
}

/* Декоративное размытое цветное пятно (blob) позади hero-контента */
.accent-blob {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--accent);
  filter: blur(var(--blur-3xl));
  opacity: .35;
  pointer-events: none;
}