/* The public site's footer (layouts/marketing), after plinth's: edge to edge, three columns of
   small text, a line with the company and the year, and the logo across the whole width, its
   foot cut by the screen's edge. Where scroll-driven animations exist and motion is allowed, its
   letters rise one after another as the footer comes into view. */
@layer components {
  .site-footer {
    --gutter: var(--site-edge); /* the header's and the bands' edge */

    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 6vh, 4rem);
    margin-block-start: calc(var(--block-space) * 4);
    padding: clamp(4rem, 14vh, 9rem) var(--gutter) 0; /* taller: a longer entry for the logo's rise */
    overflow: clip; /* the wordmark's foot */
    font-size: var(--text-small);
    color: #fff; /* white on Grella's violet, in either mode */
    background: #6448e8;
    --focus-ring: 2px solid #fff;

    & p { margin: 0; }
  }

  .site-footer__top {
    display: grid;
    gap: var(--block-space-double) var(--inline-space-double);

    @media (min-width: 40rem) { grid-template-columns: 2fr 1fr 1fr; }
  }

  .site-footer__what { max-inline-size: 24rem; font-size: var(--text-normal); line-height: 1.45; }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    font-weight: 600;

    /* No underline (base.css draws one under classless links): dimmed on hover instead. */
    & a { color: #fff; background: none; transition: opacity var(--transition); &:hover { opacity: 0.7; } }
  }

  /* The small line: uppercase, spread to both sides. */
  .site-footer__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--block-space-half) var(--inline-space-double);
    font-size: var(--text-x-small);
    letter-spacing: 0.04em;
    text-transform: uppercase; /* solid white: small text needs the full 5.8:1 on violet */
  }

  /* The logo, as wide as the footer, white on the violet (the manual's negative); about half of
     it lies below the screen's edge. */
  .site-footer__wordmark {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-end: -19%;
    color: #fff;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* The whole footer's view timeline drives the letters (a <g> has no box to follow, and the
         footer enters over a much longer scroll than the logo's visible half): slow, one after
         another, the last landing as the footer finishes entering. */
      .site-footer { view-timeline: --footer block; }

      .site-footer__wordmark g {
        transform-box: fill-box; /* % of the letter's own size, not the whole logo's */
        transform-origin: 50% 100%;
        /* a long ease-out (expo): quick off the edge, then a slow, soft glide into place */
        animation: wordmark-rise cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-timeline: --footer;
        animation-range: entry calc(var(--i) * 9%) entry calc(55% + var(--i) * 9%); /* long, overlapping */
      }
    }
  }

  /* Each letter rises from below the edge, tilted and small, and lands square. */
  @keyframes wordmark-rise {
    from { translate: 0 140%; rotate: 14deg; scale: 0.85; opacity: 0; }
    to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
  }
}