/* 02 What's in my bag?: the bag (toolkit.js, bag-3d.js), the skills that fly out of it, the tools ticker */

.ch-bag { --bag-y: 50vh; background: radial-gradient(110% 80% at 50% 72%, #f3e9dc 0%, var(--sand) 70%); }
.bag-head { position: absolute; top: 11vh; left: 0; right: 0; text-align: center; z-index: 4; pointer-events: none; }
.bag-head .title { font-size: clamp(48px, 7.5vw, 120px); margin-top: 14px; color: var(--ink); }
.bag-head .title em { color: var(--mauve); }
.bag-hint { display: flex; justify-content: center; gap: 12px; margin-top: 16px; font: 500 13px/1 var(--sans); color: var(--ink-soft); }
.bag-count { color: var(--mauve); font-variant-numeric: tabular-nums; }
.hint-done, .hint-next { display: none; }
.hint-next { color: var(--mauve); font-weight: 600; }   /* (on small screens, in place of .bag-next) */
.ch-bag[data-part="done"] .hint-start { display: none; }
.ch-bag[data-part="done"] .hint-done { display: inline; }

/* ---------------------------------------------------------------- the bag */
.bag {
  position: absolute; left: 50%; top: 63%; width: min(30vw, 46vh); aspect-ratio: 1; z-index: 2;
  transform: translate(-50%, -50%) translateY(70vh) rotate(-8deg); transition: transform 1.1s var(--ease);
}
.ch-bag.is-active .bag { transform: translate(-50%, -50%); }
.bag img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; filter: drop-shadow(0 34px 30px rgba(90, 50, 40, .22)); }
/* in 3D: its canvas reaches past the box, so it can turn and its shadow can spread; the picture
   underneath shows until the model has loaded */
.bag .bag-3d {
  position: absolute; left: -30%; top: -25%; width: 160%; height: 150%; display: block;
  cursor: grab; touch-action: pan-y; outline: none; transform-origin: 50% 74%;
  animation: bag-in .5s ease both;
}
.bag .bag-3d.is-dragging { cursor: grabbing; }
.bag .bag-3d:focus-visible { outline: 2px solid var(--mauve); outline-offset: -24%; border-radius: 24px; }
.bag.is-3d img { opacity: 0; transition: opacity .4s ease; }
/* a little squeeze as things come out */
.bag.is-popping img, .bag.is-popping .bag-3d { animation: squash .6s var(--ease); }
@keyframes bag-in { from { opacity: 0; } }
@keyframes squash {
  0% { transform: none; }
  22% { transform: scale(1.06, .9); }
  52% { transform: scale(.97, 1.05); }
  100% { transform: none; }
}

/* ---------------------------------------------------------------- the skills */
/* each one flies from inside the bag to its place: the item moves across (x), its body moves up or down
   (y) and turns, and a hop in between lifts it out over the rim. Its place (--x, --y) and the rest are
   set by toolkit.js. */
.items { position: absolute; inset: 0; }
.item {
  --sx: var(--x); --sy: var(--y); --hop: var(--hop-d, -18vh);
  position: absolute; left: var(--sx); top: var(--sy); width: min(12vw, 180px); z-index: 1;
  transform: translateX(calc(50vw - var(--sx) - 50%));
  transition: transform .9s cubic-bezier(.3, .6, .3, 1) var(--d, 0s), z-index 0s linear calc(var(--d, 0s) + .6s);
}
.item.is-out {
  transform: none; z-index: 3;
  transition: transform .9s cubic-bezier(.3, .6, .3, 1) var(--d, 0s), z-index 0s linear calc(var(--d, 0s) + .2s);
}
.item.is-out .item-hop { animation: hop .9s var(--d, 0s) both; }
@keyframes hop {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  42% { transform: translateY(var(--hop, -18vh)); animation-timing-function: cubic-bezier(.5, 0, .7, .5); }
  100% { transform: none; }
}
.item-body {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 100%;
  text-align: center; cursor: default; opacity: 0;
  transform: translateY(calc(var(--bag-y) - var(--sy))) scale(.3) rotate(var(--r0, 0deg));
  transition: transform .9s cubic-bezier(.3, .7, .35, 1) var(--d, 0s), opacity .2s ease calc(var(--d, 0s) + .6s);
}
.item.is-out .item-body {
  transform: none; opacity: 1;
  transition: transform .9s cubic-bezier(.3, .7, .35, 1) var(--d, 0s), opacity .25s ease var(--d, 0s);
}
.item-body:focus-visible { outline: 2px solid var(--mauve); outline-offset: 6px; border-radius: 14px; }
.item-pic { display: block; width: 100%; aspect-ratio: 1; transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease); }
.item-pic img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 14px 14px rgba(90, 50, 40, .16)); }
.item:hover .item-pic { transform: translateY(-6px) rotate(calc(var(--r, 0deg) - 4deg)) scale(1.05); }
.item-name { display: block; font: 600 14px/1.25 var(--sans); color: var(--ink); margin-top: 4px; }
.item-tools { display: block; font: 400 12px/1.35 var(--sans); color: var(--ink-soft); margin-top: 3px; }
/* on hover: how she uses it */
.item-proof {
  position: absolute; left: 50%; top: 100%; width: 230px; margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--cream); box-shadow: 0 14px 34px rgba(31, 36, 51, .16); font: 400 13px/1.45 var(--sans); color: var(--ink);
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 5;
}
.item.is-out:hover .item-proof, .item.is-out:focus-within .item-proof { opacity: 1; transform: translate(-50%, 0); }
.item.is-low .item-proof { top: auto; bottom: 100%; margin: 0 0 10px; }

/* once everything's out: on to the next section (under the bag, above the ticker) */
.bag-next { position: absolute; left: 50%; top: min(calc(63% + min(15vw, 23vh) + 10px), calc(100% - 96px)); z-index: 4;
  transform: translate(-50%, 8px); white-space: nowrap;
  font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mauve);
  opacity: 0; transition: opacity .5s ease, transform .6s var(--ease); pointer-events: none; }
.bag-next::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: currentColor;
  transform-origin: top; animation: hint-line 1.8s var(--ease) infinite; }
.ch-bag[data-part="done"] .bag-next { opacity: 1; transform: translate(-50%, 0); transition-delay: .9s; }

/* ---------------------------------------------------------------- the tools, like a news ticker */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 4; display: flex; align-items: center;
  background: var(--ink); color: var(--cream); overflow: hidden; }
.ticker-label { flex: none; height: 100%; display: flex; align-items: center; padding: 0 18px 0 22px; z-index: 1;
  background: var(--mauve); font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }   /* (its length is set to suit) */
.ticker-track > div { display: flex; }
.ticker-track span { display: flex; align-items: center; font: 500 13px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.ticker-track span::after { content: "✦"; margin: 0 26px; font-size: 9px; color: var(--gold); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 900px) {
  .ch-bag { --bag-y: 70vh; }
  .bag-head { padding: 0 16px; }
  .bag-head .title { font-size: 46px; }
  .bag-hint { flex-direction: column; align-items: center; gap: 6px; }
  .bag-next { display: none; }
  .ch-bag[data-part="done"] .hint-next { display: inline; }
  .bag { width: min(48vw, 30vh); top: 80%; }
  .item { --sx: var(--mx); --sy: var(--my); --hop: -7vh; width: 22vw; }   /* a grid of four across */
  .item-name { font-size: 11px; }
  .item-tools, .item-proof { display: none; }
}
@media (hover: none) {
  .hint-done { display: none !important; }   /* (there's no hovering) */
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; }
  .ticker-track > div + div { display: none; }
}