<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Диплом самой себе</title>
  <style>
    :root{
      --bg:#0f0f12;
      --paper:#ffffff;
      --ink:#111317;
      --muted:#6c707a;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      min-height:100vh;
      background: radial-gradient(1200px 800px at 50% 10%, #1a1b22 0%, var(--bg) 55%, #0b0c10 100%);
      color:var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      overflow:hidden; /* чтобы герои не создавали скролл */
    }

    /* Лист бумаги */
    .stage{
      position:relative;
      height:100vh;
      width:100vw;
      display:grid;
      place-items:center;
      padding:24px;
      isolation:isolate; /* чтобы герои были над всем */
    }

    .paper{
      width:min(860px, 92vw);
      aspect-ratio: 1 / 1.2; /* похоже на лист */
      background:var(--paper);
      border-radius:10px;
      box-shadow:
        0 20px 70px rgba(0,0,0,.55),
        0 2px 0 rgba(255,255,255,.12) inset;
      position:relative;
      padding: clamp(28px, 4vw, 56px);
      display:flex;
      align-items:flex-start;
      justify-content:center;
    }

    /* Типографика (в стиле твоего скрина) */
    .content{
      width:100%;
      text-align:center;
      margin-top: clamp(34px, 6vw, 70px);
    }
    .title{
      letter-spacing:.36em;
      font-weight:600;
      font-size: clamp(16px, 2.2vw, 22px);
      text-transform:uppercase;
    }
    .subtitle{
      margin-top:10px;
      font-size: clamp(12px, 1.6vw, 14px);
      color:var(--muted);
    }

    .pairs{
      width:min(560px, 92%);
      margin: clamp(44px, 7vw, 80px) auto 0;
      display:grid;
      grid-template-columns: 1fr auto;
      row-gap: 18px;
      column-gap: 18px;
      align-items:baseline;
      text-align:left;
      font-size: clamp(14px, 1.9vw, 16px);
    }
    .pairs .left{
      padding-left: 6px;
    }
    .pairs .dash{
      color:var(--muted);
      padding-right:6px;
      white-space:nowrap;
    }
    .foot{
      margin-top: clamp(48px, 7vw, 90px);
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.06em;
    }
    .foot div{ margin-top:8px; }

    /* Сказочные герои */
    .sprite-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:5;
    }
    .sprite{
      position:absolute;
      width: clamp(34px, 4.4vw, 56px);
      height: auto;
      filter: drop-shadow(0 10px 10px rgba(0,0,0,.35));
      opacity:.95;
      transform-origin:center;
      will-change: transform;
    }
    .sprite .body{
      stroke:#0f1220;
      stroke-width:2.2;
      stroke-linejoin:round;
      stroke-linecap:round;
    }

    /* Уважение к настройке “уменьшить движения” */
    @media (prefers-reduced-motion: reduce){
      body{ overflow:auto; }
      .sprite-layer{ display:none; }
    }

    /* Печать */
    @media print{
      body{ background:white; overflow:visible; }
      .sprite-layer{ display:none; }
      .paper{ box-shadow:none; width:100%; aspect-ratio:auto; border-radius:0; }
    }
  </style>
