/*
 * Founder Letter Component
 * Stacked-paper letter card with author attribution
 */

@layer components {
  .founder-letter {
    position: relative;
    margin-bottom: 6rem;
    transform: rotate(-1deg);
  }

  /* Stacked paper layers */
  .founder-letter__layer {
    position: absolute;
    inset: 0;
    border-radius: 0;
    box-shadow: var(--shadow);
  }

  .founder-letter__layer--back {
    background-color: var(--color-gray-light);
    transform: translateY(0.5rem) rotate(1deg);

    @media (min-width: 640px) {
      transform: translateY(1rem) rotate(3deg);
    }
  }

  .founder-letter__layer--mid {
    background-color: var(--color-gray-lighter);
    transform: translateY(0.25rem) rotate(-1deg);

    @media (min-width: 640px) {
      transform: translateY(0.5rem) rotate(-1deg);
    }
  }

  /* Main card */
  .founder-letter__card {
    position: relative;
    background-color: oklch(0.97 0.005 85);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E");
    border-radius: 0;
    box-shadow: var(--shadow);
    font-family: var(--font-serif);
    padding: 3rem;

    @media (min-width: 640px) {
      padding: 4rem;
    }

    @media (min-width: 1280px) {
      padding: 6rem;
    }

    /* Edge vignette for aged paper feel */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 3rem 0.5rem oklch(0.85 0.02 85 / 0.25);
      pointer-events: none;
      z-index: 1;
    }

    /* Ruled notebook lines */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 1.9rem,
        oklch(var(--lch-gray-medium) / 0.25) 1.9rem,
        oklch(var(--lch-gray-medium) / 0.25) 2rem
      );
      opacity: 1;
      pointer-events: none;
    }
  }

  /* Letter body text */
  .founder-letter__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: oklch(0.25 0.02 260);
    line-height: var(--leading-relaxed);
    font-weight: 400;
  }

  .founder-letter__body strong {
    color: oklch(0.2 0.02 260);
  }

  /* Author attribution */
  .founder-letter__author {
    display: flex;
    align-items: center;
    gap: var(--block-space);
    margin-top: 1.5rem;
  }

  .founder-letter__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  .founder-letter__signature {
    display: block;
    width: 10rem;
    height: auto;
    margin-bottom: 0.5rem;
  }

  /*
   * Standalone signature (not inside the cream-paper card).
   * Needs to follow the page's color scheme so the dark ink stays
   * visible when the surrounding background flips dark.
   */
  .founder-letter__signature--standalone {
    html[data-theme="dark"] & {
      filter: invert(1);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        filter: invert(1);
      }
    }
  }

  .founder-letter__name {
    color: var(--color-green-dark);
    font-size: var(--text-x-large);
  }

  .founder-letter__role {
    color: var(--color-gray);
  }

  /* Decorative illustration */
  .founder-letter__illustration {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 8rem;
    aspect-ratio: 16 / 9;
    background-color: var(--color-gray);
    mask-image: url("/assets/logo-sakolabs-3850fb2c.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    opacity: 0.5;

    @media (min-width: 640px) {
      bottom: 3rem;
      right: 3rem;
      width: 10rem;
    }

    @media (min-width: 1280px) {
      bottom: 4rem;
      right: 4rem;
    }
  }

  /* P.S. note */
  .founder-letter__ps {
    margin-top: 1.5rem;
    font-size: var(--text-x-small);
    font-style: italic;
    color: var(--color-gray);
    line-height: var(--leading-relaxed);

    & a {
      color: var(--color-green-dark);
      text-decoration: underline;

      @media (any-hover: hover) {
        &:hover {
          color: var(--color-green-darkest);
        }
      }
    }
  }
}