.viewport-shatter-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: visible;
  pointer-events: none;
}

.viewport-shatter-piece {
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  animation: viewport-shatter-flight var(--fly-duration) cubic-bezier(.12,.7,.18,1) var(--fly-delay) forwards !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter;
}

.viewport-shatter-impact {
  position: fixed;
  z-index: 3;
  width: .82rem;
  height: .82rem;
  border: 1px solid rgba(184,154,90,.62);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.18);
  box-shadow: 0 0 0 0 rgba(184,154,90,.24);
  animation: viewport-shatter-impact 460ms cubic-bezier(.2,.72,.2,1) forwards;
}

@keyframes viewport-shatter-flight {
  0% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  22% {
    opacity: 1;
    filter: brightness(1.035);
  }
  46% {
    opacity: .88;
    filter: brightness(1.01);
  }
  66% {
    opacity: .6;
    filter: brightness(.985);
  }
  82% {
    opacity: .28;
    filter: brightness(.955);
  }
  93% {
    opacity: .07;
    filter: brightness(.93);
  }
  100% {
    transform: translate3d(var(--fly-x), var(--fly-y), 0) rotate(var(--fly-rotate)) scale(var(--fly-scale));
    opacity: 0;
    filter: brightness(.9);
  }
}

@keyframes viewport-shatter-impact {
  0% {
    transform: translate(-50%, -50%) scale(.18);
    opacity: .78;
    box-shadow: 0 0 0 0 rgba(184,154,90,.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(8.5);
    opacity: 0;
    box-shadow: 0 0 0 1.25rem rgba(184,154,90,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewport-shatter-layer { display: none !important; }
}