/* =============================================================
   тема страницы «сфское» — база + акцент коллабы
   ============================================================= */

.theme-sfckoe {
  --accent: #c0392b;
  --ember: #d35400;
  --dark: #14100f;
}

/* акцент точечно */

.theme-sfckoe .price { color: var(--accent); }

.theme-sfckoe .badge--pre {
  border-color: rgba(192, 57, 43, 0.45);
  color: var(--accent);
}

.theme-sfckoe .head-nav a:hover,
.theme-sfckoe .head-links a:hover,
.theme-sfckoe .foot-links a:hover { color: var(--accent); }

.theme-sfckoe .viewer-note { color: var(--accent); }

/* ---------- коллаб-лого ---------- */

/* лок-ап по центру: глаз и рукописная надпись — два отдельных вырезанных
   элемента, поэтому расстояние между ними задаём сами, а не тем, что
   было запечено в исходном макете */
.collab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(26px, 4vw, 44px);
  padding-bottom: clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--hair-soft);
  text-align: center;
}

.collab-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.collab-eye {
  width: min(168px, 38vw);
  height: auto;
}

.collab-text {
  width: min(232px, 52vw);
  height: auto;
}

/* ---------- души на фоне ----------
   лик вырезан из рисунка: тон целиком несёт альфа, поэтому на светлом
   фоне тёмная голова читается плотной, а белые глаза и рот проступают
   просветами самого фона. лежат под контентом, кликам не мешают */

.souls {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.soul {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation: soul-drift var(--dur, 40s) linear var(--delay, 0s) infinite;
}

/* всплывают, набирают плотность и растворяются у верхней кромки */
@keyframes soul-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 6vh, 0) scale(0.88) rotate(-3deg);
  }
  22% { opacity: var(--peak, 0.14); }
  70% { opacity: var(--peak, 0.14); }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 4vw), calc(-1 * var(--rise, 24vh)), 0) scale(1.14) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .soul { animation: none; opacity: calc(var(--peak, 0.14) * 0.6); }
}

/* ---------- вьювер ---------- */

.theme-sfckoe .viewer { background: #fff; }