.case-playground {
  position: relative;
  isolation: isolate;
}

.case-actions [hidden],
.case-switch [hidden] {
  display: none !important;
}

.case-playground::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, #4bdcf52e 48%, transparent 70%);
  background-size: 220% 100%;
  opacity: .55;
  animation: case-sheen 7s ease-in-out infinite;
}

.case-preview-link > * {
  transition: opacity .32s ease, transform .52s cubic-bezier(.2, .8, .2, 1);
}

.case-preview-link.is-changing > *:not(.case-open-hint) {
  animation: case-enter .52s cubic-bezier(.2, .8, .2, 1);
}

@keyframes case-enter {
  from { opacity: .2; transform: scale(1.018) translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes case-sheen {
  0%, 55% { background-position: 120% 0; }
  85%, 100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-playground::after { animation: none; opacity: .18; }
  .case-preview-link.is-changing > *:not(.case-open-hint) { animation: none; }
  .case-preview-link > * { transition: none; }
}