[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/8d/66/53/8d665375ab03d6aeca22131295f1fcea.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a6/a5/2a/a6a52aa54bc1164eac7f48344a09ec0c.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/88/65/26/886526bd4c21a74fb727c08e282894be.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a5/90/04/a5900470b3440c150893553603ca7d25.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a2/ec/df/a2ecdf3845222ea6e3ed4538545ceead.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->

<script>
  const originalSrc = "https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ОБЪЕДИНЕННАЯ ЦЕРКОВЬ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

В настоящее время Объединённая церковь включает в себя следующие религиозные течения и активно занимается изучением эзотеризма, мистицизма, оккультизма и мистических сил:
- Иудаизм
- Буддизм
- Христианство
- Гностицизм
- Ислам
- Бабизм
- Растафарианство
- Индийские (дхармические) религии
- Этнические религии

Во главе организации стоит Папа Римский — Франциск. Главное управление организацией располагается в Ватикане. Два самых крупных филиала располагаются в Пекине и Нью-Йорке, меньшие филиалы расположены по всему миру в более-менее крупных городах. Несмотря на свою «неофициальность», Объединённая церковь действительно объединила весь мир в единую сеть.

Сотрудники Объединённой церкви делятся на клириков и рыцарей.

Клирики — заняты поиском и структурированием информации, в том числе о паранормальных происшествиях и столкновениях со сверхъестественным.

Рыцари — специально обученные люди, которые выезжают на места паранормальных и сверхъестественных явлений, ведут охоту на потусторонних существ, ведьм и ведьмаков, использующих дарованные силы во вред другим. Они считаются боевой единицей. Боевое подразделение носит название — Рыцари Объединённой церкви, сохранив флёр прошлых лет, а оперативников, выезжающих на место, называют рыцарями. Отряд получает номер согласно священным писаниям, плюс за каждым из рыцарей закреплён свой псалом, лучше всего его характеризующий.

Небесные псы — неофициальный отряд, состоящий из рыцарей, которые подчиняются непосредственно Папе Римскому и являются отрядом карателей-чистильщиков. Псов из числа рыцарей выбирает себе непосредственно Папа. Он не разглашает личности псов, сами псы также не имеют права разглашать то, кто они. Изредка псы работают в полном составе, но чаще выполняют поручения от Папы в одиночку.

Основные цели и задачи организации:
- поддержание мира между державами;
- сохранение человечества, чистоты помыслов и души;
- сохранение культур и религий, использование их знаний и опыта в изучении, взаимодействии и борьбе с паранормальным, сверхъестественным, потусторонним.

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/8d/66/53/8d665375ab03d6aeca22131295f1fcea.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a6/a5/2a/a6a52aa54bc1164eac7f48344a09ec0c.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/88/65/26/886526bd4c21a74fb727c08e282894be.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a5/90/04/a5900470b3440c150893553603ca7d25.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a2/ec/df/a2ecdf3845222ea6e3ed4538545ceead.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->

<script>
  const originalSrc = "https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "КУЛЬТ ТКАЧЕЙ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Первое упоминание о хронистах Культа Ткачей можно встретить в дневниках Юлия Цезаря, датируемых 48–47 годами до н. э., когда Цезарь воевал в Египте, вмешавшись в династическую войну между Клеопатрой и её братом Птолемеем XIII Дионисом. Он вошёл в Александрийскую библиотеку в разгар ритуала, когда из книги явилось двое — хронист Культа и человекоподобное существо. Сперва Цезарь заинтересовался культистами и потребовал от них раскрытия тайн, однако те отказали. Оскорблённый полководец собирался уничтожить культистов и их библиотеку, однако те оказались под протекцией самой Клеопатры, и ему пришлось отступить. Считается, что пожар в городе и в библиотеке в частности — не случайность, однако доказать причастность Цезаря к поджогу и смерти части культистов не удалось.

В 642 году нашей эры Александрия была захвачена арабо-мусульманской армией Амра ибн аль-Ас. Несколько более поздних арабо-мусульманских источников описывают разрушение библиотеки по приказу халифа Умара и массовую казнь библиотекарей, в том числе и хронистов Культа Ткачей, которые отказались раскрывать свои тайны и проводить ритуалы путешествия через книги для людей Амра ибн аль-Ас. После этих событий вплоть до XX века упоминаний о Культе Ткачей попросту не встречалось. Предполагается, что они «залегли на дно».

В 1938 году после смерти писателя Говарда Филлипса Лавкрафта в журнале «Leaves» был впервые опубликован фрагмент рассказа «Азатот», а в 1939 году в руки Рыцарей Объединённой Церкви попала девушка, которая отличалась невероятной красотой и дивным, чарующим голосом. Как удалось выяснить в ходе беседы с ней, она была родом из того самого фрагмента рассказа и по происхождению была морской нимфой. Она поделилась довольно интересными и ценными сведениями с Объединённой Церковью, однако раскрыть местоположение хронистов, как и их цели, не смогла. Позже в руки церкви попадали и другие жители книг, которых привели в мир культисты, получив общее название для своего вида существ — фэйблы.

Местоположение хронистов Культа Ткачей, их лидер и цели остаются для Объединённой Церкви неизвестными и по сей день. Однако Объединённая Церковь смогла выдвинуть кое-какие предположения. Так, например, считается, что Ткачи являются демиургами. Об их основных способностях ничего неизвестно, как и о внешнем виде и численности особей. Единственное, что о них достоверно удалось выяснить, — это то, что они могут искажать ткань реальности и тем самым открывать доступ в другие миры, а затем закрывать его. Предположительно они могут создавать разломы в пространстве, не используя для этого какие-либо предметы, но самым предпочитаемым стали книги (зеркала, шкафы, поверхности озёр и т.п.). Несмотря на то, что любая книга может стать вратами в другой мир, путешествия через книги возможны только благодаря таинствам, которые известны лишь хронистам.

Теории и факты:
- книга, в которую совершено путешествие, не должна быть уничтожена или повреждена, иначе ты навсегда останешься в ней. Культисты могут вызволить тебя через иной том этого же произведения, однако никаких гарантий, что они будут это делать, нет;
- полученные травмы — реальны. Смерть — тоже;
- чтобы попасть в книгу, тебе необходимо принести в жертву (ритуально) важную для себя вещь;
- ты можешь забрать с собой что-нибудь на память из книги, однако этот предмет потеряет часть своих свойств, и неизвестно, как он будет проявлять себя в реальности;
- ты можешь вывести за собой любое существо или героя из книги, в которой оказался, однако сможешь сделать это один раз с конкретным существом или героем. В мире не окажется два, три или четыре Шерлока Холмса, и если он умрёт в реальном мире, вывести его ещё раз не получится. Все существа при переходе из книги принимают человеческое обличье, теряют большинство своих сил и особенностей, при этом они отличаются от обычных людей не только поведением, но и на физиологическом уровне. Так, например, фэйблы не стареют, однако если их убить, то они умирают насовсем, пусть и не пропадают из произведения;
- память фэйблов, попавших в новый мир, не передаётся фэйблу из книги;
- для того чтобы покинуть мир, описанный в книге, тебе нужно провести обратный ритуал, в котором ты принесёшь в жертву вторую важную для себя вещь. Эта вещь должна быть такой же важной, как и первая. Очень важно, чтобы ты в ходе своих приключений её не потерял и не уничтожил, так как это практически единственный твой способ вернуться из книги обратно;
- хронисты ведут учёт вынесенных из произведений артефактов, существ, совершивших переход в реальный мир, а также тех, кто к ним обращался с той или иной просьбой, связанной с путешествиями по мирам, запечатлённым на страницах книг;
- глава Культа Ткачей держит небольшой книжный магазин;
- на хронистов культа можно выйти через букинистов, библиотекарей;
- в своих архивах хронисты указывают дату, когда фэйбл был приведён в мир людей. Именно она считается для них датой «Воплощения» сказочного существа со страниц книги. Самому же фэйблу выдаются документы, в которых указывают возраст, на который он выглядит. Дата (не год) может быть выбрана согласно дню, в который фэйбл пришёл в наш мир, или на его выбор. Фэйблы меняют документы каждые десять лет через хронистов Культа Ткачей. Пример: Крампус был приведён в мир людей весной 1854 года (дата воплощения Крампуса, записанная в архивах хронистов). На тот момент он выглядел как мужчина 40 лет. В первых его документах была указана следующая дата: 12.12.1814 г.р.;
- экземпляр книги, из которой вышел фэйбл, навсегда меняется. Страницы книги становятся пустыми ровно с того момента, где сказочное существо покинуло свой дом, а история впадает в условный стазис. Обычно такие экземпляры хранятся в Библиотеке хронистов, однако порой они бывают утеряны. Очень важно, чтобы данные книги не были повреждены или уничтожены; их необходимо возвращать Культу Ткачей, так как при их серьёзном повреждении или уничтожении фэйбл навсегда лишается возможности вернуться в родной мир. Это единственное условие, которое удалось выяснить для теоретического возвращения фэйбла в свою книгу. Случаев, когда фэйбл смог вернуться обратно, пока нет;
- для того чтобы вывести историю из стазиса, хронист должен совершить путешествие в книгу и узнать, каким образом история пошла дальше. Текст на страницах такой книги будет появляться сам собой ровно до тех пор, пока история не подойдёт к логическому завершению, всё то время, пока хронист находится в ней. Данные книги можно условно считать уникальными «фанфиками». Они всегда в единственном экземпляре.

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/8d/66/53/8d665375ab03d6aeca22131295f1fcea.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a6/a5/2a/a6a52aa54bc1164eac7f48344a09ec0c.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/88/65/26/886526bd4c21a74fb727c08e282894be.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a5/90/04/a5900470b3440c150893553603ca7d25.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a2/ec/df/a2ecdf3845222ea6e3ed4538545ceead.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->

<script>
  const originalSrc = "https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "НАУЧНО-ИССЛЕДОВАТЕЛЬСКИЙ ИНСТИТУТ ЧЕРВОТОЧИНЫ И ВЗЯТОЧНИЧЕСТВА";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Отделы
Отдел Линейного Счастья
Изучает феномен «запланированной радости». Сотрудники вычисляют идеальные интервалы для позитивных событий в жизни человека, чтобы избежать эмоционального выгорания. В полевых условиях проверяют, можно ли «запрограммировать» удачу в Зонах отчуждения. Результаты противоречивые: испытуемые либо находят клады, либо впадают в апатию от предсказуемости.

Отдел Смысла Жизни
Занимается поиском объективного смысла существования. Разработал 47 теорий, из которых 42 были признаны «слишком депрессивными» и засекречены. Сейчас проверяет гипотезу, что смысл жизни — в регенерации нервных клеток.

Отдел Абсолютного Знания
Пытается создать формулу, которая даст ответ на любой вопрос. Пока формула не работает, но при её активации в радиусе километра у всех начинает идти носом кровь. Сотрудники отдела знают 300 способов открыть консервную банку без ножа, но не помнят, как зовут их жён.

Отдел Предсказаний и Пророчеств
Занимается верификацией пророчеств. Отсеивает ложные, систематизирует истинные, пытается вычислить вероятность Апокалипсиса-2. Прогноз на завтра: «с вероятностью 68% будет что-то странное».

Отдел Оборонной Магии
Разрабатывает заклинания и артефакты для защиты от потусторонних угроз. В отличие от боевой магии, делает упор на удержание, блокировку и отступление. Самый популярный продукт — «Браслет вежливого отказа», который убеждает монстра, что в этом здании ему делать нечего.

Отдел Вечной Молодости
Исследует способы остановки старения без потери рассудка. Эксперименты на добровольцах (обычно пожилых сотрудниках НИИ) привели к созданию сыворотки, которая омолаживает тело на 10 лет, но заставляет пациента говорить только стихами. Работа продолжается.

Отдел Недоступных Проблем
Решает задачи, которые официально считаются неразрешимыми. «Как пройти сквозь стену, не разбивая голову?», «Как договориться с сущностью, которая не говорит?», «Как выпить море?». Ответы обычно парадоксальны, но иногда работают.

Отдел Социальной Метеорологии
Прогнозирует «погоду в обществе»: настроение масс, склонность к бунтам, уровень тревожности. Использует сложные формулы, учитывающие новости, слухи и фазу луны. Предсказания отдела часто игнорируются властями — и почти всегда сбываются.

Отдел Универсальных Превращений
Изучает трансформацию материи, энергии и сознания. Может превратить свинец в золото (экономически невыгодно), воду в вино (вкус отвратительный), а страх — в боевой азарт. Мечтает найти формулу превращения «ничего» во «что-то».

Отдел Воинствующего Атеизма
Научно доказывает отсутствие богов, Высшего разума и предопределения. При этом активно сотрудничает с Объединённой церковью (для сбора данных) и Церковью Семи Грехов (для контраргументов). Сотрудники отдела — самые несчастные люди в НИИ, потому что вынуждены верить в то, что не верят.

Отдел Заколдованных Сокровищ
Занимается учётом, изучением и обезвреживанием проклятых артефактов. Хранит их в сейфах с 12 замками. Известен тем, что три раза терял одну и ту же золотую монету, и каждый раз она находилась в кармане заведующего отделом.

Отдел Технического Обслуживания
Самый загадочный отдел. Отвечает за работоспособность лифтов, розеток, компьютеров и магических барьеров. Сотрудники никогда не говорят о своей работе. Поговаривают, что они единственные, кто знает, где находится настоящий Соловец.

Обеспечивающие подразделения
Вычислительный центр — огромный зал с лампами, реле и сотрудницами с арифмометрами. Считает всё: от вероятности выпадения снега в аду до оптимального маршрута побега из вивария.
Музей Изнакурнож — коллекция артефактов, которые работают «неправильно». Зеркало, показывающее прошлое. Компас, указывающий на самого грустного человека. Часы, которые идут только тогда, когда на них никто не смотрит.
Виварий — живой уголок НИИ. Здесь содержатся как безобидные фэйблы (например, говорящий ёж), так и крайне опасные сущности (например, тишина, которая кусается).
Книгохранилище — библиотека, где собраны все книги, связанные с обучением магии, таинственные и зловещие тома с запретными знаниями и т.п.

Город Тьмускорпионь
На 76-м этаже здания НИИ находится полноценный город с его районами. Здесь действует «Государственная Колония Необъяснённых Явлений при НИИЧАВО АН СССР» — тюрьма для существ и хранилище для предметов, которые нельзя уничтожить и опасно выпускать на волю. Климат в городе контролируется искусственно — вечный полумрак и температура «немного ниже комфортной». Жители Тьмускорпионя — в основном сотрудники колонии, осуждённые маги, добровольцы-отшельники и те, кто когда-то забрёл на 76-й этаж и не смог найти выход.

Основные цели и задачи организации
Основной целью организации является изучение паранормальных, сверхъестественных явлений, существ и объектов с точки зрения науки.