/* Overlay for departing copies: above list and filter bar, under the nav bar (nav is 8). This
   matters at the very start of Flight: the card's full-size clone starts out at the card's own
   position before it shrinks and climbs, and that position can be as low as the card's CTA —
   below this, it briefly painted over the nav bar instead of being covered by it. */
.fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fx > * { position: absolute; }
.list > .card { will-change: transform; }

/* BF. container transform + impact */
.morph { overflow: hidden; background: #fff; will-change: left, top, width, height; }
.morph > .card { position: absolute; left: 0; top: 0; margin: 0; filter: none; }
.morph-label {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  font-weight: 800; font-size: 13px; letter-spacing: 0.2px; color: var(--jade-700); white-space: nowrap;
}

/* Wrap and toss: gate-folded parcel */
.parcel { perspective: 640px; filter: drop-shadow(0 6px 10px rgba(30, 40, 60, 0.16)); will-change: transform; }
.parcel > * { position: absolute; top: 0; }
.parcel .card { margin: 0; filter: none; }
.flap { transform-style: preserve-3d; }
.flap > * { position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-shade { inset: 0; background: #1d2433; opacity: 0; pointer-events: none; }
.flap-back, .paper-sheet {
  background: linear-gradient(180deg, #fdfdfb, #f3f3ef); border: 1px solid #e2e2dc; border-radius: 3px;
  box-sizing: border-box;
}
.flap-back { inset: 0; transform: rotateY(180deg); overflow: hidden; }
.paper-sheet {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #e2e2dc calc(50% - 1px), #e2e2dc calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, #fdfdfb, #f3f3ef);
}
.parcel-label {
  translate: -50% -50%; transform-origin: 50% 50%; padding: 4px 9px; border-radius: 5px;
  background: var(--jade-700); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); z-index: 3;
}
.parcel-label.ready { background: var(--blue-500); }
.impact-ring {
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 2.5px solid var(--jade-700); pointer-events: none;
}
.impact-ring.ready { border-color: var(--blue-500); }

/* Wrap and toss: the PREPARING stamp */
.stamp {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 5; pointer-events: none;
  font-size: 26px; font-weight: 900; letter-spacing: 3px; color: var(--jade-700); white-space: nowrap;
  padding: 6px 14px; border: 3.5px solid var(--jade-700); border-radius: 8px;
  outline: 1.5px solid var(--jade-700); outline-offset: 3px; mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-mask-size: cover; mask-size: cover;
}
/* Prep drop: vessel layers and steam */
.vessel { pointer-events: none; will-change: transform; }
.vessel svg { display: block; overflow: visible; }
.vessel-part { position: absolute; inset: 0; transform-origin: 50% 70%; }
.steam { pointer-events: none; }

.ink-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; z-index: 5; pointer-events: none; }
.ink-ring {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 220px; height: 90px; border-radius: 50%;
  z-index: 4; pointer-events: none; border: 2px solid var(--jade-700);
}