/* The Field — the entrance device, and now every page that leads into it.
 *
 * Two unmarked poles hold a dipole; filings drift along its lines and the
 * polarity reverses every ~20 seconds. static/js/field.js draws it; this file
 * places it and controls how much of it the copy is allowed to sit on.
 *
 * WHY THIS FILE EXISTS (27 August 2026). The device was drawn only on the
 * entrance, so a participant met it once and then typed their class code on a
 * bare indigo page, and an educator never saw it at all. The owner asked for
 * it on the join step and the educator sign-in too. Those two pages needed the
 * same three rules the entrance already had inline — and three private copies
 * of one device is how the drift in this fleet has always started, so the
 * rules moved here and the entrance now links this file instead of repeating
 * it.
 *
 * THE POLES CARRY NO LABELS AND MUST NEVER GAIN ANY. Part A of the instrument
 * is self-rated, and an entrance that names a pole primes the answers it is
 * about to collect (LS-002; field.js's own header carries the same warning,
 * and tests/test_home_page.py greps the served source for every pole name in
 * both languages). This file is served too, so the rule covers these comments.
 *
 * Motion: field.js honours prefers-reduced-motion by rendering ONE settled
 * frame with both poles at equal strength, and stops the loop when the tab is
 * hidden. Nothing here overrides that.
 */

/* The canvas host. Absolutely positioned so nothing the drift does can move
   the copy or the form on top of it. */
#field-stage { position: absolute; inset: 0; z-index: 0; }

.field-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

/* ── the entrance: copy on the left, field open on the right ───────────────
   An angled wash that clears the copy column and lets the poles live in the
   space beside it. */
.field-veil--edge {
  background: linear-gradient(97deg,
    #10142e 0%, rgba(16,20,46,.95) 34%, rgba(16,20,46,.77) 52%,
    rgba(16,20,46,.26) 74%, rgba(16,20,46,.06) 100%);
}

/* ── the pages that hold a card: join, and the educator sign-in ────────────
   These centre a narrow card instead of ranging copy down one side, so the
   clear area has to be a disc in the middle rather than a band at one edge —
   the same reasoning as CG's .cg-veil and, like it, a radial has no left or
   right and therefore mirrors under dir="rtl" unchanged.

   Denser THAN THE ENTRANCE'S over the card, and lighter than it everywhere
   else. The first version of this rule laid a full-page wash under the
   radial as well; it protected the card beautifully and flattened the poles
   out of existence, which is the one thing the page was added for. field.js
   puts the poles right of centre on a wide screen and low on a narrow one —
   so the disc clears the card and the field stays legible exactly where the
   poles are. Check that with the eye, not the alpha values: a veil that
   reads as "calm" in a diff can read as "empty" on screen. */
.field-veil--centre {
  background: radial-gradient(ellipse 46% 52% at 50% 50%,
    #10142e 0%, rgba(16,20,46,.96) 40%,
    rgba(16,20,46,.70) 66%, rgba(16,20,46,.18) 100%);
}

@media (max-width: 720px) {
  /* A phone is not a narrow desktop: the copy runs the full width, so the
     entrance's clear area becomes a band across the page rather than a column
     down one side. */
  .field-veil--edge {
    background: linear-gradient(184deg,
      #10142e 0%, rgba(16,20,46,.96) 40%, rgba(16,20,46,.74) 62%,
      rgba(16,20,46,.19) 100%);
  }
  /* Same on the card pages: wider and shallower, so the card keeps its calm
     ground and the poles are pushed to the top and bottom edges. */
  /* Narrow screens move the poles into the LOWER half (field.js), so the
     clear band runs across the middle and the field is left visible below
     the card rather than beside it. */
  .field-veil--centre {
    background: radial-gradient(ellipse 96% 44% at 50% 42%,
      #10142e 0%, rgba(16,20,46,.96) 46%,
      rgba(16,20,46,.72) 74%, rgba(16,20,46,.2) 100%);
  }
}