/* ══════════════════════════════════════════════════════════════
   Малярный валик на правом поле.
   Катится вниз вместе со скроллом и оставляет за собой след краски.

   Размеры фиксированные, подобраны вручную панелью index.html#tune.
   Полоса шире свободного поля и заходит на контент — так и задумано:
   она работает подложкой, уходя под текст, карточки и фотографии.
   Ниже 1320px валик прячется совсем.
   ══════════════════════════════════════════════════════════════ */

.paint-rail{
  /* размеры подобраны вручную через панель index.html#tune.
     Панель отдаёт готовый кусок отсюда плюс три числа для CFG в roller.js
     (anchor, start, end) — их правим там, здесь их нет. */

  /* ширина полосы краски */
  --rail-w:360px;
  /* ширина валика — своя, независимая: барабан заметно шире краски,
     и тянуть полосу вслед за ним не нужно */
  --roller-w:413px;

  --paint-tile:url('../img/paint-trail.webp');
  --drum-shade:url('../img/roller-shade.webp');
  --drum-nap:url('../img/roller-nap.webp');

  /* краска набирается на первых пикселях: первый мазок валика всегда бледнее */
  --ramp-in:219px;
  --ramp-out:0px;

  position:absolute;
  right:30px;
  top:0;
  width:var(--rail-w);
  height:0;
  pointer-events:none;
  /* Полоса шире свободного поля и намеренно заходит на контент,
     поэтому она — подложка: поверх фона секции, но под всем,
     что в ней лежит (см. .wrap ниже). */
  z-index:0;
}

/* Контент секций поднимается над краской. Секции сайта не позиционированы,
   их фон рисуется раньше — так стена с валиком оказывается ровно между
   фоном секции и её содержимым. */
.wrap{position:relative; z-index:1}

/* ───────── след ───────── */
.paint-trail{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0;
  overflow:hidden;
  /* одна маска держит и начало, и конец: сверху краска набирается,
     снизу выдыхается, когда валик доехал до финиша */
  -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--ramp-in),
      #000 calc(100% - var(--ramp-out)), transparent 100%);
          mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--ramp-in),
      #000 calc(100% - var(--ramp-out)), transparent 100%);
}

/* Тайл настоящей краски с честной альфой, бесшовный по вертикали.
   Никакого blend-mode: фон вырезан по краске, поэтому рваные края
   остаются рваными и на светлой секции, и на графитовой. */
.paint-trail__ink{
  position:absolute;
  top:0; left:0; right:0;
  height:100%;
  background-image:var(--paint-tile);
  background-size:100% auto;
  background-repeat:repeat-y;
  opacity:.88;
}

/* Свежая краска под барабаном темнее и выше подсыхает.
   Маска — тот же тайл в той же фазе, поэтому затемнение
   повторяет рваный край, а не режет его прямоугольником. */
.paint-trail__wet{
  position:absolute;
  top:0; left:0; right:0;
  height:100%;
  background:linear-gradient(180deg, rgba(116,108,97,0), rgba(116,108,97,.17));
  background-size:100% 200px;
  background-position:0 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:var(--paint-tile);
          mask-image:var(--paint-tile);
  -webkit-mask-size:100% auto;
          mask-size:100% auto;
  -webkit-mask-repeat:repeat-y;
          mask-repeat:repeat-y;
  -webkit-mask-position:0 0;
          mask-position:0 0;
}

/* ───────── валик ─────────
   Три слоя, чтобы барабан честно вращался:
   __drum — форма и освещение цилиндра, стоят на месте;
   __nap  — текстура ворса, едет по Y в режиме overlay;
   __frame — рама, ручка и торец, поверх всего.
   Точка касания стены — 11,1 % высоты, она же центр поворота,
   поэтому крен валика не сдвигает стык со следом. */
.paint-roller{
  position:absolute;
  left:49.8%;
  top:0;
  width:var(--roller-w);
  opacity:var(--roller-op, 0);
  /* --lift: на финише валик отрывается от стены и уходит вверх и наружу */
  transform:translate(calc(-50% + var(--wob, 0px) + var(--lift, 0px)),
                      calc(-11.1% - var(--lift, 0px))) rotate(var(--tilt, 0deg));
  transform-origin:50% 11.1%;
}

/* рама и ручка смотрят к краю окна, а не в текст:
   на правом поле это исходная ориентация снимка, зеркалить не нужно */
.paint-roller__in{display:block; width:100%}

.paint-roller__frame{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
}

.paint-roller__drum{
  position:absolute;
  z-index:1;
  left:2.08%;
  top:1.49%;
  width:95.85%;
  height:22.87%;
  overflow:hidden;
  background-image:var(--drum-shade);
  background-size:100% 100%;
  -webkit-mask-image:var(--drum-shade);
          mask-image:var(--drum-shade);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

.paint-roller__nap{
  position:absolute;
  inset:0;
  background-image:var(--drum-nap);
  background-size:100% auto;
  background-repeat:repeat-y;
  mix-blend-mode:overlay;
}

/* ───────── когда полосы нет ───────── */
@media (max-width:1319px){
  .paint-rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .paint-rail{display:none}
}