/* Leather preview block — натуральная кожа с прострочкой */

/* Цвет нити — зафиксирован (брендовая палитра).
   Side thread = Oxblood, chip thread = Red. */
:root {
  --thread-color: #5d1a2a;
  --thread-highlight: #a8344a;
  --chip-thread-color: #c84a3a;
}
/* контекст: имитация соседних блоков главной */

  /* ═══════════════════════════════════════════════════════════════════════
     LEATHER BLOCK — natural leather texture, tinted darker cream
     ─────────────────────────────────────────────────────────────────────── */
  .leather-block {
    position: relative;
    width: 100%;
    min-height: 1600px;
    overflow: hidden;
    isolation: isolate;
    /* fallback цвет = средний цвет текстуры, чтобы не было «прыжка» при загрузке */
    background-color: #c4b291;
    /* саму текстуру кладём отдельным фоном — фото с натуральным зерном */
    background-image: url('/static/textures/leather-cream.png?v=2');
    background-repeat: repeat;
    background-size: 800px auto;
    background-position: center top;
  }

  /* лёгкий «свет» сверху-слева + более выраженная тень снизу-справа,
     даёт ощущение объёмного куска материала. Свет приглушён, чтобы
     центр не выглядел светлее основной массы текстуры. */
  .leather-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 60% at 18% 15%, rgba(255,240,210,0.12), transparent 60%),
      radial-gradient(ellipse 65% 70% at 85% 88%, rgba(70,45,15,0.28), transparent 65%);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  /* виньетка по краям — заметная, держит материал в кадре */
  .leather-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 90% at center, transparent 45%, rgba(60,38,12,0.32) 100%);
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: multiply;
  }

  /* ─── PUNCH MARKS (pricking iron) ───
     Ромбовидные проколы от пробойника по обоим краям блока,
     симметрично отражёны. Лежат между фото-текстурой и виньеткой,
     чтобы затемнение по краям тоже их покрывало — выглядят как проколы
     в толще материала. */
  .punch-line {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 50px;         /* расширено под полный зигзаг ±27px */
    z-index: 2;
    pointer-events: none;
    display: block;
    overflow: visible;
  }
  .punch-line--left  { left: 32px; }
  .punch-line--right { right: 32px; transform: scaleX(-1); }

  /* ─── FALLING LEATHER CHIPS ───
     Куски кожи, падающие сверху с текстом. Позиция и вращение —
     JS-физика (гравитация, вращение), ложатся на кожу рандомно. */
  .chips-stage {
    position: absolute;
    inset: 0;
    z-index: 4;       /* над кожей и виньеткой, ПОД stitch-overlay (z=6) */
    overflow: hidden; /* обрезаем чипы в границах блока */
    pointer-events: none;
  }
  .leather-chip {
    position: absolute;
    top: 0; left: 0;
    transform-origin: center;
    background-color: #050402;
    /* Сильно затемнённая кожа — текстура едва проглядывает через
       почти-чёрный оверлей. На этом фоне будет блестящее тиснение. */
    background-image:
      linear-gradient(155deg,
        rgba(255,250,235,0.06) 0%,
        rgba(255,250,235,0.02) 28%,
        transparent 55%,
        rgba(0,0,0,0.55) 100%),
      linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.82)),
      url('/static/textures/leather-black.png');
    background-blend-mode: normal, normal, normal;
    /* cover — текстура не тянется, скейлится сохраняя пропорции,
       лишние края обрезаются — весь чип покрывается ОДНИМ куском текстуры. */
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* Прямоугольный чип с мягкими закруглёнными углами и видимым «бахтармовым»
       краем — по периметру идёт более светлый-коричневый ореол «волокон
       изнанки», как на референсе. */
    border: none;
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 1px rgba(110,82,52,0.30),     /* рим «бахтармы» */
      inset 0 0 6px 2px rgba(40,28,16,0.45),    /* мягкая внутренняя тень */
      0 30px 60px rgba(0,0,0,0.70),
      0 8px 18px rgba(0,0,0,0.50),
      inset 0 1px 0 rgba(255,250,235,0.07);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.14em;
    line-height: 1.65;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 34px;
    text-align: left;
    border-radius: 5px;
    will-change: transform;
    user-select: none;
    white-space: pre-line;
    /* СЕРЕБРО на теле текста: металлический градиент клипается по тексту */
    background-clip: padding-box;
    color: transparent;
  }
  /* Серебристый подзаголовок — вторичный, читаемый. Нормальный регистр
     (предложение, не капс), чуть мельче, лёгкое тиснение в тон золоту:
     тонкий блик сверху + тёмная фаска снизу. */
  .leather-chip .chip-body {
    font-size: 0.92em;
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-transform: none;
    opacity: 0.96;
    /* ПОЛИРОВАННОЕ СЕРЕБРО: зеркальный блик в середине + контрастные полосы. */
    background: linear-gradient(180deg,
      #ffffff 0%,
      #dfe4ea 14%,
      #aeb6c0 33%,
      #7c838d 47%,
      #ffffff 50%,
      #99a0aa 55%,
      #6a717a 73%,
      #cdd3da 88%,
      #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Лёгкий дебосс — тоньше, чем у заголовка (подзаголовок вторичен) */
    text-shadow:
      -0.5px -0.5px 0 rgba(255,255,255,0.20),
       0.5px  0.5px 0 rgba(0,0,0,0.80);
  }
  /* ЗОЛОТО на заголовке — «горячее тиснение фольгой».
     Крупнее прежнего (2.0 → 2.7em). Эффект ТИСНЕНИЯ собран из:
       • золотой background-clip градиент (фактура фольги, остаётся);
       • text-shadow в 3 слоя (классический letterpress): тёплый блик
         сверху-слева (свет ловит верхнюю фаску буквы) + тёмная внутренняя
         тень снизу-справа (буква утоплена в кожу) + тонкий тёмный контур-
         вдавливание. Тени крошечные (≤1.5px), без blur'а — не дают лага.
     text-shadow при -webkit-text-fill-color:transparent рисуется ПОД
     прозрачной заливкой глифа и клипается формой текста → именно это даёт
     ощущение рельефа, а не «наклеенных» букв. */
  .leather-chip > .chip-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.7em;
    letter-spacing: 0.16em;
    line-height: 0.98;
    margin-bottom: 14px;
    /* ПОЛИРОВАННОЕ ЗОЛОТО: резкий зеркальный блик в середине + контрастные
       полосы свет/тень → ощущение глянцевого, отполированного металла. */
    background: linear-gradient(178deg,
      #fff7d4 0%,
      #f7d878 14%,
      #d8a83e 33%,
      #a9781d 47%,
      #fff4bf 50%,
      #c89a30 55%,
      #8f6312 73%,
      #ecc862 88%,
      #fff8da 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Рельеф тиснения: блик(↖) + тёмная вдавленная тень(↘) + контур */
    text-shadow:
      -0.5px -0.5px 0 rgba(255,243,200,0.42),  /* тёплый блик верх-слева */
       0.5px  0.5px 0 rgba(0,0,0,0.85),        /* тёмная фаска низ-справа */
       1px    1.5px 1px rgba(0,0,0,0.55);      /* мягкое вдавливание в кожу */
  }
  /* ─── Круглые проколы по периметру каждого чипа ───
     4 ряда повторяющихся радиальных градиентов. background-position
     рассчитан так, чтобы УГЛОВЫЕ точки H и V рядов СОВПАДАЛИ
     (одна точка на угол, без двойной "стопки"). */
  .leather-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
      radial-gradient(circle, rgba(0,0,0,0.85) 1.8px, transparent 2.6px),
      radial-gradient(circle, rgba(0,0,0,0.85) 1.8px, transparent 2.6px),
      radial-gradient(circle, rgba(0,0,0,0.85) 1.8px, transparent 2.6px),
      radial-gradient(circle, rgba(0,0,0,0.85) 1.8px, transparent 2.6px);
    background-size: 18px 6px, 18px 6px, 6px 18px, 6px 18px;
    /* Тайл H: dot центр (9,3). Сдвиг 5,11 → точка на (14, 14)
       Тайл V: dot центр (3,9). Сдвиг 11,5 → точка на (14, 14)
       Так top-left угол получает ОДНУ совмещённую точку. */
    background-position:
      5px 11px,
      5px calc(100% - 17px),
      11px 5px,
      calc(100% - 17px) 5px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    filter: drop-shadow(0 0.5px 0 rgba(255,250,235,0.15));
  }

  .leather-block__inner {
    position: relative;
    z-index: 5;
    /* пусто, наполнение появится позже */
  }

  /* ─── STITCH ANIMATION (иглы + нити) ─── */
  .stitch-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;       /* над виньеткой, над проколами — игла и нить видны всегда */
    pointer-events: none;
    overflow: visible;
    /* ПЕРФ: выносим оверлей в ОТДЕЛЬНЫЙ слой компоновщика. JS перестраивает
       d нитей и transform игл КАЖДЫЙ кадр → постоянный repaint этого слоя.
       Без изоляции этот repaint тянул за собой соседей: .leather-block::before
       /::after с mix-blend-mode:multiply (их blend нельзя дёшево ускорить) и
       fixed-nav с backdrop-filter сверху. Своя backing-поверхность отвязывает
       ежекадровую перерисовку нитей от блендов и бэкдропа — особенно заметно
       при резком скролле и при флипе data-hand-mode (nav анимируется 0.4s и
       ре-сэмплит всё под собой). Визуал/тайминги не меняются — только
       композитинг. translateZ(0) форсит слой, will-change подсказывает GPU. */
    transform: translateZ(0);
    will-change: transform;
  }
  .thread-base {
    fill: none;
    stroke: var(--thread-color);
    stroke-width: 6.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .thread-twist {
    fill: none;
    stroke: var(--thread-highlight);
    stroke-width: 3.2;
    stroke-linecap: round;
    /* Пунктир dasharray имитирует витые волокна нити —
       маленькие пряжки света по всей длине.
       3 пкс блик + 2 пкс пробел = ~5px шаг витка. */
    stroke-dasharray: 3 2.2;
  }
  .needle {
    /* позиция и ротация устанавливаются JS-ом через transform attribute */
    transition: opacity 0.3s;
  }
  .needle.hidden { opacity: 0; }

  /* Стежковый оверлей НА ЧИПЕ: лежит НАД дотами (::after = z=0),
     но под viewport-виньеткой блока кожи. Инвертируется вместе с chip transform. */
  .chip-stitch-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
  }
  .chip-stitch-thread {
    stroke: var(--chip-thread-color);
    filter: drop-shadow(0 0.6px 0.5px rgba(0,0,0,0.55));
  }
  .chip-foot {
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.55));
  }

  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE ПОДГОНКИ (блок < 600px)
     —————————————————————————————————————————————————————————————————————
     • боковые колонки проколов идут ближе к краям (14px вместо 32px)
     • чипы в ОДНУ колонку, шире (по всю доступную ширину минус 56px)
     • вертикально разнесены 6 слотов по всему блоку
     • шрифты и паддинги уменьшены
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 600px) {
    .leather-block {
      min-height: 1500px;
      background-size: 500px auto;
    }
    .punch-line { width: 32px; }
    .punch-line--left  { left: 14px; }
    .punch-line--right { right: 14px; }
    .leather-chip {
      font-size: 11px;
      padding: 18px 20px;
      letter-spacing: 0.10em;
      line-height: 1.55;
    }
    .leather-chip > .chip-title {
      font-size: 1.95em;
      letter-spacing: 0.10em;
      line-height: 0.98;
      margin-bottom: 9px;
    }
    .leather-chip .chip-body {
      font-size: 0.95em;
      line-height: 1.45;
    }
  }