/* ============================================================================
   loginLife.css — the login screen stops being inert.

   WHAT THIS ADDS: a clock and date, an hour-aware greeting, parcels drifting
   behind the card, a conveyor along the bottom, and the signing-in overlay.
   The spec is login-final.html on the Desktop (byte-identical to idea-login).

   WHAT THIS DOES NOT DO — and the reason it looks different from the spec.
   The standing rule for a screen already in use: the prototype specifies
   BEHAVIOUR, WORDING and LAYOUT; the live module specifies APPEARANCE. The
   prototype draws a dark translucent glass card with pale text. The live card
   is white, and it is white by explicit decision in two places:
       style.css   .login-card{ background:white; border-radius:28px; … }
       polish.css:464-468  .login-shell{ …!important } .login-card{ padding… }
   So the card, its gradient, its brand mark and its type are LEFT EXACTLY AS
   THEY ARE. Everything below is the surroundings only.

   NOT ONE DECLARATION HERE OVERRIDES AN EXISTING ONE. Every selector either
   names a .lgl-* element that did not exist before, or declares a property
   that no existing rule declares for that element. The single exception is
   documented at THE STACKING PROBLEM below — it adds `position` and `z-index`
   to .login-card, and nothing anywhere declares either of those for it.

   TOKENS ONLY. No raw ms, no raw cubic-bezier. Where a duration had no token
   the animation is driven from JS instead of inventing one — see the belt.

   NO NETWORK. Nothing here loads a font, an image or a background-image. The
   login screen renders before anyone is authenticated and must stay that way.
   ========================================================================== */

/* ── THE STACKING PROBLEM ───────────────────────────────────────────────────
   The drifting parcels have to sit BEHIND the card. .login-shell creates no
   stacking context, so a negative z-index on the canvas would drop it behind
   the shell's own background and vanish; and a positioned canvas at z-index 0
   paints ABOVE a static card, because positioned elements form a later layer
   than in-flow blocks. The card therefore has to be positioned too.

   This is the only rule here that names an existing class. It overrides
   nothing: no rule in style.css, polish.css, responsive.css or dark.css
   declares `position` or `z-index` on .login-card. It is scoped under #loginBox
   so it cannot reach a .login-card anywhere else. */
#loginBox .login-card{ position:relative; z-index:2; }

/* ============================================================================
   THE DARK CARD — the full prototype look
   ---------------------------------------------------------------------------
   THIS SECTION DELIBERATELY OVERRIDES EXISTING RULES. Everything else in this
   file was written to override nothing; this is the exception, chosen
   knowingly by Abdul on 24 Sep 2026 after being shown that it would.

   EVERY RULE IT BEATS, so the next person does not have to hunt:
       style.css   .login-card       background:white, border-radius:28px,
                                     padding:34px, width:min(430px,92vw),
                                     box-shadow
       style.css   .login-card input/button   (margin only — width kept)
       style.css   input,select,textarea      padding, border, radius, background
       style.css   button                     background, padding, radius, shadow
       style.css   input:focus                border-color, box-shadow
       style.css   .ghost                     background, color
       style.css   .error-text                color
       polish.css:413  #loginMsg:not(:empty)  background, color, padding,
                                              border-radius, margin-top
       polish.css:113  .login-card   border-radius:20px, box-shadow
       polish.css:465  .login-card   padding:36px 34px
       polish.css:466  .login-card h1  font-size, letter-spacing
       polish.css:114  .brand-mark   border-radius:16px
       polish.css:468  .brand-mark   box-shadow

   TWO THINGS ARE DELIBERATELY *NOT* OVERRIDDEN:
     1. polish.css:464 .login-shell{ background:… !important }. Beating an
        !important needs another !important, and the shell is ALREADY a dark
        blue gradient very close to the prototype's. Leaving it means the page
        background stays owned by the file that owns it today.
     2. responsive.css:190-196 forces font-size:16px !important on #loginBox
        input below 1180px — an iOS focus-zoom fix. NO font-size is set on any
        input here, so that keeps winning and phones do not zoom on focus.

   Specificity: #loginBox (an id) beats every class-only rule above without
   needing !important anywhere.
   ========================================================================== */
