@charset "utf-8";
/* pallet.alfamatic.ru — лендинг «Автоматизация паллетирования и упаковки». Общий вид блоков — css/landing.css.
   Цвета — бренда лендинга (значки, кнопки): индиго логотипа Альфы и оранжевый. Всё цветовое — в токенах. */

[data-site="pallet"] {
  --c-brand: #301f86;
  --c-primary: #ed6720;
  --c-primary-hover: #f47c3a;
  --c-primary-ink: #fff;
  --c-accent: #ed6720;
  --c-deep: #160f3f;
  --c-deep-2: #22186a;
  --c-soft: #f2f3f7;
  --c-surface: #f2f3f7;
  --c-dark: #160f3f;
  --c-deep-rgb: 22 15 63;
  --c-brand-rgb: 48 31 134;
  --c-accent-rgb: 237 103 32;
  --c-brand-2: #4a36c4;
}

/* ---------- живая схема «сборка паллеты» ---------- */
.pb { margin: 0; animation: statIn .9s cubic-bezier(.2, .7, .2, 1) both .25s; }
.pb__screen { overflow: hidden; padding: 16px 18px 14px; border-radius: 20px; border: 1px solid rgb(255 255 255 / 16%);
  background: linear-gradient(160deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); backdrop-filter: blur(12px); box-shadow: 0 30px 60px rgb(0 0 0 / 35%); }
.pb__top { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--sp-4); align-items: end; }
.pb__label { font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / 60%); }
.pb__pattern { grid-row: 2; font-size: 1.3rem; color: #fff; }
.pb__pattern.is-new { animation: pbPop .5s cubic-bezier(.2, .7, .2, 1.4); }
@keyframes pbPop { from { opacity: 0; transform: translateY(6px); } }
.pb__map { grid-column: 2; grid-row: 1 / span 2; width: 66px; height: 53px; }
.pb__map-pallet { fill: rgb(255 255 255 / 6%); stroke: rgb(255 255 255 / 35%); stroke-width: 1; }
.pb__map-box { fill: var(--c-accent); opacity: .9; animation: pbPop .35s ease both; }
.pb__scene { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.pb__floor { stroke: rgb(255 255 255 / 28%); stroke-width: 2; }
.pb.is-rolling .pb__floor { stroke-dasharray: 8 6; animation: pbRoll .25s linear infinite; }
@keyframes pbRoll { to { stroke-dashoffset: -14; } }
.pb__wood { fill: #c99556; }
.pb__foot { fill: #9c6b34; }
.pb__pallet { transition: transform 1.1s cubic-bezier(.6, 0, .3, 1); }
.pb__box { transition: transform .5s cubic-bezier(.55, 0, .8, .2); }
.pb__box rect:first-child { fill: #3b2aa3; stroke: rgb(255 255 255 / 55%); stroke-width: .8; }
.pb__box--alt rect:first-child { fill: #4b3ac0; }
.pb__tape { fill: var(--c-accent); opacity: .9; }
.pb__film { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 2s cubic-bezier(.45, 0, .2, 1); }
.pb.is-wrapping .pb__film { filter: drop-shadow(0 0 6px rgb(200 230 255 / 50%)); }
.pb__rail { fill: rgb(255 255 255 / 28%); }
.pb__head { fill: var(--c-accent); }
[data-pb-head] { transform: translateX(160px); transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
.pb__arm { fill: rgb(255 255 255 / 55%); transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform .5s cubic-bezier(.55, 0, .8, .2); }
.pb__status { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: 8px;
  font: 500 .78rem/1 var(--mono); color: rgb(255 255 255 / 78%); }
.pb__bar { width: 38%; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 15%); overflow: hidden; }
.pb__bar i { display: block; height: 100%; background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform .45s ease; }
.pb__caption { margin-top: 10px; text-align: center; font-size: .78rem; color: rgb(255 255 255 / 58%); }

@media (prefers-reduced-motion: reduce) { .pb { animation: none !important; } }