/* ==========================================================================
   motion.css — light-DOM rules for the motion primitives.

   This file exists for ONE reason: a custom element has no default display, so
   between the HTML being parsed and the component upgrading there is a window
   in which the browser lays out an inline box where a block was intended. On a
   slow connection that window is visible. main.css already declares the four
   original tags for exactly this reason; these are the new ones.

   THE RULE FOR THIS FILE. Nothing here may paint. No backgrounds, no colours,
   no shadows, no borders — the page backdrop in main.css (three fixed radial
   meshes plus the dot grid) is load-bearing, and a full-bleed opaque surface
   anywhere in the motion layer would flatten it. Every visual decision lives
   inside a component's own constructible stylesheet, against a token. What is
   left here is geometry, and only the geometry that has to be correct BEFORE
   script runs.

   Logical properties throughout (Law 12: RTL-ready). No `prefers-color-scheme`,
   here or anywhere: the theme is an explicit choice and lives in tokens.css.
   ========================================================================== */

/* x-tilt wraps a card and must not change its box. The 100% chain matters: in
   `.cards > x-reveal > x-tilt > .card`, every link has to pass the flex item's
   resolved height down or the cards in a row stop matching each other. */
x-tilt {
  display: block;
  block-size: 100%;
}

/* A connector is a sliver stretched between two steps. The declared size is
   what stops it collapsing to nothing in a grid or flex row before upgrade. */
x-flow {
  display: block;
  block-size: 2px;
  inline-size: 100%;
}
x-flow[orientation="block"] {
  inline-size: 2px;
  block-size: 100%;
}

/* x-rail is deliberately absent.
 *
 * It is entirely script-born: with no JavaScript it must render NOTHING, not an
 * inert decoration, so it is left as an empty inline element with no rule at
 * all. Declaring `display: block` here would give it a line box on a page where
 * it can never do its job — and a document-level rule would also outrank the
 * component's own `:host` rule, which is what governs its visibility. */