#loginBox .login-card{
  width:min(372px,92vw);
  background:rgba(10,24,38,.72);
  backdrop-filter:blur(14px);
  border:1px solid rgba(125,211,252,.18);
  border-radius:20px;
  padding:34px 30px 24px;
  box-shadow:0 30px 80px rgba(2,10,18,.5);
  color:#e7eef6;
}
/* The title, to the prototype's sizes (login-final.html:38-40):
       h1        margin:0 0 26px
       .big      40px / 900 / letter-spacing -.035em
       .small    11px / 700 / letter-spacing .34em / uppercase
   The earlier build had this at 21px because it was written against the
   24 Sep revision of the prototype, before the title was enlarged. */
#loginBox .login-card h1{
  color:#e7eef6;
  font-size:40px;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
  margin:0;
}
/* MANAGEMENT SYSTEM, under the title. text-transform does the capitals so the
   markup keeps readable words — the prototype does the same. */
#loginBox .lgl-sub{
  color:#7f9cb8;
  font-size:11px;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-align:center;
  margin:6px 0 26px;
}

/* ── the new mark ─────────────────────────────────────────────────────────
   The square blue tile is gone. .brand-mark becomes a plain 104px box holding
   the supplied SVG; the gradient, the fixed 68px size and the tile's shadow
   are all overridden, because the new mark IS the artwork rather than a letter
   sitting on a chip. Overrides style.css .brand-mark and polish.css:114/468 —
   part of the same knowingly-approved override set as the dark card. */
#loginBox .brand-mark{
  width:104px;
  height:104px;
  background:none;
  border-radius:0;
  box-shadow:none;
  display:block;
  font-size:0;                 /* kills any stray text node left in the tile */
}
#loginBox .lgl-mark{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
/* the cube inside the loader stage fills the slot rloader.css sized for it */
#loginBox .lgl-loader-mark{ width:100%; height:100%; display:block; }

/* fields. No font-size — see the iOS note above. */
#loginBox .login-card input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(125,211,252,.16);
  border-radius:11px;
  padding:11px 13px;
  color:#e7eef6;
  margin:0 0 10px;
}
/* The prototype's placeholder is #6e87a0, which measures 4.05:1 against the
   painted card — under the 4.5:1 AA floor. The placeholder IS the field's
   label here (there are no <label>s), so it has to be readable. #7e97af is
   the same hue lifted until it clears: 4.98:1. */
#loginBox .login-card input::placeholder{ color:#7e97af; }
#loginBox .login-card input:focus{
  border-color:#7dd3fc;
  box-shadow:0 0 0 3px rgba(125,211,252,.12);
}
/* Chrome paints its own opaque autofill background over a dark field, which is
   what made the live screenshot's inputs look pale blue. A long inset shadow
   is the only thing that reliably covers it. */
#loginBox .login-card input:-webkit-autofill,
#loginBox .login-card input:-webkit-autofill:hover,
#loginBox .login-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e7eef6;
  box-shadow:0 0 0 1000px #12283d inset;
  caret-color:#e7eef6;
}

/* the primary action */
#loginBox .login-card button{
  border-radius:11px;
  padding:12px;
  margin:4px 0 0;
  font-weight:800;
  box-shadow:none;
}
#loginBox .login-card button:hover{ transform:none; }
/* the passkey button is secondary, so it is an outline and stops competing */
#loginBox #loginPasswordlessBtn,
#loginBox .login-card button.ghost{
  background:transparent;
  border:1px solid rgba(125,211,252,.22);
  color:#bcd9ee;
  font-weight:700;
}
#loginBox #loginPasswordlessBtn:hover,
#loginBox .login-card button.ghost:hover{
  background:rgba(125,211,252,.08);
  border-color:rgba(125,211,252,.5);
}

/* the later steps carry their own headings and copy */
#loginBox .login-card h2{ color:#e7eef6; font-size:18px; }
#loginBox #loginTotpIntro,
#loginBox .login-card > div > p{ color:#9fc0da; }

/* an error has to stay legible on a dark card — #b91c1c is not */
#loginBox .error-text{ color:#fca5a5; }

