/* A labelled interaction illustration, separate from native software captures. */
.site-layout .showcase-trash-preview {
  --trash-travel-x: 120px;
  --trash-travel-y: 145px;
  display: grid;
  grid-template-rows: minmax(0,1fr) 44px 24px;
  justify-items: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-width: 0;
  color: #c2c5ca;
}
.site-layout .trash-preview-svg { display: block; width: 100%; height: 100%; max-height: 318px; overflow: visible; }
.site-layout .trash-preview-play {
  min-height: 44px;
  padding: 8px 17px;
  border: 1px solid #67646a;
  border-radius: 5px;
  background: #29292e;
  color: #f5efec;
  font-size: 14px;
  line-height: 1.65;
}
.site-layout .trash-preview-play:hover { background: #3a2d31; border-color: #956269; transform: none; filter: none; box-shadow: none; }
.site-layout .trash-preview-play:disabled { cursor: default; color: #b9bbc1; background: #24252a; border-color: #48494e; }
.site-layout .trash-preview-status { margin: 0; min-height: 24px; color: #b7bbc3; font-size: 12px; line-height: 1.8; text-align: center; }
.site-layout .trash-preview-clip-motion,
.site-layout .trash-preview-target-motion,
.site-layout .trash-preview-body,
.site-layout .trash-preview-lid { transform-box: fill-box; transform-origin: center; }
.site-layout .trash-preview-lid { transform-origin: 15% 75%; }
.site-layout .playing .trash-preview-clip-motion { animation: trash-clip-travel 600ms cubic-bezier(.3,.08,.24,1) both; }
.site-layout .playing .trash-preview-target-motion { animation: trash-target-ready 600ms ease both; }
.site-layout .playing .trash-preview-lid { animation: trash-lid-open 180ms cubic-bezier(.2,.65,.3,1) both; }
.site-layout .swallowed .trash-preview-lid { animation: trash-lid-close 90ms cubic-bezier(.72,0,1,.55) both; }
.site-layout .swallowed .trash-preview-body { animation: trash-body-gulp 280ms ease-out both; }
.site-layout .swallowed .trash-preview-target-motion { animation: trash-target-exit 390ms ease both; }

@keyframes trash-clip-travel {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  70% { transform: translate(var(--trash-travel-x),var(--trash-travel-y)) scale(.95); opacity: 1; }
  100% { transform: translate(var(--trash-travel-x),var(--trash-travel-y)) scale(.12); opacity: 0; }
}
@keyframes trash-target-ready {
  0%,45% { transform: scale(1); filter: none; }
  76%,100% { transform: scale(1.14); filter: drop-shadow(0 0 10px #ef414655); }
}
@keyframes trash-lid-open {
  from { transform: rotate(0) translateY(0); }
  to { transform: rotate(-38deg) translateY(-3px); }
}
@keyframes trash-lid-close {
  0% { transform: rotate(-38deg) translateY(-3px); }
  80% { transform: rotate(0) translateY(1.5px); }
  100% { transform: rotate(0) translateY(0); }
}
@keyframes trash-body-gulp {
  0%,25% { transform: scale(1); }
  49% { transform: scale(1.18,1.05); }
  75% { transform: scale(.97,1.02); }
  100% { transform: scale(1); }
}
@keyframes trash-target-exit {
  0%,50% { transform: scale(1.14); opacity: 1; filter: drop-shadow(0 0 10px #ef414655); }
  70% { transform: scale(1.04); opacity: 1; filter: none; }
  100% { transform: scale(.7); opacity: 0; filter: none; }
}

@media (max-width: 760px) {
  .site-layout .showcase-trash-preview { grid-template-rows: minmax(0,1fr) 44px 24px; gap: 2px; }
  .site-layout .trash-preview-svg { max-height: 260px; }
  .site-layout .trash-preview-play { min-height: 44px; font-size: 14px; }
  .site-layout .trash-preview-status { min-height: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-layout .showcase-trash-preview * { animation: none !important; transition: none !important; }
  .site-layout .playing .trash-preview-clip-motion { opacity: 0; }
  .site-layout .playing .trash-preview-target-motion { filter: drop-shadow(0 0 8px #ef414633); }
  .site-layout .playing .trash-preview-lid { transform: rotate(-38deg) translateY(-3px); }
  .site-layout .swallowed .trash-preview-lid { transform: none; }
  .site-layout .swallowed .trash-preview-target-motion { opacity: 0; filter: none; }
}