/* Generated by site/build.ts from site/page-src/wall-glyph.css. Do not edit. */
/* Wall glyphs: the three tones, the one stroke, and the hover move. */

/* How far a glyph's travelling drawing has come, on each axis, as a share of
 * its own side. Registered so that the browser can ease a length it would
 * otherwise only switch, and so that the value stays on the drawing and is
 * not handed down to the shapes inside it. */
@property --wall-glyph-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --wall-glyph-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@layer discern.components {
  /* A glyph is a square box. It holds one drawing of the primitives that stay
   * still and, for a glyph with a primitive that travels, a second drawing of
   * that primitive alone, laid exactly over the first. A drawing fills the
   * box, and a primitive that travels may cross the box's edge. */
  .wall-glyph {
    position: relative;
    display: block;
  }

  .wall-glyph-art,
  .wall-glyph-move {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    fill: none;
  }

  .wall-glyph-move {
    position: absolute;
    inset: 0;
  }

  .wall-glyph-solid {
    fill: currentColor;
  }

  .wall-glyph-tint {
    fill: currentColor;
    fill-opacity: var(--wall-glyph-tint);
  }

  .wall-glyph-outline,
  .wall-glyph-faint {
    stroke: currentColor;
    stroke-width: var(--wall-glyph-weight);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* A line covers less than an area, so a tinted stroke sits a step above
   * the tinted fill to read at the same strength. */
  .wall-glyph-faint {
    stroke-opacity: calc(var(--wall-glyph-tint) * 1.4);
  }

  /* A dashed stroke gives up part of its length to gaps, so it is drawn
   * heavier than a whole stroke and its dashes read as short pills. */
  .wall-glyph-dashed {
    stroke-width: calc(var(--wall-glyph-weight) * 1.5);
  }

  /* One primitive of a glyph may travel a few grid units. It holds that pose
   * for as long as its card is lit: with keyboard focus, or under a pointer
   * that can hover. Where a pointer can hover, a card is lit when it is
   * opened, so the pose carries through the opening: the card keeps it while
   * it is the opened sheet's source, and the sheet draws its own glyph in the
   * same pose. The two pictures of the glyph agree as one grows into the
   * other. Nothing else about the glyph changes.
   *
   * The primitive's whole drawing moves, by a share of its own side, so the
   * same distance in grid units serves a glyph of any size. Three things keep
   * that move from costing anything beyond the drawing itself:
   *
   * - The drawing always carries a move, of nothing at rest. A box that goes
   *   from no move to some move is laid out again, and so is everything laid
   *   out with it. A box whose move only changes length is not.
   * - The ease is on the two lengths and never on the move itself. A box
   *   with a transition running on its own move becomes a layer for as long
   *   as the transition runs. A layer in the middle of the wall makes the
   *   browser redraw every card after it, and their edges shimmer.
   * - The move ends with the card's face, which the card stylesheet brings to
   *   rest and then steps back down among the other cards. */
  @media (prefers-reduced-motion: no-preference) {
    .wall-glyph-move {
      translate: var(--wall-glyph-x) var(--wall-glyph-y);
      transition:
        --wall-glyph-x 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        --wall-glyph-y 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wall-card:has(.wall-card-open:focus-visible) .wall-glyph-move {
      --wall-glyph-x: var(--wall-glyph-dx);
      --wall-glyph-y: var(--wall-glyph-dy);
    }

    @media (hover: hover) {
      .wall-card:hover .wall-glyph-move,
      .wall-card[data-wall-opening] .wall-glyph-move,
      .wall-open .wall-glyph-move {
        --wall-glyph-x: var(--wall-glyph-dx);
        --wall-glyph-y: var(--wall-glyph-dy);
      }
    }
  }
}