/* Play test aura: keep the store badge layout and existing application toggle. */
@property --play-aura-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

.studio-site .studio-store-badge.play-test-trigger {
  --play-aura-accent: #ff8546;
  --play-aura-soft: #ffbc87;
  --play-aura-shine: #fff3df;
  --play-aura-surface: #17191f;
  --play-aura-ring: conic-gradient(
    from var(--play-aura-angle),
    transparent 0% 62%,
    var(--play-aura-accent) 76%,
    var(--play-aura-shine) 82%,
    var(--play-aura-soft) 88%,
    transparent 100%
  );
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: transparent;
  background:
    linear-gradient(var(--play-aura-surface), var(--play-aura-surface)) padding-box,
    var(--play-aura-ring) border-box;
  box-shadow: inset 0 0 0 1px #ff854633, 0 0 14px #ff85461a;
  animation: play-test-aura-orbit 3s linear infinite;
  transition: box-shadow 240ms ease;
}

.studio-site .studio-store-badge.play-test-trigger::before,
.studio-site .studio-store-badge.play-test-trigger::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.studio-site .studio-store-badge.play-test-trigger::before {
  z-index: -2;
  inset: -4px;
  background: var(--play-aura-ring);
  filter: blur(12px);
  opacity: .55;
  transition: opacity 240ms ease;
}

.studio-site .studio-store-badge.play-test-trigger::after {
  z-index: -1;
  inset: 1px;
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 50% 130%, #ff85462b, transparent 70%),
    var(--play-aura-surface);
}

.studio-site .studio-store-badge.play-test-trigger:is(:hover, :focus-visible) {
  --play-aura-surface: #202026;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #ffbc8766, 0 0 22px #ff854633;
}

.studio-site .studio-store-badge.play-test-trigger:is(:hover, :focus-visible)::before {
  opacity: .9;
}

.studio-site .studio-store-badge.play-test-trigger:focus-visible {
  outline: 3px solid var(--play-aura-accent);
  outline-offset: 5px;
}

@keyframes play-test-aura-orbit {
  to { --play-aura-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-site .studio-store-badge.play-test-trigger {
    --play-aura-angle: 45deg;
    animation: none;
    transition: none;
  }

  .studio-site .studio-store-badge.play-test-trigger::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .studio-site .studio-store-badge.play-test-trigger {
    animation: none;
    border-color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }

  .studio-site .studio-store-badge.play-test-trigger::before,
  .studio-site .studio-store-badge.play-test-trigger::after {
    display: none;
  }

  .studio-site .studio-store-badge.play-test-trigger:focus-visible {
    outline-color: Highlight;
  }
}