/* ============================================================
   Промо-баннер «Готовые пакеты с вашим логотипом» на главной.
   Отдельный блок под существующим первым экраном.

   ВСЁ пространство имён — .pb*. Это не косметика: на главной уже
   живёт .hero / .hero__inner / .hero__badge / .hero__trust, и любое
   пересечение имён роняет действующий первый экран. Проверяется
   тестом tests/e2e/promo-banner.spec.ts.

   Цвета и шрифт берём из common-v2.css (:root), свои переменные
   заводим только под геометрию сцены и скоупим их на .pb.
   ============================================================ */

.pb{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 18%, #fdf1f3 0%, rgba(253,241,243,0) 58%),
    radial-gradient(90% 80% at 8% 92%, #f2f6fb 0%, rgba(242,246,251,0) 60%),
    linear-gradient(180deg,#fcfcfd 0%,#f7f8fa 100%);

  /* ширина фото-карточки — вся сцена масштабируется от неё */
  --pb-scene-w:430px;
}

.pb__inner{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:0 auto;
  padding:clamp(56px,7vw,96px) clamp(20px,5vw,48px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,5vw,72px);
}

/* Световое пятно, ведомое курсором. Без filter:blur — радиальный
   градиент даёт тот же вид, но не заставляет GPU перерисовывать слой. */
.pb__glow{
  position:absolute;
  inset:-25%;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(38% 38% at var(--pb-gx,62%) var(--pb-gy,34%),
             rgba(var(--c-coral-rgb), 
) 0%,
             rgba(var(--c-coral-rgb), 
) 42%,
             rgba(var(--c-coral-rgb), 
) 72%);
}
/* Зерно — статичный inline-SVG, ноль стоимости в кадре */
.pb__grain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* ---------- текстовая колонка ---------- */
.pb__copy{max-width:560px}

.pb__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  padding:7px 14px 7px 10px;
  border:1px solid rgba(var(--c-coral-rgb), 
);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-coral-hover);
}
.pb__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-brand-green);
  box-shadow:0 0 0 0 rgba(109,182,62,.5);
  animation:pbPulse 2.6s ease-out infinite;
}
@keyframes pbPulse{
  0%{box-shadow:0 0 0 0 rgba(109,182,62,.45)}
  70%{box-shadow:0 0 0 8px rgba(109,182,62,0)}
  100%{box-shadow:0 0 0 0 rgba(109,182,62,0)}
}

.pb__title{
  margin:0 0 20px;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.07;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--c-text);
}
.pb__accent{
  font-style:normal;
  position:relative;
  color:var(--c-coral);
  white-space:nowrap;
}
/* Подчёркивание прорисовывается после появления заголовка */
.pb__accent::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:.06em;
  height:.09em;
  border-radius:99px;
  background:linear-gradient(90deg,var(--c-coral),rgba(var(--c-coral-rgb), 
));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s cubic-bezier(.22,1,.36,1) .75s;
}
.pb--in .pb__accent::after{transform:scaleX(1)}

.pb__lead{
  margin:0 0 32px;
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.62;
  color:var(--c-text-secondary);
  max-width:48ch;
}

.pb__actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 36px}

.pb__btn{
  --pb-lift:0;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--radius-lg,12px);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transform:translateY(var(--pb-lift));
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             background-color .25s ease,
             border-color .25s ease;
}
.pb__btn--primary{
  background:var(--c-coral);
  color:#fff;
  box-shadow:0 6px 18px rgba(var(--c-coral-rgb), 
);
}
.pb__btn--primary:hover{--pb-lift:-3px;background:var(--c-coral-hover);box-shadow:0 14px 30px rgba(var(--c-coral-rgb), 
)}
.pb__btn--ghost{
  background:rgba(255,255,255,.7);
  border-color:var(--c-border);
  color:var(--c-text);
}
.pb__btn--ghost:hover{--pb-lift:-3px;border-color:#d3d7de;box-shadow:0 12px 26px rgba(20,20,30,.09)}
.pb__btn:focus-visible{outline:2px solid var(--c-coral);outline-offset:3px}
/* Блик, пробегающий по основной кнопке при наведении */
.pb__btn--primary::after{
  content:'';
  position:absolute;
  top:0;bottom:0;left:-60%;
  width:45%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.22,1,.36,1);
}
.pb__btn--primary:hover::after{left:130%}
.pb__btn svg{flex:none}