/* THE MESSAGE BOX UNDER THE FORM. polish.css:413 gives #loginMsg a filled
   light-mode alert - background:#fee2e2 with #991b1b text - which was designed
   for the old white card. On the dark card it lands as a pale pink slab: the
   brightest thing on the screen, and the only part of the login that is not in
   the theme. Same idea, drawn for a dark surface instead: a red TINT of the
   card rather than a light fill, a hairline to give it an edge, and the same
   #fca5a5 the rest of the errors already use. Radius and padding match the
   buttons above it (11px / 12px) so it reads as part of the same stack.
   Specificity: #loginBox #loginMsg (2,1,0) beats polish's #loginMsg (1,1,0),
   so no !important is needed. */
#loginBox #loginMsg:not(:empty){
  background:rgba(248,113,113,.10);
  border:1px solid rgba(248,113,113,.26);
  color:#fca5a5;
  padding:11px 13px;
  border-radius:11px;
  margin-top:14px;
  font-size:13px;
  line-height:1.45;
  text-align:left;
}

/* The legal row: Privacy·Terms·DPA (the text is shortened in loginLife.js).

   THE INLINE opacity:.7 IS THE THING TO KNOW HERE. index.html sets
   margin/font-size/text-align/opacity inline on .login-legal. Inline beats a
   stylesheet, so that .7 stands, and it multiplies against everything in the
   row. Measured on the painted card:
       links  #9fc0da  7.92:1 declared -> 4.65:1 after the opacity  (passes)
       dots   #6e87a0  4.05:1 declared -> 2.71:1 after the opacity  (vanish)
   At 2.71 the separators read as blank gaps and the row looks like three
   floating words rather than Privacy·Terms·DPA. #93b0c8 brings the dots to
   4.03:1 effective - clearly visible, still a step quieter than the links so
   they stay separators rather than competing with them.
   Only colour is set here; the inline margin, size and opacity are left alone,
   and nothing else in the app declares colour on these.

   SPACING COMES FROM MARGINS, NOT FROM SPACES. login-final.html:58 is
       .legal a{ color:#6e87a0; text-decoration:none; margin:0 6px }
   so each link carries 6px either side and the dot sits in the gap. The first
   attempt here stripped the whitespace to "Privacy·Terms·DPA" with nothing
   around the dots, which read as one crushed word. The text stays tight (the
   JS still removes the stray whitespace); the 6px does the spacing, exactly as
   the prototype does it.

   NO UNDERLINE, also per the prototype — but restored on hover and on
   keyboard focus, because without either there is nothing but colour to say
   these are links, and colour alone is not an affordance. */
#loginBox .login-legal a{
  color:#9fc0da;
  text-decoration:none;
  margin:0 6px;
}
#loginBox .login-legal a:hover,
#loginBox .login-legal a:focus-visible{ text-decoration:underline; }
#loginBox .login-legal{ color:#93b0c8; }

/* ── the drifting parcels ─────────────────────────────────────────────────── */
.lgl-cv{
  position:fixed; inset:0;
  z-index:1;                 /* above the shell background, below the card */
  pointer-events:none;
}

/* The clock and date that used to sit bottom-left are GONE. The 25 Sep
   revision of login-final.html dropped them — its clock CSS section is an
   empty stub, there is no clock markup in its body and no date code in its
   script. Removed rather than hidden, along with the one-second interval that
   drove them. */

/* ── centring, as the prototype has it ────────────────────────────────────── */
/* login-final.html:30 sets text-align:center on the whole card and :32 centres
   the mark with margin:0 auto. Alignment is LAYOUT, which the prototype owns
   under the standing rule, so it comes across.

   DELIBERATELY NOT ON .login-card ITSELF. text-align is inherited and <input>
   inherits it in Chrome, so centring the card would centre the Email and
   Password placeholder text too - which the prototype does not do, because its
   fields are styled separately. Naming the three text elements keeps the
   fields exactly as they are.

   Overrides nothing: no rule in style.css, polish.css, responsive.css or
   dark.css declares text-align on .login-card, its h1 or its > p, and none
   declares margin on .brand-mark. Checked before writing this.

   The > p also catches #loginMsg, the error line. Centring that is correct -
   it sits under a centred form and the prototype centres everything. */
