/* DigiDonate v3 — standalone form pages layer ("sxf-"). Linked after sx.css on register-charity.html and
   find-your-cause-form.html (pages with inline styles; dd-pages.css is not loaded there).
   Builds on the engine hooks (.sx-in, .sx-loop/.sx-run); it never observes anything itself and writes no text.

   1. Backdrop   a fixed, aria-hidden layer behind the form card: soft lilac auras drifting slowly and three thin orbit
                 rings (one dotted) turning very slowly around the card's upper half, with two small motes riding them.
                 It is position: fixed and clipped to the viewport, so it never changes layout or scroll width.
   2. Card       the engine already rises the card and cascades its fields; on top of that a soft lilac shadow blooms
                 under the card and a single light passes along its top edge once it is in.

   Base rules = the complete still frame (reduced motion, no JS, print). Hidden starting states and all motion
   live under html.sx-on inside (prefers-reduced-motion: no-preference); transitions sit on the .sx-in state only.
   Only transform and opacity animate. Never touches the form fields, labels, validation, consent or ABN Verify. */

/* ================= 1. Backdrop ================= */
.sxf-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sxf-au { position: absolute; display: block; border-radius: 50%; }
.sxf-au.is-a { width: 760px; height: 760px; left: 50%; top: -260px; margin-left: -380px;
  background: radial-gradient(closest-side, rgba(174,138,234,.26), rgba(174,138,234,.09) 55%, rgba(174,138,234,0)); }
.sxf-au.is-b { width: 620px; height: 620px; left: -240px; top: 38%;
  background: radial-gradient(closest-side, rgba(223,208,247,.85), rgba(223,208,247,0)); }
.sxf-au.is-c { width: 680px; height: 680px; right: -260px; bottom: -280px;
  background: radial-gradient(closest-side, rgba(174,138,234,.22), rgba(174,138,234,0)); }
.sxf-orbits { position: absolute; left: 50%; top: 340px; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; overflow: visible; }
.sxf-o { transform-box: view-box; transform-origin: 0 0; }
.sxf-o circle { fill: none; stroke: rgba(142,91,230,.2); stroke-width: 1.2; }
.sxf-o.is-2 circle { stroke: rgba(142,91,230,.34); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .1 12; }
.sxf-o.is-3 circle { stroke: rgba(142,91,230,.12); }
.sxf-o .sxf-m { fill: #FFFFFF; stroke: #AE8AEA; stroke-width: 2; stroke-dasharray: none; }
.sxf-o .sxf-mh { fill: rgba(174,138,234,.28); stroke: none; }
@media (max-width: 720px) {
  .sxf-orbits { top: 250px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; }
  .sxf-au.is-a { width: 520px; height: 520px; margin-left: -260px; top: -200px; }
  .sxf-au.is-b, .sxf-au.is-c { width: 440px; height: 440px; }
}

/* ================= 2. Card ================= */
.dd-card { position: relative; }
.dd-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 46px 90px -52px rgba(78,27,165,.5), 0 18px 40px -30px rgba(108,43,217,.28); }
.dd-card::after { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(174,138,234,0), #AE8AEA 50%, rgba(174,138,234,0)); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* pre-JS cover like the engine's card cover (with the same CSS failsafe if sx.js never runs) */
  html.dd-js:not(.sx-on):not(.sx-off) .sxf-o { opacity: 0; animation: sx-failsafe .8s ease 2.6s forwards; }

  html.sx-on .sxf-o { animation: sxf-in 2.4s var(--sx-ease) both, sxf-spin var(--sxf-t, 140s) linear infinite; }
  html.sx-on .sxf-o.is-1 { --sxf-t: 120s; animation-delay: .15s, 0s; }
  html.sx-on .sxf-o.is-2 { --sxf-t: 170s; animation-direction: normal, reverse; animation-delay: .3s, 0s; }
  html.sx-on .sxf-o.is-3 { --sxf-t: 220s; animation-delay: .45s, 0s; }
  html.sx-on .sxf-au.is-a { animation: sxf-drift-a 22s var(--sx-loop) infinite alternate; }
  html.sx-on .sxf-au.is-b { animation: sxf-drift-b 26s var(--sx-loop) infinite alternate; }
  html.sx-on .sxf-au.is-c { animation: sxf-drift-c 30s var(--sx-loop) infinite alternate; }

  /* card: the shadow blooms and one light passes along the top edge, after the engine's rise */
  html.sx-on .dd-card.sx-r:not(.sx-in)::before { opacity: 0; transform: translate3d(0, -26px, 0) scale(.96); }
  html.sx-on .dd-card.sx-r.sx-in::before { transition: opacity 1.4s ease .35s, transform 1.6s var(--sx-ease) .35s; }
  html.sx-on .dd-card.sx-r.sx-in::after { animation: sxf-edge 1.7s cubic-bezier(.45,0,.25,1) .7s both; }
}
@keyframes sxf-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sxf-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes sxf-drift-a { from { transform: translate3d(-40px, 0, 0); } to { transform: translate3d(50px, 30px, 0); } }
@keyframes sxf-drift-b { from { transform: translate3d(0, -30px, 0); } to { transform: translate3d(60px, 40px, 0); } }
@keyframes sxf-drift-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-70px, -40px, 0); } }
@keyframes sxf-edge { 0% { opacity: 0; transform: translate3d(-30%, 0, 0) scaleX(.4); } 30% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(30%, 0, 0) scaleX(.4); } }