.tcan {
  --tcan-w: 72px;
  --tcan-rise: 120px;
  --tcan-shadow: 0 8px 18px rgba(28, 27, 24, .3);
}
.tcan-body {
  position: relative;
  isolation: isolate;
  width: var(--tcan-w);
  height: calc(var(--tcan-w) * 86 / 72);
  margin-inline: auto;
}
.tcan-back, .tcan-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.tcan-back { z-index: 0; }
.tcan-fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tcan-front { z-index: 2; filter: drop-shadow(var(--tcan-shadow)); }

.tcan.hot :is(.tcan-back, .tcan-front) { transform: scale(1.18) translateY(-3px); }
.tcan.eat :is(.tcan-back, .tcan-front) { transform: scale(1.14) translateY(-4px); }
.tcan.shut :is(.tcan-back, .tcan-front) {
  animation: tcan-shake .38s cubic-bezier(.3, 1.2, .5, 1) forwards;
}

.tcan-lid {
  transform-origin: 12.6px 28px;
  transition: transform .22s cubic-bezier(.34, 1.5, .64, 1);
}
.tcan.hot .tcan-lid { transform: rotate(-34deg); }
.tcan.eat .tcan-lid { animation: tcan-open .34s linear forwards; }
.tcan.shut .tcan-lid { animation: tcan-shut .38s linear forwards; }
@keyframes tcan-open {
  0%   { transform: rotate(0); }
  42%  { transform: rotate(-177deg); }
  60%  { transform: rotate(-146deg); }
  76%  { transform: rotate(-164deg); }
  88%  { transform: rotate(-151deg); }
  100% { transform: rotate(-155deg); }
}
@keyframes tcan-shut {
  0%   { transform: rotate(-155deg); }
  46%  { transform: rotate(9deg); }
  62%  { transform: rotate(-7deg); }
  76%  { transform: rotate(4deg); }
  88%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
@keyframes tcan-shake {
  0%   { transform: scale(1.14) translateY(-4px); }
  40%  { transform: scale(1.05) scaleY(.93) translateY(5px); }
  62%  { transform: scale(1.01) scaleY(1.03) translateY(-2px); }
  82%  { transform: scale(1) scaleY(.99) translateY(1px); }
  100% { transform: none; }
}

.tcan-carrier { position: absolute; transform-origin: 0 0; pointer-events: none; }
.tcan-flying {
  animation-name: tcan-fly !important;
  animation-duration: .58s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
  animation-direction: normal !important;
  pointer-events: none;
}
.tcan-flying.tcan-out { animation-direction: reverse !important; }
@keyframes tcan-fly {
  0% {
    transform: translate(0, 0) scale(1, 1) rotate(0);
  }
  20% {
    transform: translate(calc(var(--gone-x, 0px) * .14),
                         calc(var(--gone-y, 0px) * .12 - var(--tcan-rise) * .8))
               scale(calc(1 - (1 - var(--gone-sx, .06)) * .3), .9)
               rotate(-3deg);
  }
  44% {
    transform: translate(calc(var(--gone-x, 0px) * .62),
                         calc(var(--gone-y, 0px) * .5 - var(--tcan-rise) * .967))
               scale(calc(1 - (1 - var(--gone-sx, .06)) * .62), .74)
               rotate(-1deg);
  }
  66% {
    transform: translate(var(--gone-x, 0), calc(var(--gone-y, 0px) - var(--tcan-rise)))
               scale(var(--gone-sx, .06), .58) rotate(0);
  }
  78% {
    transform: translate(var(--gone-x, 0), calc(var(--gone-y, 0px) - var(--tcan-rise) * .8))
               scale(var(--gone-sx, .06), .5) rotate(0);
  }
  88% {
    transform: translate(var(--gone-x, 0), calc(var(--gone-y, 0px) - var(--tcan-rise) * .4))
               scale(var(--gone-sx, .06), .38) rotate(0);
  }
  96% {
    transform: translate(var(--gone-x, 0), calc(var(--gone-y, 0px) - var(--tcan-rise) * .033))
               scale(var(--gone-sx, .06), .2) rotate(0);
  }
  100% {
    transform: translate(var(--gone-x, 0), calc(var(--gone-y, 0px) + 16px))
               scale(var(--gone-sx, .06), .02) rotate(0);
  }
}

[data-motion="calm"] .tcan :is(.tcan-back, .tcan-front, .tcan-lid) {
  animation: none;
  transition: none;
}