#loginBox .login-card h1,
#loginBox .login-card > p{ text-align:center; }
#loginBox .brand-mark{ margin-left:auto; margin-right:auto; }

/* ── the security subtitle, removed by request ────────────────────────────
   "Private ERP access. Approved device + Google Authenticator required."

   NOTE FOR WHOEVER READS THIS LATER: the original brief said to keep this
   line exactly as it was. Abdul asked for it gone on 24 Sep 2026, which
   supersedes that. It is hidden here rather than deleted from index.html for
   two reasons: that file is being edited by another session at the same time,
   and hiding keeps this whole build revertible by deleting two files.
   display:none takes it out of the accessibility tree too, so it is not
   read aloud either - it is gone, not merely invisible.

   It is the FIRST > p in the card. #loginMsg is also a > p and must keep
   working, so this is pinned by position rather than by element. */
#loginBox .login-card > p:first-of-type{ display:none; }

/* ── the greeting, inside the card above the copy ─────────────────────────── */
/* ── the password reveal ──────────────────────────────────────────────────
   The eye sits inside the field's right-hand end. The wrapper exists because
   style.css gives .login-card input width:100% — the eye cannot be a sibling
   in the flow without stealing that width or wrapping to its own line.
   position:relative on the wrapper, absolute on the button, so the eye adds no
   height and the field's own metrics are untouched. */
/* THE MARGIN LIVES ON THE WRAPPER, NOT THE INPUT. The field carries
   margin:0 0 10px. Left on the input, that 10px sits INSIDE the wrapper, so
   the wrapper is 50px tall against a 40px field and top:50% centres the eye
   against the wrong box — measured, the eye hung 2px below the field's bottom
   edge at every width. Moving the gap out to the wrapper makes wrapper height
   equal field height, so the eye centres on the field itself. */
.lgl-pw-wrap{ position:relative; display:block; margin:0 0 10px; }
#loginBox .lgl-pw-wrap input{ margin-bottom:0; }
/* THE BUTTON PAINTS NOTHING, EVER. This is the fix for the eye rendering as a
   visible dark rounded rectangle breaking out of the field on a phone.

   The geometry: responsive.css:111 gives every <button> min-height:44px below
   820px — the correct finger-size tap target. The password field is 42px. So
   on a phone the button is 2px TALLER than the field it sits in and provably
   breaks out, 1px above and 1px below (measured at 375px). Nothing can be
   centred inside a box smaller than itself.

   The previous phase left that rule alone, correctly — shrinking a thumb
   target to 34px to satisfy a pixel would be the wrong trade. The mistake was
   letting the button PAINT. A 44px box that breaks out of the field is
   invisible if it has no background, no radius, no border and no native
   chrome; it is a 44px hit area around an 18px icon, which is what it was
   meant to be all along.

   So every painted property moves off the button and onto .lgl-eye-chip
   inside it, which is 34px and always within the field. The button keeps the
   hit area. responsive.css:111 is NOT overridden — min-height is left exactly
   where it is.

   appearance:none matters and is not decoration. The computed value on this
   button was `auto`, which on iOS Safari lets a <button> keep its native
   control chrome — a grey-dark rounded rect — even with background:none. I
   cannot emulate iOS in this pane, so I am not claiming that was the box
   Hamza saw; but it is the most likely source of a dark rounded rectangle on
   a phone and it costs nothing to remove. -webkit-tap-highlight-color does
   the same job for the tap flash, which is dark and rounded by default on
   iOS and follows the element's border-radius. */
.lgl-eye{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  height:34px;
  width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* nothing below paints anything */
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  box-shadow:none;
  outline:none;
  color:#7e97af;
  cursor:pointer;
  transition:color var(--t-fast) var(--e-out);
}
/* the only thing that is ever painted, and it is always inside the field */
.lgl-eye-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  /* flex:none or the chip shrinks to the 18px icon and the hover wash becomes
     a narrow vertical bar rather than a square — measured 18x30 without it. */
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  transition:background var(--t-fast) var(--e-out);
  pointer-events:none;        /* the button owns the click, not the chip */
}
/* Beats .login-card button{width:100%; margin:8px 0}. The margin matters as
   much as the width: a stray 4px top margin was pushing the absolutely
   positioned eye 4px below the field's centre line — measured, not guessed.

   min-height is left alone ON PURPOSE. responsive.css:111 gives every button
   min-height:44px below 820px, which is the correct finger-size tap target.
   The eye is absolutely positioned with a transparent background, so a 44px
   hit area around an 18px icon costs nothing visually and is right for a
   thumb. Fighting that rule would shrink a touch target to 34px. */