.pb__facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3.2vw,44px);
  padding-top:24px;
  border-top:1px solid var(--c-border);
}
.pb__fact-num{
  display:block;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--c-text);
}
.pb__fact-label{
  display:block;
  margin-top:5px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--c-text-secondary);
}

/* ============================================================
   Сцена: реальные фото работ + проход ракеля.

   После двух попыток рисовать изделие (3D-пакеты, line-art) решение —
   не рисовать вовсе: в кадре настоящие фотографии готовых пакетов из
   портфолио. Правдоподобие гарантировано, а «печать» визуализирует
   ракель: полоса проходит по кадру, и следующая работа проявляется
   за ней, как оттиск за проходом печатного вала.
   ============================================================ */
.pb__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(540px,60vh);
  perspective:1400px;
  perspective-origin:50% 45%;
}
.pb__scene{
  position:relative;
  width:var(--pb-scene-w);
  transform-style:preserve-3d;
  transform:
    translate3d(0,var(--pb-sy,0),0)
    rotateX(var(--pb-rx,0deg))
    rotateY(var(--pb-ry,0deg));
  will-change:transform;
}

/* Фото-карточка. Стопка позади — «это тираж работ, листай дальше». */
.pb__photo{
  position:relative;
  border-radius:14px;
  background:#fff;
  padding:10px 10px 14px;
  box-shadow:
    inset 0 0 0 1px rgba(37,42,52,.07),
    0 26px 48px -26px rgba(37,42,52,.45);
}
.pb__photo::before,.pb__photo::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(37,42,52,.08);
  z-index:-1;
}
.pb__photo::before{transform:rotate(-2.2deg) translate(-8px,7px)}
.pb__photo::after{transform:rotate(1.6deg) translate(7px,4px)}

.pb__frame{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  aspect-ratio:4/3;
  background:#f2f3f6;
}
.pb__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Верхний слой проявляется слева направо за ракелем */
.pb__frame img.pb__next{clip-path:inset(0 100% 0 0)}
.pb--wipe .pb__frame img.pb__next{
  animation:pbReveal 1.1s cubic-bezier(.6,.05,.3,1) forwards;
}
@keyframes pbReveal{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}
/* Ракель — вертикальная планка, идёт синхронно с проявлением */
.pb__squeegee{
  position:absolute;
  top:-4%;
  left:-6%;
  width:14px;
  height:108%;
  border-radius:7px;
  background:linear-gradient(90deg,#3a4150,#252a34 55%,#3a4150);
  box-shadow:0 6px 18px rgba(37,42,52,.35);
  opacity:0;
  pointer-events:none;
}
.pb__squeegee::after{
  content:'';
  position:absolute;
  left:50%;top:-14px;
  width:4px;height:16px;
  margin-left:-2px;
  border-radius:2px;
  background:#8d95a3;
}
.pb--wipe .pb__squeegee{animation:pbSqueegee 1.1s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes pbSqueegee{
  0%  {opacity:0;transform:translateX(0)}
  8%  {opacity:1}
  92% {opacity:1}
  100%{opacity:0;transform:translateX(calc(var(--pb-scene-w) * 1.04))}
}

/* Подпись под фото: настоящая работа, а не рендер */
.pb__photo-cap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 4px 0;
  font-size:11.5px;
  font-weight:600;
  color:var(--c-text-secondary);
}
.pb__photo-cap::before{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background:var(--c-brand-green);
  flex:none;
}

/* ---------- плавающие подписи материалов ---------- */
.pb__chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 26px -10px rgba(20,20,30,.28);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  color:var(--c-text);
  transform:translate3d(var(--pb-cx,0),var(--pb-cy,0),var(--pb-cz,0));
  transition:box-shadow .5s ease;
}
.pb__chip-sw{width:12px;height:12px;border-radius:4px;flex:none}
.pb__chip--a{top:-13%; left:-40%; --pb-cz:70px;  animation:pbDrift 9s  ease-in-out infinite}
.pb__chip--b{top:12%;  right:-44%;--pb-cz:110px; animation:pbDrift 11s ease-in-out infinite .8s}
.pb__chip--c{bottom:16%;left:-46%;--pb-cz:40px;  animation:pbDrift 10s ease-in-out infinite .4s}
.pb__chip--d{bottom:-8%;right:-34%;--pb-cz:90px; animation:pbDrift 12s ease-in-out infinite 1.2s}
/* Анимируем translate, а не transform — иначе затрём --pb-cx/--pb-cy от пружин */
@keyframes pbDrift{
  0%,100%{translate:0 0}
  50%    {translate:0 -13px}
}
.pb__stage:hover .pb__chip{box-shadow:0 16px 34px -12px rgba(20,20,30,.34)}

