/* Hands-on motion. Runtime code glows are driven by motion-controller.js so
   restarts cannot be cut short by stale timers or DOM class replacement. */
.sandbox-code-action,
.live-code-token {
  display: inline;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  will-change: color, text-shadow, background-color, filter;
}

/* Fallback classes are intentionally long enough to remain readable if the
   Web Animations API is unavailable. The normal path does not depend on them. */
.sandbox-code-action.is-code-pulsing {
  animation: sandboxCodePulse 2.2s cubic-bezier(.16, .8, .24, 1) both;
}
.live-code-token.is-changing {
  animation: sandboxLiveValuePulse 2.3s cubic-bezier(.16, .8, .24, 1) both;
}

@keyframes sandboxCodePulse {
  0% {
    color: #f4fdff;
    background: rgba(25, 217, 255, .15);
    text-shadow:
      0 0 4px rgba(232, 253, 255, .99),
      0 0 12px rgba(92, 225, 255, .96),
      0 0 26px rgba(25, 167, 255, .72),
      0 0 42px rgba(25, 167, 255, .36);
    filter: brightness(1.34);
  }
  68% {
    color: #73d9ff;
    background: rgba(25, 217, 255, .045);
    text-shadow:
      0 0 3px rgba(232, 253, 255, .38),
      0 0 9px rgba(92, 225, 255, .34),
      0 0 18px rgba(25, 167, 255, .2),
      0 0 30px rgba(25, 167, 255, .08);
    filter: brightness(1.09);
  }
  100% {
    color: inherit;
    background: transparent;
    text-shadow: none;
    filter: brightness(1);
  }
}

@keyframes sandboxLiveValuePulse {
  0% {
    color: #f4fdff;
    text-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 14px rgba(25,217,255,.96),
      0 0 30px rgba(25,167,255,.68),
      0 0 44px rgba(25,167,255,.34);
    filter: brightness(1.34);
  }
  68% {
    color: #73d9ff;
    text-shadow:
      0 0 3px rgba(255,255,255,.4),
      0 0 9px rgba(25,217,255,.34),
      0 0 20px rgba(25,167,255,.18),
      0 0 32px rgba(25,167,255,.07);
    filter: brightness(1.09);
  }
  100% {
    color: var(--token-base);
    text-shadow: none;
    filter: brightness(1);
  }
}

.lab-fly-object {
  position: fixed;
  z-index: 10000;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #19d9ff;
  background: color-mix(in srgb, var(--wb-input) 94%, #06212a);
  color: var(--wb-text);
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
  font: 700 12px/1 var(--wb-mono);
  pointer-events: none;
  will-change: transform, opacity;
}
.sandbox-motion-packet { display: none; }
.sandbox-transfer-route > div { height: 2px; opacity: .7; }

/* Reduced-motion preference removes travel, not the instructional code cue.
   motion-controller.js changes moving objects to a destination cross-fade while
   keeping the code glow visible long enough to read. */
@media (prefers-reduced-motion: reduce) {
  .lab-fly-object { box-shadow: none; }
}