/* border-radius:0 is here rather than only in .lgl-eye because this file's own
   #loginBox .login-card button rule sets 11px and out-specifies it. Harmless
   while the button paints nothing, but "nothing can paint a rounded box on the
   button" should not depend on remembering that. */
#loginBox .login-card .lgl-eye{ width:34px; margin:0; border-radius:0; }

/* ─── THE HOVER STATES ARE THE WHOLE BUG ──────────────────────────────────
   Two earlier attempts "fixed" this and it kept coming back, because every
   measurement was taken AT REST and the fault only exists on hover. Three
   rules cause it, and a plain .lgl-eye rule cannot beat any of them:

     polish.css:450  button:hover{ background:var(--rms-primary-d) }  #075985
     polish.css:47   button:hover{ transform:…; box-shadow:… }
     loginLife.css   #loginBox .login-card button:hover{ transform:none }

   SPECIFICITY IS THE POINT.
       .lgl-eye{background:none}           (0,1,0)
       button:hover{background:#075985}    (0,1,1)  -> WINS
   A rule with no pseudo-class can never hold a property against a rule that
   has one. background:none at rest was never in the fight, which is why the
   resting measurements were clean every single time.

   The drop was self-inflicted: my own #loginBox .login-card button:hover
   {transform:none} is (1,1,1) and beat .lgl-eye:hover{transform:translateY
   (-50%)} at (0,2,0). Losing the transform drops the 44px button by half its
   height — 22px — so it hangs below the field. That is the "sitting low".

   Restated here at (1,1,1)+pseudo, which out-specifies all three. :focus and
   :active are included because they paint the same way and a tap leaves them
   behind on a touchscreen. */
#loginBox .login-card .lgl-eye:hover,
#loginBox .login-card .lgl-eye:focus,
#loginBox .login-card .lgl-eye:focus-visible,
#loginBox .login-card .lgl-eye:active{
  background:none;
  box-shadow:none;
  border-radius:0;
  outline:none;
  transform:translateY(-50%);   /* the centring must survive every state */
}
/* style.css button:hover lifts by translateY(-1px), which would cancel the
   translateY(-50%) that centres the eye and drop it to the field's bottom
   edge on hover. Restate the centring transform so hover cannot move it. */
.lgl-eye:hover{ color:#cfe4f5; transform:translateY(-50%); }
/* The hover wash is on the CHIP, so it can never be the thing that breaks out
   of the field. It is also why :hover no longer paints the button itself:
   on a touchscreen :hover sticks after a tap until you touch something else,
   and a stuck wash on a 44px button would look exactly like a box appearing
   out of nowhere. On the 30px chip it stays inside the field either way. */
.lgl-eye:hover .lgl-eye-chip{ background:rgba(125,211,252,.10); }
/* Focus ring on the chip too, for the same reason — an outline on the 44px
   button would draw a rectangle outside the field on a phone. */
.lgl-eye:focus-visible .lgl-eye-chip{ outline:2px solid #7dd3fc; outline-offset:1px; }
/* the field needs room so the typed password never runs under the eye */
#loginBox .lgl-pw-wrap input{ padding-right:44px; }

/* ── the conveyor ─────────────────────────────────────────────────────────── */
.lgl-belt{
  position:fixed; left:0; right:0; bottom:0; height:64px; z-index:1;
  overflow:hidden; pointer-events:none;
}
.lgl-rail{
  position:absolute; left:0; right:0; bottom:16px; height:9px;
  background:repeating-linear-gradient(90deg,
    rgba(125,211,252,.16) 0 14px, rgba(125,211,252,.05) 14px 28px);
  /* --t-trail is 2600ms, which is exactly the rail speed the prototype used. */
  animation:lgl-rail var(--t-trail) var(--e-linear) infinite;
}
@keyframes lgl-rail{ to{ background-position:28px 0 } }
/* The parcel that rides across is positioned from JS with rAF, NOT a CSS
   animation. Its travel is 11-15s and motion.css has no token that long;
   inventing one would put a raw duration into the motion system for a single
   call site. Driving it from JS keeps this file free of raw ms. */
.lgl-pkg{
  position:absolute; bottom:25px; width:30px; height:22px; border-radius:3px;
  background:linear-gradient(180deg,#c9a26a,#a9844f);
  box-shadow:0 3px 7px rgba(0,0,0,.35);
  will-change:transform;
}
.lgl-pkg::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:5px;
  margin-left:-2.5px; background:rgba(255,255,255,.3);
}

/* ── the brand mark breathes, and flips when poked ────────────────────────── */
/* .brand-mark is styled by style.css and polish.css:468 for size, radius,
   background and shadow. Neither declares `animation` or `cursor`. */
.lgl-breathe{ animation:lgl-breathe var(--t-flight) var(--e-in-out) infinite; cursor:pointer; }
@keyframes lgl-breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.045) } }
.lgl-kick{ animation:lgl-kick var(--t-flash) var(--e-out); cursor:pointer; }
@keyframes lgl-kick{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } }

