/* ═══════════════════════════════════════════════════════════════════════════
   عقاريل — motion (see effects.js). Ported from كراده 52.
   No colour, font or shape of its own: the theme stays tokens.css's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The signal field sits behind the app; the app's own ground is made clear so
   it shows through the gaps. The body carries the same colour underneath. */
.fx-field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: none;
}
html.fx-field-on .fx-field,
html.fx-gate .fx-field { display: block; }

/* The sign-in screen: its own ground cleared so the field and the mark show
   behind the form (the body underneath is the same colour). The form arrives
   the way SignalIQ's callouts do. */
html.fx-gate [data-fx="gate"] { background: transparent !important; }
html.fx-gate [data-fx="gate"] > * { animation: fx-callout .5s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes fx-callout {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
html.fx-field-on #root { position: relative; z-index: 1; }
html.fx-field-on #root > div { background: transparent !important; }

/* Cards rise into place. */
.fx-rise {
  animation: fx-rise .52s cubic-bezier(.2, .7, .2, 1) var(--fx-delay, 0ms) both;
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-field { display: none; }
  .fx-rise, html.fx-gate [data-fx="gate"] > * { animation: none; }
}

/* The public marketplace follows the visitor's device and is usually LIGHT.
   A gold-on-navy field behind a white page would read as a rendering fault,
   so the motion layer stays in the office app where the ground is dark. */
html.market-theme .fx-field { display: none !important; }
html.market-theme #root > div { background: initial; }

/*
 * كراده 52’s sign-in was a single centred form on bare ground, so clearing
 * #gate was enough for the field to show. Aqaril’s is a full two-column
 * layout, and each column paints its own opaque #031323 over the canvas — the
 * field was running and painting the whole time, completely hidden.
 *
 * Only the two COLUMNS are cleared. The form card inside keeps its own ground:
 * glyphs drifting under input labels would cost legibility for decoration, and
 * the sign-in form is the one thing on this screen that has to stay readable.
 */
html.fx-gate [data-fx="gate"] > div > div { background-color: transparent !important; }