</head>
<body>
  <div class="stage" id="stage">
    <div class="paper" aria-label="Титульный лист">
      <div class="content">
        <div class="title">ДИПЛОМ САМОЙ СЕБЕ</div>
        <div class="subtitle">(рабочее название / не для защиты)</div>

        <div class="pairs">
          <div class="left">Владимир Пропп</div><div class="dash">— как рассказывают</div>
          <div class="left">Александр Куприн</div><div class="dash">— как живут</div>
          <div class="left">Фёдор Достоевский</div><div class="dash">— как заражаются</div>
          <div class="left">James George Frazer</div><div class="dash">— почему это вообще повторяется тысячелетиями</div>
        </div>

        <div class="foot">
          <div>без вывода · без морали · без спасения</div>
          <div>текст · зарисовки · схемы · фиксации</div>
        </div>
      </div>
    </div>

    
    <div class="sprite-layer" id="sprites" aria-hidden="true"></div>
  </div>

  <template id="tpl-hero">
    
    <svg class="sprite" viewBox="0 0 64 64" role="img">
      
      <g class="body"></g>
    </svg>
  </template>

  <script>
    (function () {
      const layer = document.getElementById('sprites');
      const tpl = document.getElementById('tpl-hero');
      const stage = document.getElementById('stage');

      // Набор "сказочных" силуэтов (простые векторные пиктограммы)
      const HEROES = [
        // Лиса
        (g)=> g.innerHTML = `
          <path d="M10 40c8-10 11-18 22-20 9-2 17 2 20 10 2 6-2 12-7 14-9 4-23 1-35-4z" fill="#f29b3a"/>
          <path d="M16 26l6 8-10-2z" fill="#f29b3a"/>
          <path d="M44 23l7 6-10 2z" fill="#f29b3a"/>
          <circle cx="40" cy="34" r="2" fill="#0f1220"/>
          <path d="M24 44c6 4 16 4 22 0" fill="none"/>
          <path d="M46 44c7 1 9 7 5 10-5 4-16-1-16-1" fill="#ffd7a8"/>
        `,
        // Дракончик
        (g)=> g.innerHTML = `
          <path d="M14 36c0-10 8-18 18-18 9 0 16 6 18 14 2 8-4 16-12 18-10 2-24-3-24-14z" fill="#6ad38a"/>
          <path d="M40 20l10-4-4 10z" fill="#6ad38a"/>
          <path d="M24 18l-6-6 2 10z" fill="#6ad38a"/>
          <path d="M20 46c3 5 10 8 16 6" fill="none"/>
          <circle cx="38" cy="32" r="2" fill="#0f1220"/>
          <path d="M46 34c6 0 8 4 6 7-2 3-8 3-12 0" fill="#b9f2c8"/>
        `,
        // Рыцарь
        (g)=> g.innerHTML = `
          <path d="M22 18h20l-2 10c-1 6-4 10-8 12-4-2-7-6-8-12z" fill="#c7cbd6"/>
          <path d="M24 18c3-6 13-6 16 0" fill="#c7cbd6"/>
          <path d="M30 28h4v10h-4z" fill="#0f1220" opacity=".15"/>
          <path d="M14 44h20l-6 10H10z" fill="#d9b36a"/>
          <path d="M44 22l10 6-2 4-10-6z" fill="#d9b36a"/>
          <circle cx="29" cy="28" r="1.8" fill="#0f1220"/>
          <circle cx="35" cy="28" r="1.8" fill="#0f1220"/>
        `,
        // Принцесса
        (g)=> g.innerHTML = `
          <path d="M20 28c0-8 6-14 12-14s12 6 12 14-6 14-12 14-12-6-12-14z" fill="#ffd3e6"/>
          <path d="M18 30l-6-8 10 2 2-10 8 8 8-8 2 10 10-2-6 8" fill="#f6c04a"/>
          <path d="M18 50c4-10 24-10 28 0" fill="#8aa7ff"/>
          <circle cx="28" cy="28" r="2" fill="#0f1220"/>
          <circle cx="36" cy="28" r="2" fill="#0f1220"/>
          <path d="M28 36c3 3 5 3 8 0" fill="none"/>
        `
      ];

      const rand = (a,b)=> a + Math.random()*(b-a);

      function makeSprite() {
        const node = tpl.content.firstElementChild.cloneNode(true);
        const g = node.querySelector('.body');
        HEROES[Math.floor(Math.random()*HEROES.length)](g);

        const s = {
          el: node,
          x: rand(0, window.innerWidth - 60),
          y: rand(0, window.innerHeight - 60),
          vx: rand(40, 120) * (Math.random()<.5 ? -1 : 1),
          vy: rand(40, 120) * (Math.random()<.5 ? -1 : 1),
          w: 0,
          h: 0,
          wobble: rand(0, Math.PI*2),
          flip: 1
        };

        layer.appendChild(node);

        // измерим размеры (после вставки)
        requestAnimationFrame(()=> {
          const r = node.getBoundingClientRect();
          s.w = r.width; s.h = r.height;
        });

        return s;
      }

      const COUNT = Math.min(10, Math.max(6, Math.floor(window.innerWidth / 160)));
      const sprites = Array.from({length: COUNT}, makeSprite);

      let last = performance.now();
      function tick(now){
        const dt = Math.min(0.032, (now-last)/1000);
        last = now;

        const W = window.innerWidth;
        const H = window.innerHeight;

        sprites.forEach(s=>{
          // легкая "живая" тряска, как будто бегут
          s.wobble += dt * 8;

          s.x += s.vx * dt;
          s.y += s.vy * dt;

          // отскоки от краев
          const maxX = W - (s.w || 56);
          const maxY = H - (s.h || 56);

          if (s.x < 0) { s.x = 0; s.vx *= -1; }
          if (s.x > maxX) { s.x = maxX; s.vx *= -1; }
          if (s.y < 0) { s.y = 0; s.vy *= -1; }
          if (s.y > maxY) { s.y = maxY; s.vy *= -1; }

          // направление (флип по X)
          s.flip = s.vx >= 0 ? 1 : -1;

          // наклон в сторону движения
          const tilt = Math.max(-18, Math.min(18, s.vx/10));
          const bob = Math.sin(s.wobble) * 3;

          s.el.style.transform =
            `translate(${s.x}px, ${s.y + bob}px) scaleX(${s.flip}) rotate(${tilt}deg)`;
        });

        requestAnimationFrame(tick);
      }

      // иногда меняем траектории, чтобы было “сказочнее”
      setInterval(()=>{
        sprites.forEach(s=>{
          if (Math.random() < 0.25){
            s.vx += rand(-60, 60);
            s.vy += rand(-60, 60);
            // ограничим скорость
            const clamp = (v)=> Math.max(-160, Math.min(160, v));
            s.vx = clamp(s.vx); s.vy = clamp(s.vy);
          }
        });
      }, 900);

      window.addEventListener('resize', ()=>{
        // ничего сложного, просто пусть дальше отрисовывается по новым размерам
      });

      requestAnimationFrame(tick);
    })();
  </script>
</body>
</html>