/* Glow backdrop: the Lobby's soft drifting color, behind the top of a page.
   Owner, 2026-10-19: Pricing and Affiliate heroes were "plain black"; picked a
   Glow behind the hero only. The values are option B of
   early-looks/signin-backgrounds.html, which copied the Lobby's AuroraSky
   (workspace-app lobby.css) unchanged: three blurred blobs in the visitor's
   accent, a little grain, 22-32s drifts.

   Markup, as the first child of a container with position: relative and
   isolation: isolate (the hero's page):
     <link rel="stylesheet" href="/css/glow-backdrop.css?cb=1">
     <div class="glow-backdrop" aria-hidden="true"><div class="glow-backdrop-sky"><i></i><i></i><i></i></div><div class="glow-backdrop-grain"></div></div>

   It covers the first 760px and fades out by a mask, so the plan cards and the
   long rules below sit on the plain page. Pure CSS: transforms only, so the
   blur is rasterized once and the drift runs on the compositor.

   Rejected: the drifting gallery here. It sells "what you can make", which is
   the sign-in and 404 pages' job; on Pricing it would fight the plan cards. */

.glow-backdrop {
  --glow-a1: var(--cat-accent);
  --glow-a2: color-mix(in srgb, var(--cat-accent) 55%, #ff5cf3);
  --glow-a3: color-mix(in srgb, var(--cat-accent) 55%, #7c5cff);
  --glow-strength: .8;
  --glow-blur: 48px;
  /* z-index -1 inside a parent with `isolation: isolate`: above the parent's own
     background, below every piece of content, with no rules on the siblings. */
  position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
          mask-image: linear-gradient(#000 50%, transparent);
}
body[data-theme-mode="light"] .glow-backdrop { --glow-strength: .32; --glow-blur: 60px; }

.glow-backdrop-sky { position: absolute; inset: -20%; filter: blur(var(--glow-blur)); opacity: var(--glow-strength); }
.glow-backdrop-sky i { position: absolute; border-radius: 50%; }
.glow-backdrop-sky i:nth-child(1) { top: 4%; left: 6%; width: 46%; height: 52%; background: radial-gradient(circle, color-mix(in srgb, var(--glow-a1) 78%, transparent), transparent 66%); animation: glow-backdrop-a 26s ease-in-out infinite; }
.glow-backdrop-sky i:nth-child(2) { bottom: 2%; right: 4%; width: 52%; height: 56%; background: radial-gradient(circle, color-mix(in srgb, var(--glow-a2) 68%, transparent), transparent 66%); animation: glow-backdrop-b 32s ease-in-out infinite; }
.glow-backdrop-sky i:nth-child(3) { top: 26%; left: 38%; width: 44%; height: 46%; background: radial-gradient(circle, color-mix(in srgb, var(--glow-a3) 62%, transparent), transparent 68%); animation: glow-backdrop-c 22s ease-in-out infinite; }
@keyframes glow-backdrop-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 7%, 0) scale(1.12); } }
@keyframes glow-backdrop-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-11%, -6%, 0) scale(.92); } }
@keyframes glow-backdrop-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(.95); } 50% { transform: translate3d(6%, -9%, 0) scale(1.15); } }

.glow-backdrop-grain {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-size: 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}

/* Motion: Less. Same as the gallery backdrop: the drift slows to a quarter. */
:where(:root[data-motion='less']) .glow-backdrop-sky i:nth-child(1) { animation-duration: 104s; }
:where(:root[data-motion='less']) .glow-backdrop-sky i:nth-child(2) { animation-duration: 128s; }
:where(:root[data-motion='less']) .glow-backdrop-sky i:nth-child(3) { animation-duration: 88s; }
/* Lite effects (slow devices): the same glow, held still. */
:where(:root[data-ws-fx='lite']) .glow-backdrop-sky i { animation: none; }