/* Crate artwork (SVG from js/components/crate.js) */

.crate-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* SVG text: sizes are in SVG user units */
.crate-label__brand {
  font: 800 0.5px var(--display);
  letter-spacing: 0.09px;
}
.crate-label__title {
  font: 900 1.05px var(--display);
  letter-spacing: -0.02px;
}
.crate-label__meta {
  font: 800 0.44px var(--display);
  letter-spacing: 0.04px;
}
.crate-label__grade-cap {
  font: 800 0.44px var(--display);
  letter-spacing: 0.08px;
}
.crate-label__grade {
  font: 900 2.3px var(--display);
}
.crate-stencil {
  font: 900 1.25px var(--display);
  letter-spacing: 0.22px;
}
.case-plate {
  font: 800 0.34px var(--display);
  letter-spacing: 0.08px;
}

/* the grade "?" breathes while sealed */
.crate-label__grade {
  animation: grade-pulse 2.8s ease-in-out infinite;
}
@keyframes grade-pulse {
  50% {
    opacity: 0.45;
  }
}

/* rattle when someone tries to open it */
.sealed-crate .crate-body {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}
.sealed-crate.is-rattling .crate-body {
  animation: rattle 0.62s var(--ease-out);
}
@keyframes rattle {
  15% { transform: rotate(-3deg) translateY(-2%); }
  35% { transform: rotate(2.5deg) translateY(-3%); }
  55% { transform: rotate(-1.6deg) translateY(-1%); }
  75% { transform: rotate(0.8deg); }
}

/* cubes dropping into a case */
.case-cubes .cube {
  transform-box: fill-box;
}
.cube.is-new {
  animation: cube-in 0.5s var(--ease-spring) both;
  animation-delay: var(--d);
}
.cube.is-leaving {
  animation: cube-out 0.4s ease-in both;
  animation-delay: var(--d);
}
@keyframes cube-in {
  from {
    transform: translateY(-2.4px);
    opacity: 0;
  }
}
@keyframes cube-out {
  to {
    transform: translateY(-2.8px);
    opacity: 0;
  }
}