@layer stars {
  .letter-card {
    padding: 2rem 2rem 1.75rem;
    font-family: var(--font-display);
    max-width: 480px;
  }

  .letter-card__date {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 1.5rem;
    padding-right: 2rem; /* avoid close btn overlap */
  }

  .letter-card__salutation {
    font-size: 1.2rem;
    color: #ffb4be;
    margin-bottom: 1.25rem;
    font-style: italic;
  }

  .letter-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .letter-card__body p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    font-style: italic;
    text-indent: 1.25em;
  }

  .letter-card__closing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(251, 113, 133, 0.2);
    gap: 0.35rem;
  }

  .letter-card__closing-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
  }

  .letter-card__signature {
    font-size: 1.35rem;
    color: #ffb4be;
    font-style: italic;
  }

  .letter-card__seal {
    text-align: center;
    font-size: 2rem;
    margin-top: 1.25rem;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.5));
  }

  /* ── Vintage origin animation ─────────────────────────────── */

  /*
   * Overrides the default modal-layer transition for the letter card.
   * @layer stars > @layer modal, so no !important needed.
   */
  .modal-card--from-star {
    transition: none;
    opacity: 0;
    transform: none;
    animation: letter-unfold 0.95s cubic-bezier(0.22, 1.4, 0.56, 1) both;
  }

  /* Prevent the backdrop.visible rule (modal layer) from fighting the animation */
  .modal-backdrop.visible .modal-card--from-star {
    transition: none;
    animation: letter-unfold 0.95s cubic-bezier(0.22, 1.4, 0.56, 1) both;
  }

  @keyframes letter-unfold {
    0% {
      opacity: 0;
      transform: translate(var(--letter-from-x), var(--letter-from-y))
                 scale(0.06)
                 rotate(-12deg);
      filter: blur(2px);
    }
    35% {
      opacity: 1;
      filter: blur(0);
    }
    70% {
      transform: translate(0, 0) scale(1.04) rotate(1.5deg);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) scale(1) rotate(0deg);
      filter: blur(0);
    }
  }
}