/* =========================================================
   Crate + hanging rig
   SVG is generated by js/crate.js; slots reserve space up
   front (aspect-ratio) so nothing shifts when it renders.
   ========================================================= */

.crate-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 230;
}
.crate-slot--lg { max-width: 420px; margin-inline: auto; }
.crate-slot--md { max-width: 330px; margin-inline: auto; }
.crate-svg, .rig-svg-el { width: 100%; height: auto; overflow: visible; }

/* ---------- Layers entering / leaving ---------- */
.slab { transform-box: fill-box; transform-origin: center; }
.slab-in { animation: slab-in .5s var(--ease-spring) both; animation-delay: var(--d, 0ms); }
.slab-out { animation: slab-out .45s var(--ease) both; }
@keyframes slab-in {
  from { opacity: 0; transform: translateY(-46px) scaleX(.9); }
}
@keyframes slab-out {
  to { opacity: 0; transform: translate(10px, 40px) rotate(8deg); }
}

/* ---------- Sealed details ---------- */
.seal-q { animation: q-breathe 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes q-breathe {
  50% { opacity: .55; transform: scale(.94); }
}

/* Rattle (feedback when someone tries to open it) */
.is-rattling { animation: rattle .6s var(--ease); }
@keyframes rattle {
  15% { transform: rotate(-3deg) translateY(-2px); }
  30% { transform: rotate(2.5deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(1.4deg); }
  80% { transform: rotate(-.6deg); }
}

/* ---------- Hanging rig (hook + line + Crate) ---------- */
.rig {
  position: relative;
  width: 100%;
  transform: rotate(var(--swing, 0rad));
  transform-origin: 60% -110%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.rig.is-dragging { cursor: grabbing; }
.rig-svg { aspect-ratio: 260 / 400; }

.rig-tag {
  position: absolute;
  left: 2%;
  bottom: -5%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffd3c2;
  background: #0d0b14e6;
  border: 1px solid #ff6a3d4d;
  box-shadow: 0 12px 30px -12px #000;
  transform: rotate(-4deg);
}
.rig-tag .dot { background: var(--coral); box-shadow: 0 0 10px var(--coral); animation: blink 1.6s steps(2, jump-none) infinite; }
[data-state="open"] .rig-tag { display: none; }