@keyframes welcome-letter-rise {
  from { opacity: 0; translate: 0 0.75rem; }
}

@layer modules {
  .welcome-letter {
    --pillow-offset: 10px;
    --pillow-blur: 26px;
    --pillow-shade: color-mix(in srgb, var(--color-slate-900) 20%, transparent);

    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;

    & > * {
      border-radius: var(--radius-3xl);
      animation: welcome-letter-rise 0.5s var(--ease-out) backwards;
    }

    & > :nth-child(2) { animation-delay: 60ms; }
    & > :nth-child(3) { animation-delay: 120ms; }
    & > :nth-child(4) { animation-delay: 180ms; }
    & > :nth-child(5) { animation-delay: 240ms; }

    p, h2, h3 {
      text-wrap: pretty;
    }

    @media (min-width: 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));

      .welcome-letter__hero { grid-column: span 4; }
      .welcome-letter__actions { grid-column: span 2; }
      .welcome-letter__features,
      .welcome-letter__mission { grid-column: span 3; }
      .welcome-letter__help { grid-column: 1 / -1; }
    }
  }

  .welcome-letter__hero {
    --pillow-shade: color-mix(in srgb, var(--color-blue-700) 30%, transparent);
    --pillow-rim: var(--color-white-20);

    padding: 2rem;
    background: var(--gradient-pillow-accent);
    box-shadow: var(--shadow-pillow);
    color: var(--color-white);

    @media (min-width: 40rem) { padding: 3rem; }
  }

  .welcome-letter__hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
  }

  .welcome-letter__logo img {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: 4px 4px 10px rgb(15 23 42 / 0.25), -3px -3px 8px var(--color-white-20);
  }

  .welcome-letter__dismiss {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    background-color: var(--color-blue-600);
    box-shadow: var(--shadow-tray-pressed-accent);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out);

    &:hover { background-color: var(--color-blue-500); }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--color-white);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .welcome-letter__eyebrow {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-blue-200);
  }

  .welcome-letter__title {
    margin-top: 0.75rem;
    font-size: var(--text-4xl);
    line-height: 1.05;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;

    @media (min-width: 40rem) { font-size: var(--text-5xl); }
  }

  .welcome-letter__subtitle {
    margin-top: 0.75rem;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    color: var(--color-blue-100);
  }

  .welcome-letter__lede {
    max-width: 36rem;
    margin-top: 2rem;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-blue-50);
  }

  .welcome-letter .welcome-letter__lede [data-controller~="clipboard"] .welcome-letter__copy[data-clipboard-target] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
    text-decoration-line: underline;
    text-decoration-color: var(--color-white-50);
    text-underline-offset: 4px;
    cursor: pointer;

    &:hover { text-decoration-color: var(--color-white); }

    .clipboard-success__icon {
      width: 1em;
      height: 1em;
    }
  }

  .welcome-letter__actions {
    display: grid;
    gap: 1.5rem;

    @media (min-width: 40rem) and (max-width: 63.99rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .welcome-letter__action {
    --action-icon-bg: var(--color-slate-50);
    --action-icon-color: var(--color-blue-600);
    --action-icon-shadow: var(--shadow-tray-pressed-lg);
    --action-text: var(--color-text-muted);
    --action-more: var(--color-link);

    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--radius-3xl);
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);
    color: var(--color-text);
    transition: box-shadow 0.2s var(--ease-out), scale 0.2s var(--ease-out);

    &:hover { --pillow-offset: 14px; --pillow-blur: 32px; }
    &:active { scale: 0.99; box-shadow: var(--shadow-tray-pressed-lg); }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .welcome-letter__action--call {
    --action-icon-bg: var(--color-gray-900);
    --action-icon-color: var(--color-white);
    --action-icon-shadow: inset 2px 2px 5px rgb(0 0 0 / 0.4), inset -2px -2px 5px var(--color-white-10);
    --action-text: var(--color-gray-400);
    --action-more: var(--color-white);
    --pillow-shade: color-mix(in srgb, var(--color-slate-900) 28%, transparent);
    --pillow-rim: var(--color-white-10);

    background: linear-gradient(145deg, var(--color-gray-800), var(--color-gray-900));
    color: var(--color-white);

    &:active { box-shadow: inset 4px 4px 10px rgb(0 0 0 / 0.45), inset -4px -4px 10px var(--color-white-10); }
  }

  .welcome-letter__action-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-full);
    background-color: var(--action-icon-bg);
    box-shadow: var(--action-icon-shadow);
    color: var(--action-icon-color);
    font-size: var(--text-xl);
  }

  .welcome-letter__action-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
  }

  .welcome-letter__action-text {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--action-text);
  }

  .welcome-letter__action-more {
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--action-more);
  }

  .welcome-letter__features {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);

    @media (min-width: 40rem) { padding: 2.5rem; }
  }

  .welcome-letter__features-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .welcome-letter__features-badge {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--gradient-pillow);
    box-shadow: 3px 3px 7px rgb(15 23 42 / 0.12), -3px -3px 7px var(--color-white);
    color: var(--color-green-600);
  }

  .welcome-letter__feature-grid {
    flex: 1;
    display: grid;
    align-content: space-evenly;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
  }

  .welcome-letter__feature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.875rem;
    align-items: center;
  }

  .welcome-letter__feature-emoji {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-slate-50);
    box-shadow: var(--shadow-tray-pressed-lg);
    font-size: var(--text-xl);
    line-height: 1;
  }

  .welcome-letter__feature-name {
    align-self: end;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .welcome-letter__feature-desc {
    align-self: start;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
  }

  .welcome-letter__mission {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-soft);

    @media (min-width: 40rem) { padding: 2.5rem; }

    strong {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
    }
  }

  .welcome-letter__mission-lede {
    font-size: var(--text-2xl);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .welcome-letter__sign {
    margin-top: auto;
    padding-top: 1rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
  }

  .welcome-letter__signature {
    margin-block: 0.25rem 0.125rem;
    font-family: var(--font-signature);
    font-size: var(--text-4xl);
    line-height: 1.2;
    color: var(--color-blue-600);
  }

  .welcome-letter__help {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 1.75rem 2rem;
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-text-soft);

    @media (min-width: 48rem) {
      grid-template-columns: auto minmax(0, 1fr) auto;
      justify-items: start;
      align-items: center;
      gap: 1.25rem;
      text-align: start;
    }

    strong {
      font-weight: var(--font-weight-semibold);
      color: var(--color-blue-700);
    }

    .btn {
      --btn-radius: var(--radius-full);
      --btn-padding: 0.625rem 1.25rem;

      box-shadow: 4px 4px 10px color-mix(in srgb, var(--color-blue-600) 35%, transparent), -4px -4px 10px var(--color-white);
    }
  }

  .welcome-letter__help-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-slate-50);
    box-shadow: var(--shadow-tray-pressed-lg);
    color: var(--color-blue-600);
    font-size: var(--text-2xl);
  }

  .welcome-letter__help-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  @media (prefers-reduced-motion: reduce) {
    .welcome-letter > *,
    .welcome-letter__action {
      animation: none;
      transition: none;
    }
  }
}