/* The Aurora CAD iframe stack. One iframe per design, stacked, cross-faded.
 *
 * The rule that costs the most time if broken: hidden frames MUST keep a full-size box. Aurora's
 * viewer is WebGL — initialised in a collapsed frame it measures a 0x0 canvas and hangs on
 * "Coming right up" forever, with no recovery. So hide with opacity only, never display:none,
 * visibility:hidden or a zero-size box. That includes responsive rules: a
 * @media(max-width:900px){.visual{display:none}} silently breaks every iframe underneath it.
 */
#auroraStack { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
#auroraStack.on { opacity: 1; }

#auroraStack iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
#auroraStack iframe.live { opacity: 1; pointer-events: auto; z-index: 2; }

/* A small pill instead of a full-screen spinner: the numbers have already updated, so the shopper
 * is not blocked — only the 3D is catching up. */
#stackBusy {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  display: none; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: .8rem; backdrop-filter: blur(4px);
}
#stackBusy.on { display: flex; }
#stackBusy .sp {
  width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }