/* Uses the original instrument artwork when WebGL is unavailable. */
.ap-core-fallback { display: none; }

html:not([data-core-webgl="true"]) .ap-core-stage[data-core-fallback="true"] > img {
  display: none;
}

html:not([data-core-webgl="true"]) .ap-core-stage[data-core-fallback="true"] .ap-core-fallback:not([hidden]) {
  display: block;
}

.ap-core-fallback,
.ap-core-fallback__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ap-core-fallback__scene {
  transform-origin: 50% 60%;
  animation-duration: 3.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.ap-core-fallback__scene[data-fallback-pulse="a"] { animation-name: ap-core-fallback-float-a; }
.ap-core-fallback__scene[data-fallback-pulse="b"] { animation-name: ap-core-fallback-float-b; }

.ap-core-fallback__frame {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.22,.68,.2,1);
}

.ap-core-fallback__frame[data-active="true"] {
  z-index: 1;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* A short, quiet lift accompanies each selection; the artwork then rests. */
@keyframes ap-core-fallback-float-a {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-6px) rotate(.45deg); }
}
@keyframes ap-core-fallback-float-b {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-6px) rotate(-.45deg); }
}

.ap-core-stage[data-core-fallback-motion="off"] .ap-core-fallback__scene {
  animation: none;
}
.ap-core-stage[data-core-fallback-motion="off"] .ap-core-fallback__frame {
  transition: none;
}

@media (max-width: 44rem) {
  .ap-core-fallback {
    inline-size: 140%;
    max-inline-size: none;
    inset-inline-start: -20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-core-fallback__scene { animation: none !important; }
  .ap-core-fallback__frame { transition: none; transform: none; }
}
