/* ============================================================
   Нить Sutra — сетевой мотив-разделитель (SSOT, v1.0.0)
   Разделитель: CSS-линия во всю ширину (края тают через mask) +
   фикс-пропорция inline-SVG орнамент (орбита+линза+дышащее ядро).
   Обе темы: currentColor = var(--gold,var(--brass,#C9A96E)); контраст-буст
   на html.light (эзо-сеть переключает тему КЛАССОМ html.light, не OS-media).
   Ноль внешних ресурсов (RKN). aria-hidden + prefers-reduced-motion.
   Происхождение: дизайн-воркфлоу sutra-thread-design (победитель «минимал-филамент»).
============================================================ */

/* ── Разделитель ── */
.sutra-thread{
  color: var(--gold, var(--brass, #C9A96E)); /* каскад темы → currentColor */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: clamp(2rem, 5vw, 3.5rem) auto; /* рекомендованный вертикальный воздух */
  height: 60px;
  line-height: 0;
}
.sutra-thread__line{
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.25px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.85;
  /* растворение к краям + чистый зазор под центральным орнаментом */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 14%, #000 44%, transparent 47%,
    transparent 53%, #000 56%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 14%, #000 44%, transparent 47%,
    transparent 53%, #000 56%, #000 86%, transparent 100%);
}
.sutra-thread__node{
  position: relative;
  display: block;
  width: 48px; height: 48px;
  overflow: visible;
  /* Цветокодирование ниш (носитель B): орнамент тинтится нишей, ЛИНИЯ остаётся
     золотой. Fallback на золото → на сайтах без --niche вид прежний. */
  color: var(--niche, var(--gold, var(--brass, #C9A96E)));
}
.sutra-thread__core{
  opacity: 0.85;
  animation: sutra-thread-breath 6s ease-in-out infinite;
}
@keyframes sutra-thread-breath{
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce){
  .sutra-thread__core{ animation: none; opacity: 0.85; }
}
/* Светлая тема (эзо-сеть = класс html.light): тёмное золото по почти-белому —
   поднимаем присутствие нити, иначе fade-края «съедают» хайрлайн. */
html.light .sutra-thread__line{ opacity: 1; height: 1.25px; }

/* Узкие экраны */
@media (max-width: 640px){
  .sutra-thread{ height: 48px; margin: clamp(1.5rem, 7vw, 2.5rem) auto; }
  .sutra-thread__node{ width: 40px; height: 40px; }
}

/* ── HERO-фоновая нить (opt-in: добавить разметку в hero; на светлой осторожно) ── */
.sutra-hero-thread{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  color: var(--gold, var(--brass, #C9A96E));
  opacity: 0.10;
}
.sutra-hero-thread svg{ display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference){
  .sutra-hero-thread__strand{
    stroke-dasharray: 8 14;
    animation: sutra-hero-flow 40s linear infinite;
  }
  @keyframes sutra-hero-flow{ to { stroke-dashoffset: -220; } }
}
html.light .sutra-hero-thread{ opacity: 0.07; }