/* Анимация «в корзину»: картина в крафтовой бумаге с восковой печатью летит в круг корзины
   (js/cart-fly.js). Размер и позицию .cart-fly задаёт скрипт; ниже — вид бумаги, клапанов
   и печати, а также приземление на корзине. */

.cart-fly {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.cart-fly__pack {
  position: absolute;
  inset: 0;
  perspective: 1500px; /* дальняя перспектива: клапаны в движении не так сильно «трапециятся» */
  perspective-origin: 50% 50%;
}

/* лист крафта позади картины: на 3% шире со всех сторон — он и рамка вокруг картины,
   и подложка, которая закрывает пустоты у краёв, пока клапаны ещё складываются */
.cart-fly__sheet {
  position: absolute;
  left: -3%;
  top: -3%;
  width: 106%;
  height: 106%;
  background-color: #c4a07a;
  background-image: var(--kraft);
  background-size: 640px 640px;
  box-shadow: 0 8px 16px rgba(30, 16, 4, 0.35);
  opacity: 0;
}

/* холст живой бумаги (WebGL, js/cart-paper-gl.js): больше картины — под раскрытый лист-крест */
.cart-fly__paper {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cart-fly__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

/* клапаны: бумага вылезает за края картины на 3%, шарнир — внешний край;
   до анимации стоят ребром к экрану (невидимы), js складывает их на картину */
.cart-fly__flap {
  position: absolute;
  background-color: #c4a07a;
  background-image: var(--kraft);
  background-size: 640px 640px; /* 1:1, без повторов: самый большой клапан меньше листа */
  will-change: transform, filter;
  transform: rotateY(90deg);
  box-shadow: 0 3px 8px rgba(40, 22, 6, 0.4);
}

/* лёгкая подсветка и складки поверх текстуры */
.cart-fly__flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 244, 220, 0.2), rgba(255, 244, 220, 0) 38%, rgba(60, 32, 8, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(70, 40, 12, 0.28);
}

.cart-fly__flap--l,
.cart-fly__flap--r {
  top: -3%;
  width: 57%;
  height: 106%;
}
.cart-fly__flap--l {
  left: -3%;
  transform-origin: 0 50%;
}
.cart-fly__flap--r {
  right: -3%;
  transform-origin: 100% 50%;
}

/* верх и низ — «конвертные» клапаны с треугольным краем к центру; клип-путь режет и
   тень, поэтому тень для них даёт drop-shadow на самом клапане */
.cart-fly__flap--t,
.cart-fly__flap--b {
  left: -3%;
  width: 106%;
  height: 58%;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(40, 22, 6, 0.35));
}
.cart-fly__flap--t {
  top: -3%;
  transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.cart-fly__flap--b {
  bottom: -3%;
  transform-origin: 50% 100%;
  clip-path: polygon(0 38%, 50% 0, 100% 38%, 100% 100%, 0 100%);
}

/* восковая печать по центру свёртка (картинка прозрачная, сидит на бумаге с тенью) */
.cart-fly__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.9);
  filter: drop-shadow(0 2px 3px rgba(30, 16, 4, 0.5));
}

/* приземление: круг корзины вздрагивает, от него расходится кольцо (js/cart.js ставит .is-catch) */
.navbar__cart.is-catch {
  animation: navbar-cart-catch 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.navbar__cart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  pointer-events: none;
}
.navbar__cart.is-catch::before {
  animation: navbar-cart-ring 0.7s ease-out;
}
@keyframes navbar-cart-catch {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.22) rotate(-10deg); }
  55% { transform: scale(0.94) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes navbar-cart-ring {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* убирание из корзины: из кнопки корзины под картиной выскакивает крошечный свёрток из крафта с печатью */
.cart-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9500;
  width: 18px;
  height: 24px;
  border-radius: 2px;
  background: #c4a07a url("../images/craft_paper_web.jpg") center / 90px 90px;
  box-shadow: 0 2px 5px rgba(30, 16, 4, 0.4), inset 0 0 0 1px rgba(70, 40, 12, 0.3);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.cart-chip__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9a86a, #8a5a2c 70%);
  box-shadow: 0 1px 2px rgba(30, 16, 4, 0.5);
}