[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/736x/07/3f/5e/073f5e71d7caac2eaada68e28f56d577.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/1200x/58/a7/cc/58a7cc26e3bc863868e63b720db1e7d1.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/736x/3b/ef/54/3bef5405c5c6b5ff16be04ece8be5ac0.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/736x/17/45/19/17451905484cea4a32deedefe219723c.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/1f/02/b8/1f02b80c9331626e487769f4fcb0394f.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/736x/cc/66/e5/cc66e5131e324f468900e93745f9f474.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/736x/17/45/19/17451905484cea4a32deedefe219723c.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/736x/17/45/19/17451905484cea4a32deedefe219723c.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/736x/8e/65/60/8e65602586a4106679da287d3b9bbfb5.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/1200x/85/27/d0/8527d03f700c5380e294106d722afbe7.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/736x/53/87/76/538776272d7e11e69395b969db4ee12a.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/736x/f1/1b/1c/f11b1c7cc22205bda2d0abdea9118608.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/736x/08/c0/17/08c0175454f5da82d0e0e8f854e0abf8.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/736x/4b/56/09/4b5609dfb78f141aa08340ba00405ca1.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/736x/f1/1b/1c/f11b1c7cc22205bda2d0abdea9118608.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/736x/f1/1b/1c/f11b1c7cc22205bda2d0abdea9118608.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/73/9c/ca/739ccacafc38bf6b7795f6793780e721.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/1200x/08/6f/bf/086fbf1940c19bd00a24bbaa98075e27.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/ca/0c/d5/ca0cd5ad9c2f1fe6252e11e28acf8d28.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/89/50/b5/8950b5dc161388de8ac319dac84873bb.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/736x/12/36/fc/1236fc3cbf5542c2081586f9a1e7e05c.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/736x/e2/55/67/e255679283a6305872028b8fbd2e4632.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/89/50/b5/8950b5dc161388de8ac319dac84873bb.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/89/50/b5/8950b5dc161388de8ac319dac84873bb.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]

Эльфы - дивный, остроухий, утончённый народец, живущий в особом подпространстве, именующемся Королевством эльфов, на островах Великобритании и считающий себя «высшей расой».

В свои земли они никого не пускают и не являются частью Благого или Неблагого дворов фэйри, живя от них обособленно.

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

В 1993 году люди в очередной раз доказали эльфам, что их раса способна только на одно — разрушать, поддаваться порокам и тонуть в нескончаемых желаниях. В ходе сделки между фэйри и людьми острова Великобритании были спасены от затопления: их скрыл великий туман, и для всех они оказались потерянными.

Эльфы — долгожители. По меркам людей и представителей некоторых других рас они практически бессмертны. Средняя продолжительность жизни эльфов составляет около 700 лет, однако они могут прожить как меньше, так и больше.

Их раса немногочисленна. Возможность давать потомство для них ограничена: каждый ребёнок считается священным даром. Потомство могут давать только молодые эльфы (от 50 до 100 лет).

Срок беременности составляет год, при этом отмечается именно день зачатия, а не день рождения.

Физическое совершеннолетие наступает в период от 50 до 100 лет: к 50 годам эльфы достигают своего окончательного роста, а к 100 годам эльф уже полностью достигает взрослого состояния. После этого тела эльфов перестают физически взрослеть или стареть.

Чаще всего между эльфами заключаются политические браки.

Они однолюбы, хотя близость могут иметь со многими, не считая это чем-то из ряда вон. Если эльфы полюбили друг друга, им не мешают быть вместе.

Однополая любовь среди эльфов порицается, ибо это тупиковая ситуация, не дающая возможности продолжить род. Втайне ото всех подобную близость иметь можно, но это опасно.

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

Эльфы обладают мистическими силами: вдали от Королевства их способности слабеют и изменяются. Они более ловки и выносливы по сравнению с людьми, имеют иммунитет к болезням и ядам. При переходе из Королевства в мир людей они не меняют свой облик, поэтому им следует быть осторожными.

[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]

Фэйблы — это существа, приведённые в реальный мир хронистами Культа Ткачей. Они не отличаются внешне от людей, однако отличаются от них на физиологическом уровне. Так, например, фэйблы не стареют, являясь условно бессмертными. Они менее восприимчивы к ряду человеческих болезней, а какие-то, напротив, могут быть для них смертельными, несмотря на то, что для людей являются пустяком. Фэйбла можно убить: иногда для этого требуются определённые способы, а порой он смертен точно так же, как и обычный человек.

Вернуться в книгу самостоятельно фэйбл не может. Его персонаж, существующий в произведении, не получает его знания и умения; более того, из всего произведения он не исчезает. Фэйбл покидает конкретный экземпляр книги с конкретного момента, а дальше история внутри идёт своим чередом, уже без его участия. Фэйбла из произведения можно вывести единожды. Если фэйбл умирает в реальном мире, его нельзя будет вывести из другого экземпляра книги.

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