/* Вырезка фона при добавлении вещей (задача cutout, MOTION-SPEC #14): пока у новой вещи режется фон,
   по низу её плитки бежит полоска 4 px (item-grid.js ставит .k-tile__cut, пока cutout.js режет).
   Когда вырезка готова, фон фото тает поверх неё (revealCut). «Менше руху»: полоска стоит, без бега.
   Подключается после styles.css; сырые значения только в tokens. */

@layer tokens {
  :root {
    --cut-bar-h: 4px;            /* высота полоски (lab #14) */
    --cut-bar-inset: 10px;       /* отступ полоски от краёв плитки */
    --cut-bar-bottom: 8px;
    --cut-bar-r: 2px;
    --cut-track: rgb(255 253 251 / .75);
    --cut-sweep-w: 45%;          /* ширина бегущего блика */
  }
}

@layer components {
  .k-tile__cut {
    position: absolute;
    left: var(--cut-bar-inset);
    right: var(--cut-bar-inset);
    bottom: var(--cut-bar-bottom);
    height: var(--cut-bar-h);
    border-radius: var(--cut-bar-r);
    background: var(--cut-track);
    overflow: hidden;
    pointer-events: none;
  }
  .k-tile__cut::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--cut-sweep-w);
    background: linear-gradient(90deg, transparent, var(--acc) 50%, transparent);
    translate: -100% 0;
    animation: cut-sweep var(--dur-shimmer) linear infinite;
  }
  /* блик шириной 45% полоски проходит её целиком: 100% / 45% = 222% собственной ширины */
  @keyframes cut-sweep { to { translate: 222% 0; } }
  :root[data-motion="reduce"] .k-tile__cut { background: var(--acc-soft); }
  :root[data-motion="reduce"] .k-tile__cut::after { content: none; }
  @media (prefers-reduced-motion: reduce) {
    .k-tile__cut { background: var(--acc-soft); }
    .k-tile__cut::after { content: none; }
  }
}