/* Generated by site/build.ts from site/page-src/wall-card.css. Do not edit. */
/* Wall cards: the surface, type, and states of the three kinds. */

/* What script writes on a card while the pointer moves: where the pointer
 * sits inside the card it is over, and where the shared pointer light is
 * from the corner of each card it reaches. Registered so that they do not
 * inherit: a new value reaches the box it is written on and the boxes that
 * ask for it by name, and is never handed down through the glyph and the
 * words inside the card. */
@property --wall-pointer-x {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --wall-pointer-y {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --wall-card-light-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --wall-card-light-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --wall-card-light-on {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@layer discern.components {
  /* A card is one line of the list: an inline block as wide as its column,
   * with the gap above it as its own top margin. A column breaks between
   * lines and never inside one, so no card is cut in two, and the card that
   * heads a column starts one gap below the column's top. Whatever a card
   * draws outside its box, lit or lifted, ends within that gap, so all of it
   * lies inside the column. Once a card has a layer of its own, WebKit draws
   * it in the column before when its ink starts above its own. */
  .wall-card {
    /* Where the pointer sits inside the card it is over: -1 to 1 on each
     * axis, 0 at the center. The card writes both while a pointer hovers. */
    --wall-pointer-x: 0;
    --wall-pointer-y: 0;

    position: relative;
    display: inline-block;
    inline-size: 100%;
    margin-block: var(--wall-gap) 0;
    vertical-align: top;
  }

  /* The face is an opaque, neutral object lit from its top-left corner.
   * Color appears only as light: the corner wash, the hue the border catches
   * there, and the glyph. Depth comes from light and shadow, never from blur.
   *
   * Each part of the surface is a custom property so a kind or a state can
   * change one part without restating the stack. */
  .wall-card-face {
    --wall-card-surface: linear-gradient(
      180deg,
      var(--wall-face-head),
      var(--wall-face-foot)
    );
    --wall-card-wash: radial-gradient(
      12rem circle at 0 0,
      oklch(60% calc(var(--wall-chroma) * 1.25) var(--wall-hue) / 0.15),
      transparent 72%
    );
    --wall-card-edge: radial-gradient(
      9rem circle at 0 0,
      oklch(86% var(--wall-chroma) var(--wall-hue) / 0.34),
      transparent 72%
    );

    /* The pointer's place inside the card, taken from the card's root. */
    --wall-pointer-x: inherit;
    --wall-pointer-y: inherit;

    position: relative;
    z-index: 0;
    display: grid;
    justify-items: start;
    padding: 1.125rem 1.125rem 1.3125rem;
    border: 1px solid transparent;
    border-radius: var(--wall-radius);

    /* The face is laid out apart from the list. Its card is a line of the
     * list, and a browser lays a line out again when a box in it starts or
     * stops moving, unless that box's layout is contained. */
    contain: layout;
    background:
      var(--wall-card-wash) padding-box,
      var(--wall-card-surface) padding-box,
      var(--wall-card-edge) border-box,
      linear-gradient(180deg, oklch(100% 0 0 / 0.16), oklch(100% 0 0 / 0.075))
      border-box;

    /* Every outer shadow is sized from the gap, so it ends before the next
     * card: a card darkens the wall beneath it and never a neighbor. */
    box-shadow:
      inset 0 1px 0 oklch(100% 0 0 / 0.045),
      0 1px 1px oklch(0% 0 0 / 0.45),
      0 calc(var(--wall-gap) * 0.35) calc(var(--wall-gap) * 0.5)
      calc(var(--wall-gap) * -0.25) oklch(0% 0 0 / 0.8);
  }

  /* The shared pointer light as this card's border catches it. The box lies
   * over the face's border and shows nowhere else: a mask leaves only that
   * one-pixel ring. It is dark at rest, and the light writes its place and
   * how far it has come up on each card within its reach. The place is
   * measured from the card's own corner, so the light stays where it is on a
   * face that lifts or tilts, and following the pointer changes brightness
   * only. The box has nothing inside it, so a new place restyles it alone:
   * written on the face, the same value would cost every child of the face
   * a second look each frame.
   *
   * The light is white and faint, the same on every card it reaches, so the
   * cards round the pointer read as lit by one light. A card shows its own
   * hue only while the pointer is on it or the keyboard has reached it. */
  .wall-card-light {
    --wall-card-light-x: 0px;
    --wall-card-light-y: 0px;
    --wall-card-light-on: 0;

    position: absolute;
    z-index: -2;
    inset: -1px;
    border: 1px solid transparent;
    border-radius: var(--wall-radius);
    background: radial-gradient(
      var(--wall-light-throw) circle at var(--wall-card-light-x)
      var(--wall-card-light-y),
      oklch(
        100% 0 0 /
        calc(0.2 * var(--wall-light-strength) * var(--wall-card-light-on))
      ),
      transparent
    )
      border-box;
    mask:
      linear-gradient(oklch(0% 0 0) 0 0) padding-box exclude,
      linear-gradient(oklch(0% 0 0) 0 0);
    pointer-events: none;
  }

  /* Two layers sit between the surface and the words, and only their opacity
   * ever changes. The first is the face as it looks in the light. The second
   * is the deeper shadow of a lifted card. */
  .wall-card-face::before,
  .wall-card-face::after {
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    content: "";
  }

  .wall-card-face::before {
    --wall-pointer-x: inherit;
    --wall-pointer-y: inherit;

    border: 1px solid transparent;
    background:
      radial-gradient(
      16rem circle at calc(50% + var(--wall-pointer-x) * 50%)
      calc(50% + var(--wall-pointer-y) * 50%),
      oklch(100% 0 0 / 0.055),
      transparent 68%
    )
      padding-box,
      var(--wall-card-wash) padding-box,
      var(--wall-card-surface) padding-box,
      radial-gradient(
      18rem circle at calc(50% + var(--wall-pointer-x) * 50%)
      calc(50% + var(--wall-pointer-y) * 50%),
      oklch(90% var(--wall-chroma) var(--wall-hue) / 0.9),
      oklch(86% var(--wall-chroma) var(--wall-hue) / 0.28) 70%
    )
      border-box;
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.07);
  }

  .wall-card-face::after {
    box-shadow:
      0 calc(var(--wall-gap) * 0.45) calc(var(--wall-gap) * 0.7)
      calc(var(--wall-gap) * -0.3) oklch(0% 0 0 / 0.9),
      0 0 calc(var(--wall-gap) * 0.8) calc(var(--wall-gap) * -0.25)
      oklch(72% var(--wall-chroma) var(--wall-hue) / 0.3);
  }

  .wall-card-glyph {
    inline-size: 2.875rem;
    block-size: 2.875rem;
    margin-block-end: 1.125rem;
    color: var(--wall-accent);
  }

  /* A word longer than the card is wide breaks where it must, so a narrow
   * card never pushes its heading out past its own edge. */
  .wall-card-title {
    font-size: 1.03125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .wall-card-line {
    margin-block-start: 0.375rem;
    font-size: 0.890625rem;
    line-height: 1.5;
    color: var(--wall-ink-muted);
    text-wrap: pretty;
  }

  /* A statement is a sentence set large under a short rule in its hue, on a
   * face that takes more of that hue than a benefit card does. */
  .wall-card--statement .wall-card-face {
    --wall-card-wash: radial-gradient(
      22rem circle at 0 0,
      oklch(60% calc(var(--wall-chroma) * 1.25) var(--wall-hue) / 0.2),
      transparent 70%
    );
    --wall-card-edge: linear-gradient(
      150deg,
      oklch(86% var(--wall-chroma) var(--wall-hue) / 0.55),
      transparent 46%
    );

    padding: 1.5rem 1.375rem 1.6875rem;
  }

  .wall-card--statement .wall-card-title {
    font-family: var(--discern-font-marketing);
    font-size: 1.375rem;
    line-height: 1.16;
    letter-spacing: -0.028em;
  }

  .wall-card--statement .wall-card-title::before {
    display: block;
    inline-size: 1.625rem;
    block-size: 2px;
    margin-block-end: 1.125rem;
    border-radius: 1px;
    background: var(--wall-accent);
    content: "";
  }

  /* A numeral card leads with its number, which is part of the heading. */
  .wall-card--numeral .wall-card-face {
    padding-block-start: 1.25rem;
  }

  .wall-card-numeral {
    display: block;
    margin-block-end: 0.875rem;
    font-family: var(--discern-font-marketing);
    font-size: 3.625rem;
    line-height: 0.86;
    letter-spacing: -0.055em;
    color: var(--wall-accent);
  }

  /* The margins are for the browser's own scroll to a focused card. The
   * browser scrolls to the button, which is the heading's box alone, and the
   * card reaches above and below it. The bar pinned over the wall hides what
   * passes under it, so the start margin brings a card the keyboard reaches
   * to rest clear of the bar, with the whole of the card above its heading
   * in view. The end margin is the tallest foot a card has under its
   * heading: four lines of description, the face's padding, and the focus
   * ring. */
  .wall-card-open {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-decoration: none;
    text-align: start;
    cursor: pointer;
    appearance: none;
    scroll-margin-block: 9.5rem 7.5rem;
    -webkit-tap-highlight-color: transparent;
  }

  /* The card's link or button covers the whole face, border included. */
  .wall-card-open::after {
    position: absolute;
    inset: -1px;
    border-radius: var(--wall-radius);
    content: "";
  }

  span.wall-card-open {
    cursor: auto;
  }

  .wall-card-open:focus-visible {
    outline: none;
  }

  .wall-card-open:focus-visible::after {
    outline: 2px solid var(--wall-accent);
    outline-offset: 2px;
  }

  /* Keyboard focus lights the card it is on. */
  .wall-card:has(.wall-card-open:focus-visible) .wall-card-face::before {
    opacity: 1;
  }

  @media (hover: hover) {
    /* Hover changes the hovered card and nothing else: its face takes the
     * light and its shadow deepens. */
    .wall-card:hover .wall-card-face::before,
    .wall-card:hover .wall-card-face::after {
      opacity: 1;
    }
  }

  /* Pressed, the card settles back onto the wall: less light, no lift. */
  .wall-card:active .wall-card-face::before {
    opacity: 0.6;
  }

  .wall-card:active .wall-card-face::after {
    opacity: 0;
  }

  /* Where the wall is one column, a benefit card sets its glyph beside its
   * words, not above them, and the wall is about a quarter shorter to
   * scroll. The width here is the widest at which the list has one column. */
  @media (max-width: 37.875rem) {
    .wall-card--benefit .wall-card-face {
      grid-template-columns: 2.5rem minmax(0, 1fr);
      column-gap: 0.875rem;
      padding: 1rem 1rem 1.125rem;
    }

    .wall-card--benefit .wall-card-glyph {
      grid-row: 1 / span 2;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      margin: 0;
    }

    .wall-card--benefit :is(.wall-card-title, .wall-card-line) {
      grid-column: 2;
    }
  }

  /* Motion belongs to the face, never to the list item, so a moving card
   * keeps its place in the masonry and no neighbor shifts. The lift is two
   * pixels. The tilt leans toward the pointer by at most --wall-hover-tilt,
   * reached only at the card's edge.
   *
   * A face has its own layer only while it moves. For as long as it does, it
   * is drawn above the other cards: a layer in the middle of the wall would
   * make the browser redraw every card after it, and their edges and letters
   * would shimmer. So the face rises in the stack at once and steps back down
   * a moment after it has come to rest. */
  @media (prefers-reduced-motion: no-preference) {
    .wall-card-face {
      transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        z-index 0s 0.5s;
    }

    .wall-card-face::before,
    .wall-card-face::after {
      transition: opacity 0.45s;
    }

    .wall-card:has(.wall-card-open:focus-visible) .wall-card-face {
      z-index: 1;
      transition-delay: 0s;
    }

    @media (hover: hover) {
      .wall-card:hover .wall-card-face {
        z-index: 1;
        transform: perspective(60rem) translate3d(0, -2px, 0)
          rotateX(calc(var(--wall-pointer-y) * var(--wall-hover-tilt) * -1))
          rotateY(calc(var(--wall-pointer-x) * var(--wall-hover-tilt)))
          scale(1);
        transition-delay: 0s;
        will-change: transform;
      }

      .wall-card:hover .wall-card-face::before,
      .wall-card:hover .wall-card-face::after {
        transition-duration: 0.2s;
      }
    }

    .wall-card:active .wall-card-face {
      z-index: 1;
      transform: perspective(60rem) translate3d(0, 0, 0)
        rotateX(calc(var(--wall-pointer-y) * var(--wall-hover-tilt) * -1))
        rotateY(calc(var(--wall-pointer-x) * var(--wall-hover-tilt)))
        scale(0.985);
      transition-duration: 0.12s, 0s;
      transition-delay: 0s;
    }
  }

  /* Print and forced colors: flat cards in the system's own colors. */
  @media print {
    /* Paper has no layers, so no card needs the gap above it. A card there
     * is a block with the gap under it, kept whole, and a sheet's columns
     * fill to its foot. */
    .wall-card {
      display: list-item;
      margin-block: 0 var(--wall-gap);
      break-inside: avoid;
      color-scheme: light;
    }

    /* A statement's rule is a border on paper, which prints whether or not
     * the reader prints backgrounds. */
    .wall-card--statement .wall-card-title::before {
      block-size: 0;
      border-block-start: 2px solid CanvasText;
      border-radius: 0;
      background: none;
    }
  }

  @media (forced-colors: active), print {
    .wall-card {
      --wall-accent: CanvasText;
    }

    .wall-card-face {
      border-color: CanvasText;
      color: CanvasText;
      background: Canvas;
      box-shadow: none;
    }

    .wall-card-face::before,
    .wall-card-face::after,
    .wall-card-light {
      display: none;
    }

    .wall-card-line {
      color: CanvasText;
    }
  }

  @media (forced-colors: active) {
    .wall-card:has(.wall-card-open:focus-visible) .wall-card-face {
      border-color: Highlight;
    }

    @media (hover: hover) {
      .wall-card:hover .wall-card-face {
        border-color: Highlight;
      }
    }

    /* The design system outlines the focused button itself here. */
    .wall-card-open:focus-visible::after {
      outline: none;
    }
  }
}