/* Arbiter motion stage. Sizes in container units so the same lockup fits a card or a 1920 x 1080 frame. */
.amx-stage { position: relative; overflow: hidden; container-type: size; background: #050B16; isolation: isolate; }
.amx-stage.amx-clear, .amx-stage.amx-clear .amx-bg { background: transparent; }
.amx-stage.amx-clear .amx-fog, .amx-stage.amx-clear .amx-grain { display: none; }
.amx-bg { position: absolute; inset: 0; background:
  radial-gradient(55% 65% at 50% 40%, #0A1830 0%, #050C1A 50%, #02050B 100%); }
.amx-badge::before { content: ""; position: absolute; inset: -18% -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70,120,200,.28), rgba(40,80,150,.10) 55%, transparent); opacity: var(--rim, 1); }
.amx-stage.amx-clear .amx-badge::before { display: none; }
.amx-fog { position: absolute; inset: -10%; pointer-events: none; }
.amx-fog i { position: absolute; display: block; border-radius: 50%; filter: blur(6cqh); opacity: 0; }
.amx-fog i:nth-child(1) { width: 70cqw; height: 40cqh; left: 0; top: 40%; background: radial-gradient(closest-side, rgba(110,150,210,.16), transparent); }
.amx-fog i:nth-child(2) { width: 60cqw; height: 36cqh; right: 0; top: 18%; background: radial-gradient(closest-side, rgba(150,180,230,.12), transparent); }
.amx-grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.amx-flash { position: absolute; inset: 0; background: #F4F8FF; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.amx-lockup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.2cqh; }
.amx-badge { height: 52cqh; aspect-ratio: 1024 / 1324; position: relative; isolation: isolate; }
.amx-badge svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.amx-word { --sheen: -30%; position: relative; font: 600 7.2cqh/1 "Sora", "Avenir Next", system-ui, sans-serif; letter-spacing: .34em; margin-right: -.34em; color: #FEFAF1; white-space: nowrap; }
.amx-word::after { content: attr(data-text); position: absolute; inset: 0; color: #FFFFFF; text-shadow: 0 0 .4em rgba(190,215,255,.9);
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--sheen) - 14%), #000 var(--sheen), transparent calc(var(--sheen) + 14%));
          mask-image: linear-gradient(100deg, transparent calc(var(--sheen) - 14%), #000 var(--sheen), transparent calc(var(--sheen) + 14%)); }
.amx-l { display: inline-block; }
.amx-tag { font: 500 1.9cqh/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .42em; color: #9FB3CF; text-transform: uppercase; margin-top: -1.4cqh; }
.amx-beacon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.amx-beacon i { position: absolute; display: block; left: 0; top: 0; opacity: 0; }
.amx-beacon .core { width: 16cqh; height: 16cqh; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, rgba(255,246,220,.85) 10%, rgba(160,195,255,.22) 40%, transparent 100%); }
.amx-beacon .streak { width: 90cqw; height: 1.1cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(160,195,255,.35) 45%, transparent); }
.amx-beacon .halo { width: 60cqh; height: 60cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,165,240,.18), transparent); }
/* White page: the art keeps its colours; everything drawn on the page itself turns navy. */
.amx-stage.amx-light .amx-bg { background: #FFFFFF; }
.amx-stage.amx-light.amx-clear .amx-bg { background: transparent; }
.amx-stage.amx-light .amx-fog, .amx-stage.amx-light .amx-grain, .amx-stage.amx-light .amx-badge::before, .amx-stage.amx-light .amx-flash { display: none; }
.amx-stage.amx-light .amx-word { color: #0E2544; }
.amx-stage.amx-light .amx-word::after { color: #5B7FB8; text-shadow: none; }
.amx-stage.amx-light .amx-tag { color: #56667F; }
.amx-stage.amx-light .amx-beacon .core { background: radial-gradient(closest-side, #0E2544 0%, #0E2544 14%, rgba(14,37,68,.35) 36%, transparent 100%); }
.amx-stage.amx-light .amx-beacon .streak { background: radial-gradient(closest-side, rgba(14,37,68,.85), rgba(14,37,68,.2) 45%, transparent); }
.amx-stage.amx-light .amx-beacon .halo { background: radial-gradient(closest-side, rgba(14,37,68,.1), transparent); }