/* ---------- появление ---------- */
.pb__rise{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--pb-d,0s),
             transform .85s cubic-bezier(.22,1,.36,1) var(--pb-d,0s);
}
.pb--in .pb__rise{opacity:1;transform:none}

.pb__photo,.pb__chip{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1) var(--pb-d,0s),
             transform 1s cubic-bezier(.22,1,.36,1) var(--pb-d,0s);
}
.pb--in .pb__photo,.pb--in .pb__chip{opacity:1;transform:none}

/* Без JS баннер обязан остаться читаемым, а не белым прямоугольником */
.pb.pb--nojs .pb__rise,
.pb.pb--nojs .pb__photo,
.pb.pb--nojs .pb__chip{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  .pb{--pb-scene-w:370px}
}
@media (max-width:860px){
  .pb{--pb-scene-w:320px}
  .pb__inner{grid-template-columns:1fr;text-align:center;gap:clamp(28px,7vw,44px)}
  .pb__copy{max-width:none;margin:0 auto}
  .pb__lead{margin-left:auto;margin-right:auto}
  .pb__actions,.pb__facts{justify-content:center}
  /* Раньше сцена уезжала наверх (order:-1) и вставала ПЕРЕД заголовком:
     на телефоне блок начинался с картинки, а «Готовая продукция со склада» и
     сам заголовок оказывались под ней — читалось как чужой элемент, повисший
     над секцией. Порядок оставляем естественным: сначала о чём речь, потом
     иллюстрация. */
  .pb__stage{min-height:390px}
  /* Четыре подписи на узком экране смыкаются над пакетом и закрывают его.
     Оставляем две самых коротких — по диагонали, выше и ниже корпуса. */
  .pb__chip{background:#fff;font-size:11.5px;padding:8px 12px}
  .pb__chip--b,.pb__chip--d{display:none}
  /* Смещения — в % от ширины сцены, а она у листа заметно больше прежней:
     -40% уводили подпись за край экрана на 375px. */
  /* Сцена 330px на 375px-экране: запас всего ~22px с борта, любые
     отрицательные проценты уводят подпись за край. Держим чипы у бортов. */
  .pb__chip--a{top:-13%;left:-2%;bottom:auto;right:auto}
  .pb__chip--c{bottom:-8%;right:-2%;top:auto;left:auto}
  .pb__grain{display:none}
}
@media (max-width:420px){
  .pb{--pb-scene-w:262px}
}

/* ============================================================
   prefers-reduced-motion. Селекторы намеренно заскоуплены на .pb:
   глобальный `*` в общем файле погасил бы анимации всего сайта.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pb,.pb *,.pb *::before,.pb *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .pb__rise{opacity:1;transform:none}
  .pb__photo,.pb__chip{opacity:1 !important;transform:none !important}
  .pb__squeegee{display:none !important}
  .pb__frame img.pb__next{clip-path:none}
  .pb__accent::after{transform:scaleX(1)}
}