/* Sign-up art for /beta and /beta/start (Nathan 11-07: "more visual ... same animation styles as the main website").
   Same motion language as the home hero: masked-edge art, a pulsing orange glow on the centre tile, the real Ipsion Y laid
   over it (generated art garbles logos), dots riding the strands, result pills popping in. Motion waits for class
   fx-on (fun.js, after load + idle). Art: /alpha/media/signup-hero-m.webp, 976x650; every % below is % of that picture. */
.vx-art { position: relative; margin: 0; pointer-events: none; }
.vx-art img { display: block; width: 100%; height: auto; aspect-ratio: 976 / 650;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
    mask-composite: intersect; }
.vx-glow { position: absolute; left: 48.5%; top: 48.5%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 32%;
    background: radial-gradient(circle, rgba(254, 107, 53, 0.6), transparent 68%); mix-blend-mode: screen; opacity: 0.5; }
.fx-on .vx-glow { animation: vx-glow 4.5s ease-in-out infinite alternate; }
@keyframes vx-glow { from { opacity: 0.25; } to { opacity: 0.9; } }
.vx-logo { position: absolute; left: 48.5%; top: 48.3%; width: 8.2%; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 3px rgba(120, 30, 0, 0.55)); }
.vx-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.fx-on .vx-dots { display: block; }
/* One pill per box, next to the box its strand ends in (11-08). Each pill's animation-delay is inline in index.html,
   set by local_tools/beta_dots_1108.py to the moment its dot arrives. Font follows the art's width (cqw). */
.vx-art { container-type: inline-size; }
.vx-pill { position: absolute; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.85em 0.5em 0.5em; border-radius: 999px; white-space: nowrap;
    background: rgba(18, 18, 24, 0.86); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font: 600 clamp(0.62rem, 1.9cqw, 0.78rem)/1 Inter, system-ui, sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.vx-pill::before { content: "\2713"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #2FBF71; color: #fff; font-size: 0.85em; }
.vx-pill.p-mail { left: 15%; top: 30%; }
.vx-pill.p-megaphone { left: 96%; top: 29.5%; transform: translateX(-100%); }
.vx-pill.p-people { left: 96%; top: 54.8%; transform: translateX(-100%); }
.vx-pill.p-browser { left: 6%; top: 72%; }
.vx-pill.p-sparkle { left: 44.5%; top: 85%; }
.vx-pill.p-search { left: 94%; top: 89%; transform: translateX(-100%); }
.fx-on .vx-pill { opacity: 0; animation: vx-pop 0.45s ease-out forwards; }
@keyframes vx-pop { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .fx-on .vx-glow { animation: none; }
    .fx-on .vx-dots { display: none; }
    .fx-on .vx-pill { animation: none; opacity: 1; }
}