/* Packed for you (10 Nov 2026). When something goes in the basket, a kraft box is packed on screen:
   the courses drop in, the flaps fold, twine is tied, a handwritten tag swings on, and the box flies
   into the basket. Tap anywhere to skip. Built only under .mo (motion.js), so reduced motion gets none. */

.pk { position: fixed; inset: 0; z-index: 90; contain: layout paint; display: grid; place-items: center; background: rgba(245, 242, 223, .96); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: pk-fade .22s ease-out both; }
.pk.is-going { animation: pk-out .32s ease-in forwards; }
.pk__skip { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font: 500 13px/1 var(--text); letter-spacing: .04em; color: var(--ink-2); opacity: 0; animation: pk-fade .3s ease-out .5s forwards; }
.pk__stage { position: relative; width: 300px; height: 330px; }

/* The box, seen from the front: back wall, what goes in, front wall, two flaps */
.pk__box { position: absolute; left: 34px; right: 34px; bottom: 40px; height: 150px; animation: pk-rise .34s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: 50% 100%; }
.pk__back { position: absolute; inset: 0; background: #b99a6b; }
.pk__front { position: absolute; left: -6px; right: -6px; bottom: 0; height: 104px; z-index: 3; display: grid; place-items: center; background: #cdb084 linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .06)); box-shadow: 0 22px 34px -22px rgba(70, 55, 25, .7); }
.pk__front::after { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(84, 70, 40, .28); pointer-events: none; }
.pk__stamp { display: block; width: 88px; aspect-ratio: 833 / 591; background: rgba(84, 70, 40, .62); -webkit-mask: url(/img/ybc-logo.png) center / contain no-repeat; mask: url(/img/ybc-logo.png) center / contain no-repeat; transform: rotate(-5deg); }

/* Flaps hinge on the top corners: open at the start, folded shut once the box is full */
.pk__flap { position: absolute; top: 16px; width: calc(50% + 6px); height: 14px; z-index: 4; background: #c3a476; }
.pk__flap--l { left: -6px; transform-origin: 0 50%; transform: rotate(-118deg); }
.pk__flap--r { right: -6px; transform-origin: 100% 50%; transform: rotate(118deg); background: #bd9d6e; }

/* What goes in: one tissue-wrapped parcel per course, named from the page */
.pk__items { position: absolute; left: 6px; right: 6px; bottom: 74px; height: 150px; z-index: 2; }
.pk__item { position: absolute; left: 50%; bottom: calc(var(--i) * 28px); width: min(96%, 210px); padding: 8px 10px; transform: translate(-50%, -260px) rotate(var(--r, 0deg)); opacity: 0;
  background: #fff; box-shadow: 0 8px 14px -10px rgba(60, 50, 30, .55); border-top: 3px solid var(--orange);
  font: 600 12.5px/1.15 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pk-drop .46s cubic-bezier(.3, 1.35, .5, 1) forwards; animation-delay: calc(.24s + var(--i) * .17s); }
.pk__item i { display: block; font: 500 15px/1 var(--script); text-transform: none; letter-spacing: 0; color: var(--orange); margin-bottom: 2px; }

/* Twine and the knot */
.pk__twine { position: absolute; left: 50%; top: 14px; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 5; background: var(--orange); transform: scaleY(0); transform-origin: 50% 0; }
.pk__knot { position: absolute; left: 50%; top: 2px; width: 30px; height: 30px; margin-left: -15px; z-index: 6; color: var(--orange); transform: scale(0) rotate(-90deg); }

/* The tag: swings on its string, then "made for you" is written in */
.pk__tag { position: absolute; right: -40px; top: 66px; z-index: 7; width: 176px; padding: 10px 12px 10px 20px; background: #fff; color: var(--ink); box-shadow: 0 12px 22px -14px rgba(60, 50, 30, .7);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); transform-origin: 0 50%; transform: rotate(-70deg) scale(.6); opacity: 0; }
.pk__tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--stone); }
.pk__script { display: block; font: 600 25px/1 var(--script); color: var(--orange); white-space: nowrap; clip-path: inset(0 100% 0 0); }
.pk__for { display: block; margin-top: 4px; font: 600 10.5px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stars when it lands in the basket, and the count gives a little hop */
.pk-burst { position: fixed; width: 0; height: 0; z-index: 91; pointer-events: none; }
.pk-burst .fd { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; color: var(--orange); animation: pk-star .7s cubic-bezier(.15, .8, .3, 1) forwards; }
.mo .ybc-basket-count.is-bump { animation: pk-bump .5s cubic-bezier(.2, 1.6, .4, 1); }

/* The full packing, first time in a visit */
.pk--full .pk__items { animation: pk-sink .26s cubic-bezier(.5, 0, .7, 1) .9s forwards; }
.pk--full .pk__flap--l { animation: pk-flap-l .3s cubic-bezier(.5, 0, .3, 1.3) 1.06s forwards; }
.pk--full .pk__flap--r { animation: pk-flap-r .3s cubic-bezier(.5, 0, .3, 1.3) 1.14s forwards; }
.pk--full .pk__twine { animation: pk-twine .2s ease-out 1.36s forwards; }
.pk--full .pk__knot { animation: pk-knot .38s cubic-bezier(.2, 1.6, .4, 1) 1.5s forwards; }
.pk--full .pk__tag { animation: pk-tag .5s cubic-bezier(.3, 1.5, .5, 1) 1.34s forwards; }
.pk--full .pk__script { animation: pk-write .42s steps(12, end) 1.58s forwards; }

/* The quick version, for every add after the first: the box is already packed and just hops in */
.pk--quick .pk__item { animation-duration: .3s; animation-delay: calc(.08s + var(--i) * .06s); }
.pk--quick .pk__items { animation: pk-sink .16s ease-in .3s forwards; }
.pk--quick .pk__flap--l { animation: pk-flap-l .18s ease-out .44s forwards; }
.pk--quick .pk__flap--r { animation: pk-flap-r .18s ease-out .48s forwards; }
.pk--quick .pk__twine { animation: pk-twine .1s ease-out .62s forwards; }
.pk--quick .pk__knot { animation: pk-knot .22s ease-out .66s forwards; }
.pk--quick .pk__tag, .pk--quick .pk__skip { display: none; }

@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-out { to { opacity: 0; } }
@keyframes pk-rise { from { opacity: 0; transform: translateY(40px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes pk-drop { 0% { opacity: 1; transform: translate(-50%, -260px) rotate(calc(var(--r, 0deg) * 3)); } 100% { opacity: 1; transform: translate(-50%, 0) rotate(var(--r, 0deg)); } }
@keyframes pk-sink { to { transform: translateY(66px); } }
@keyframes pk-flap-l { to { transform: rotate(0); } }
@keyframes pk-flap-r { to { transform: rotate(0); } }
@keyframes pk-twine { to { transform: scaleY(1); } }
@keyframes pk-knot { to { transform: scale(1) rotate(0); } }
@keyframes pk-tag { 0% { opacity: 1; transform: rotate(-70deg) scale(.6); } 60% { transform: rotate(10deg) scale(1); } 100% { opacity: 1; transform: rotate(4deg) scale(1); } }
@keyframes pk-write { to { clip-path: inset(0 0 0 0); } }
@keyframes pk-star { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); } }
@keyframes pk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Drawer: a line of twine fills toward free delivery, and a stamp lands when it is free */
.pk-meter { margin: 0 0 16px; }
.pk-meter[hidden] { display: none; }
.pk-meter__line { position: relative; height: 4px; background: rgba(84, 85, 69, .14); border-radius: 2px; overflow: visible; }
.pk-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--orange); border-radius: 2px; transition: width .6s cubic-bezier(.3, 1.2, .5, 1); }
.pk-meter__fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--sand); }
.pk-meter__words { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; font-size: 14.5px; line-height: 1.35; }
.pk-meter__words b { font-weight: 600; }
.pk-meter__stamp { flex: none; padding: 4px 8px 3px; border: 2px solid var(--orange); color: var(--orange); font: 700 11.5px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-6deg); }
.pk-meter__stamp[hidden] { display: none; }
.mo .pk-meter__stamp.is-new { animation: pk-stamp .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pk-stamp { 0% { opacity: 0; transform: rotate(-20deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pk-meter__fill { transition: none; } }

/* ── Handwriting and stamps, shared ── */
.mo .is-writing { animation: pk-write-from .55s steps(16, end) both; }
.mo .is-stamped { animation: pk-stamp .45s cubic-bezier(.2, 1.4, .4, 1) both; }

/* 3. Basket page: the parcel label */
.pk-label { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 10px; margin: 6px 0 22px; padding: 18px 16px 16px 26px; background: #fff; box-shadow: 0 14px 28px -22px rgba(60, 50, 30, .7); border-left: 6px solid #cdb084; }
.pk-label[hidden] { display: none; }
.pk-label::before { content: ""; position: absolute; left: 8px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--stone); }
.pk-label__k { grid-column: 1 / -1; margin: 0 0 4px; font: 600 11px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pk-label__tag { display: grid; gap: 6px; min-width: 0; }
.pk-label__tag p { display: grid; grid-template-columns: 3.6em 1fr; align-items: end; gap: 8px; margin: 0; }
.pk-label__tag span { font: 600 11px/1.9 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pk-label__tag b { display: block; min-height: 1.15em; border-bottom: 1.5px dotted var(--stone); font: 600 22px/1.1 var(--script); color: var(--ink); overflow-wrap: anywhere; }
.pk-label__tag b.pk-hand--small { font-size: 18px; line-height: 1.15; }
.pk-label__post { width: 74px; height: 74px; margin-top: 2px; border: 2px solid var(--orange); border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--orange); transform: rotate(-12deg); }
.pk-label__post[hidden] { display: none; }
.pk-label__post b { font: 800 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.pk-label__post i { font: 600 11.5px/1.2 var(--head); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.pk-label__post small { font: 600 9px/1.2 var(--head); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* 4. Thank-you page */
.pk-done { display: grid; place-items: center; margin: 0 auto 30px; }
.pk-done[hidden] { display: none; }
.pk-done__box { position: relative; width: 210px; height: 130px; display: grid; place-items: center; background: #cdb084 linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .06)); box-shadow: 0 22px 34px -22px rgba(70, 55, 25, .7); }
.pk-done__box::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; height: 14px; background: #c3a476; }
.pk-done__box::after { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(84, 70, 40, .28); }
.pk-done__twine { position: absolute; left: 50%; top: -12px; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--orange); transform-origin: 50% 0; z-index: 1; }
.pk-done__knot { position: absolute; left: 50%; top: -26px; width: 30px; height: 30px; margin-left: -15px; z-index: 2; }
.pk-done__seal { position: absolute; right: -34px; bottom: -16px; z-index: 3; display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%; background: var(--orange); color: #fff; text-align: center; font: 600 19px/1 var(--script); transform: rotate(-10deg); box-shadow: 0 10px 20px -10px rgba(110, 55, 0, .8); }
.pk-done__seal b { display: block; margin-top: 4px; font: 800 14px/1 var(--head); letter-spacing: .06em; }
.pk-next { list-style: none; max-width: 420px; margin: 34px auto 0; padding: 0; text-align: left; counter-reset: pk; }
.pk-next[hidden] { display: none; }
.pk-next li { position: relative; padding: 0 0 20px 46px; counter-increment: pk; }
.pk-next li::before { content: counter(pk); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border: 2px solid var(--orange); border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--head); color: var(--orange); background: #fff; z-index: 1; }
.pk-next li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: rgba(221, 123, 19, .35); transform-origin: 50% 0; }
.pk-next b { display: block; font: 600 17px/1.2 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.pk-next span { display: block; margin-top: 3px; font-size: 15.5px; color: var(--ink-2); }
.mo .pk-done__box { animation: pk-rise .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.mo .pk-done__twine { animation: pk-twine-in .25s ease-out .45s both; }
.mo .pk-done__knot { animation: pk-knot-in .4s cubic-bezier(.2, 1.6, .4, 1) .65s both; }
.mo .pk-done__seal { animation: pk-seal .5s cubic-bezier(.2, 1.4, .4, 1) .9s both; }
.mo .pk-next li { animation: pk-step .45s cubic-bezier(.2, 1, .4, 1) both; animation-delay: calc(1.35s + var(--i) * .28s); }
.mo .pk-next li::after { animation: pk-twine-in .3s ease-out both; animation-delay: calc(1.6s + var(--i) * .28s); }
@keyframes pk-twine-in { from { transform: scaleY(0); } }
@keyframes pk-knot-in { from { transform: scale(0) rotate(-90deg); } }
@keyframes pk-seal { from { opacity: 0; transform: rotate(-30deg) scale(2.2); } }
@keyframes pk-step { from { opacity: 0; transform: translateY(12px); } }

/* 5. Product page: the little stack of boxes */
.pk-stack { display: none; align-items: flex-end; gap: 12px; margin-top: 14px; height: 30px; }
.pk-stack.is-on { display: flex; }
.pk-stack__row { display: flex; align-items: flex-end; gap: 7px; }
.pk-stack__box { position: relative; display: block; width: 30px; height: 22px; background: #cdb084; box-shadow: 0 6px 8px -6px rgba(70, 55, 25, .7); }
.pk-stack__box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--orange); }
.pk-stack__box:nth-child(even) { transform: rotate(3deg); }
.pk-stack__box:nth-child(odd) { transform: rotate(-2deg); }
.pk-stack__box::after { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 4px; background: #c3a476; }
.pk-stack__n { font: 600 22px/1 var(--script); color: var(--orange); white-space: nowrap; }
.mo .pk-stack__box { animation: pk-box-in .38s cubic-bezier(.3, 1.5, .5, 1) both; }
.mo .pk-stack__box.is-off { animation: pk-box-off .25s ease-in forwards; }
@keyframes pk-box-in { from { opacity: 0; transform: translateY(-34px) rotate(-14deg); } }
@keyframes pk-box-off { to { opacity: 0; transform: translateY(-26px) rotate(12deg); } }

/* 6. Menu cards: the courses write in */
.mo .box__dishes.pk-w li { clip-path: inset(0 100% 0 0); }
.mo .box__dishes.pk-in li { animation: pk-write-from .5s steps(14, end) both; }
.mo .box__dishes.pk-in li:nth-child(2) { animation-delay: .16s; }
.mo .box__dishes.pk-in li:nth-child(3) { animation-delay: .32s; }
.mo .box__dishes.pk-in li:nth-child(4) { animation-delay: .48s; }
@keyframes pk-write-from { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }