/* ============================================================
   Flashi motion — shared stage primitives
   Pairs with widget.css (design tokens, fonts, .uf-* surfaces).
   A scene mounts one .stage (1920x1080) that fit-scales to the
   viewport for clean MP4 capture.
   ============================================================ */

html,body{ margin:0; height:100%; background:#000; overflow:hidden; }
body{
  font-family:"Sons",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;
  color:#fff;
}

.stage-wrap{ position:fixed; inset:0; display:grid; place-items:center; background:#000; }

.stage{
  position:relative;
  width:1920px; height:1080px;
  transform-origin:center center;
  overflow:hidden;
  /* deep-space backdrop with a faint central lift for depth */
  background:
    radial-gradient(90% 70% at 50% 38%, #0d0d10 0%, #060607 46%, #000 78%);
  isolation:isolate;
}

/* cinematic vignette on top of everything (never intercepts pointer) */
.stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:radial-gradient(125% 115% at 50% 44%, transparent 52%, rgba(0,0,0,.62) 100%);
}

/* ---------- floating panels ----------
   No CSS filters anywhere (filter:blur/drop-shadow forces costly GPU
   re-rasterization and crashed fragile drivers). Depth = opacity + the
   inner dialog's own box-shadow. */
.panel{
  position:absolute;
}
.panel.is-bg{ opacity:.5; }
.panel .uf-dialog{ margin:0; animation:none; }

/* soft white aura — a radial-gradient is already soft, so NO blur filter */
.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(255,255,255,.09), rgba(255,255,255,0) 70%);
}
.glow.is-strong{ background:radial-gradient(closest-side, rgba(255,255,255,.15), rgba(255,255,255,0) 70%); }

/* ---------- token coins (streams) ---------- */
.coin{
  position:absolute; top:0; left:0; width:26px; height:26px; border-radius:50%;
  will-change:transform,opacity; pointer-events:none; z-index:40;
}
.coin img{ width:100%; height:100%; display:block; border-radius:50%; }

/* ---------- faux cursor ---------- */
.cursor{
  position:absolute; top:0; left:0; width:26px; height:26px; z-index:50;
  pointer-events:none; will-change:transform; transform:translate(-2px,-2px);
}
.cursor svg{ width:100%; height:100%; display:block; }
.cursor-ripple{
  position:absolute; z-index:49; pointer-events:none;
  border:2px solid rgba(255,255,255,.85); border-radius:50%;
  transform:translate(-50%,-50%); width:8px; height:8px; opacity:.9;
}
@keyframes fl-ripple{ to{ width:54px; height:54px; opacity:0; } }
.cursor-ripple.is-go{ animation:fl-ripple .6s cubic-bezier(.22,1,.36,1) forwards; }

/* ---------- generic helpers ---------- */
.center-abs{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
@keyframes fl-spin{ to{ transform:rotate(1turn); } }
@keyframes fl-pulse-soft{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }