/* A page with nothing left to do but read: no card, a face, a title and one line, centred. */
@layer components {
  .dead-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    max-inline-size: 24rem;
    margin: calc(var(--block-space) * 3) auto;
    text-align: center;

    & h1 { font-size: var(--text-x-large); }
    & p { color: var(--color-subtle); }
  }

  /* ":(" drawn from the logo: the "(" is the descender of the "g" (motifs/mouth.svg), the dots
     are as thick as its stroke. The mouth slides away from the eyes, then quivers on an
     off-centre pivot (kirupa.com's iOS jiggle). */
  .sad-face {
    --face: 6rem;
    --stroke: calc(var(--face) * var(--ring-ratio));

    display: flex;
    align-items: center;
    gap: calc(var(--stroke) * 0.75);
    block-size: calc(var(--face) * 1.4);
    color: var(--color-link);
  }

  .sad-face__eyes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    block-size: calc(var(--face) * 0.75);

    &::before, &::after {
      content: "";
      inline-size: var(--stroke);
      aspect-ratio: 1;
      background: currentColor;
      border-radius: 50%;
    }
  }

  .sad-face__mouth {
    block-size: var(--face);
    aspect-ratio: 57.66 / 120.45;
    background: currentColor;
    mask: url("/assets/motifs/mouth-e87f3ff0.svg") center / contain no-repeat;
    transform-origin: 20% 20%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sad-face__mouth {
      animation:
        sad-face-part 600ms var(--ease-out-back) both,
        sad-face-quiver 1.6s 600ms ease-in-out infinite alternate;
    }
  }

  @keyframes sad-face-part { from { translate: calc(var(--stroke) * -1.25) 0; } }
  @keyframes sad-face-quiver { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
}