.lgl-egg{
  position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:3;
  font-size:12.5px; color:#bae6fd; opacity:0; pointer-events:none;
  transition:opacity var(--t-slow) var(--e-out);
}
.lgl-egg.is-on{ opacity:1; }

/* ── the sheen on the Log in button ───────────────────────────────────────── */
/* The class is added from JS to the one existing Login button. Global
   button{} declares background/colour/padding/radius/shadow but never
   `position` or `overflow`, so both are new here. */
.lgl-go{ position:relative; overflow:hidden; }
.lgl-go::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  /* --t-flight (4200ms) is the longest token motion.css defines; the sheen
     spends most of its cycle parked off-screen, so the token sets the gap
     between passes rather than the speed of one. */
  animation:lgl-sheen var(--t-flight) var(--e-in-out) infinite;
  pointer-events:none;
}
@keyframes lgl-sheen{ 0%,72%{ left:-60% } 88%,100%{ left:120% } }

/* ── signing in ───────────────────────────────────────────────────────────── */
/* The mark inside is RLoader's own markup, emitted by rloader.js. This file
   declares NO .rload rule and NO rload-* keyframe — rloader.css owns all of
   that, including the reduced-motion resting state and the hidden-tab pause. */
.lgl-signing{
  position:fixed; inset:0; z-index:9; display:none; place-items:center;
  background:rgba(8,20,33,.86); backdrop-filter:blur(3px);
}
.lgl-signing.is-on{ display:grid; }
.lgl-signing-msg{
  margin-top:22px; color:#cfe4f5; font-size:13.5px; text-align:center;
  min-height:20px;
}

/* ── narrow screens ───────────────────────────────────────────────────────── */
/* 900px is an EXISTING breakpoint — style.css uses it and responsive.css uses
   it. No new breakpoint is introduced. Below it the card takes 92vw, so the
   belt loses height and cannot reach the legal links. (This block used to hide
   the clock too; the clock no longer exists.) */
@media (max-width:900px){
  .lgl-belt{ height:40px; }
  .lgl-egg{ bottom:52px; }
}

/* ── reduced motion ───────────────────────────────────────────────────────── */
/* motion.css:133-138 already forces animation-duration:1ms on everything,
   which FREEZES a looping animation part-way rather than stopping it. So the
   loops are removed outright here, and the canvas and the riding parcel are
   never started by the JS (it checks the same preference).
   The clock, date, greeting, the form and the loader's own resting state all
   continue to work — rloader.css:198-206 handles the loader itself. */
@media (prefers-reduced-motion:reduce){
  .lgl-rail,
  .lgl-breathe,
  .lgl-kick,
  .lgl-go::after{ animation:none; }
  .lgl-cv{ display:none; }
  .lgl-belt .lgl-pkg{ display:none; }
}