/* ===================================================================== *
 * cta.css, the closing "You didn't start posting to become a lawyer" band.
 *
 * One section from the front page redesign, built from the Figma frame
 * "Closing panel / chips". Loaded after app.css and only by index.html.
 *
 * The six chips scattered around the words are the engine's own levels,
 * rendered by the real .pill component with real data-level values, the
 * same arrangement the law band uses. They are the verdicts the checker can
 * return, which is what makes them worth showing here rather than being
 * decoration that happens to be coloured.
 *
 * They arrive on scroll: stacked at the middle of the band and small when
 * its centre is at the bottom of the window, out at their places and full
 * size by the time it reaches the middle of the screen. Scroll back and it
 * runs backwards, because the position is computed from where the band is
 * rather than played as an animation with a direction.
 *
 * EVERY class here is namespaced `cta__`, for the reason know.css gives at
 * length: the app owns the short names. The one borrowed class is `.pill`,
 * and that is borrowed deliberately.
 * ===================================================================== */

@layer tokens {
  /* Registered rather than left as a plain custom property, so it is a real
     number the whole way through: an unregistered one is substituted as text,
     which works in calc but cannot be interpolated and gives no type error
     when something writes nonsense into it. cta.js writes it, everything
     below reads it. */
  @property --in {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }

  :root {
    /* The brand blue, not a surface, so it does not drift with the page around
       it: the same call the accent chips make. It steps down one place in dark,
       where a full-bleed #0040ff against a near-black page is a headlight.
       White measures 6.6:1 on the light value and 9.9:1 on the dark one, so
       the words hold either way. */
    --cta-band: #0040ff;

    /* The note under the headline. Off the blue scale rather than white at an
       opacity, so it is one value to look at rather than a sum. */
    --cta-note-ink: #d6e2ff;

    /* How small a chip starts, before it has travelled anywhere. Not zero:
       a chip that grows out of nothing reads as an effect, and these are
       meant to read as the verdicts arriving. */
    --cta-chip-min: 0.4;
  }

  @media (prefers-color-scheme: dark) {
    :root { --cta-band: #0f33b1; }
  }
}

@layer components {

  /* The band paints full width, the words stay inside the 1440 column, and
     the chips are positioned against the band rather than the column so they
     can sit out in the margin where the frame puts them.

     container-type is what lets the scatter be written in cqw below, so the
     whole arrangement scales with the band instead of being pinned to the
     pixel positions of one 1440 comp. */
  .cta {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    background: var(--cta-band);
    padding-block: var(--space-9);
    text-align: center;
  }

  @media (max-width: 48rem) {
    .cta { padding-block: var(--space-7); }
  }

  .cta__inner {
    position: relative;
    z-index: 1;           /* over the chips, so a chip passing through reads as behind the words */
  }

  .cta__title {
    max-width: 56rem;     /* 896, the frame's 900 on the nearest round measure */
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.07;
    color: #ffffff;
    text-wrap: balance;
  }

  @media (min-width: 48rem) {
    .cta__title { font-size: var(--text-3xl); }
  }

  @media (min-width: 64rem) {
    .cta__title { font-size: 3.75rem; }  /* 60, per the frame */
  }

  .cta__note {
    margin-top: var(--space-5);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--cta-note-ink);
    text-wrap: pretty;
  }

  /* The band inverted, and pinned rather than pulled from --accent-text and
     --accent. Those two flip with the scheme, which is right when the thing
     behind them flips too; this band does not. Following them into dark would
     put a near-black button on a blue band, which is a different design from
     the frame rather than the same one adapted. The ink tracks --cta-band, so
     the button and the band cannot come apart: 6.6:1 in light, 9.9:1 in dark. */
  .cta__go {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-full);
    background: #ffffff;
    color: var(--cta-band);
    font-size: var(--text-lg);
    text-decoration: none;
  }

  /* Blue10, fixed for the same reason. --select-bg would take this to navy in
     dark and the label would vanish into its own button.

     Gated on a real pointer. A touch browser resolves :hover on tap and then
     leaves it resolved, so on a phone the button would sit in its hover blue
     from the first press until something else was touched, which reads as a
     button stuck mid-press rather than one that responds. */
  @media (hover: hover) {
    .cta__go:hover { background: #cce9ff; }
  }

  .cta__go:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
  }

  /* The frame's arrow is this one turned round. Flipped rather than drawn
     again, so there is one arrow in the sprite to keep straight. */
  .cta__go .icon { transform: scaleX(-1); }

  /* -- the chips ------------------------------------------------------- *
     Decoration built out of real verdicts. aria-hidden in the markup: the
     levels mean something in a result, and repeated here with no result
     attached they would just be six words read out before the button. */
  .cta__chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Wide, the rows are not a layout: every chip inside them is absolutely
     positioned against .cta__chips, so the grouping is only there for the
     narrow arrangement to pick up. display: contents keeps them from leaving
     two empty boxes behind in the meantime. */
  .cta__row { display: contents; }

  /* Each chip carries its own place as three numbers set in the markup:
     --dx and --dy in cqw out from the middle of the band, and --r for the
     tilt. Measured off the frame and divided by its 1440, so the scatter
     keeps its shape at any width instead of being a table of pixels.

     This is also the no-script state, and it is the finished one. If cta.js
     never runs, the chips are simply where they belong. */
  .cta__chip {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
  }

  /* -- wide: the scatter ------------------------------------------------ */
  @media (min-width: 64rem) {
    .cta__chip {
      position: absolute;
      left: 50%;
      top: 50%;
      transform:
        translate(-50%, -50%)
        translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqw))
        rotate(var(--r));
    }
  }

  /* Only once cta.js has measured the band and written --in does a chip take
     its position from the scroll. Set in that order so a script that never
     runs cannot leave the chips stacked in the middle at opacity 0. */
  @media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .cta[data-scroll] .cta__chip {
      opacity: var(--in);
      transform:
        translate(-50%, -50%)
        translate(calc(var(--dx) * var(--in) * 1cqw), calc(var(--dy) * var(--in) * 1cqw))
        rotate(calc(var(--r) * var(--in)))
        scale(calc(var(--cta-chip-min) + (1 - var(--cta-chip-min)) * var(--in)));
    }
  }

  /* -- narrow: two rows ------------------------------------------------- *
     There is no side margin to scatter into here, so the chips stop being
     placed individually and become two strips, one above the words and one
     below. The band takes the full 96 top and bottom to hold them, which is
     the room the scatter was using out at the sides.

     Nothing per-chip survives: --dx, --dy and --r are all ignored, because
     three chips hand-placed on a 390 wide band is a collision waiting for the
     first phone whose text renders a few pixels wider. Flex lays them out and
     wraps them if it has to. */
  @media (max-width: 63.999rem) {
    /* Room for a strip that has wrapped to two lines, at both ends, whether it
       has or not. Where the wrap happens depends on how wide the words render,
       which is a font and a device rather than a number this file can know:
       measured here it fits at 390 and wraps at 320, and picking a breakpoint
       between them would be guessing on behalf of every phone that renders a
       few pixels wider. Reserving for the worse case costs some blue on the
       phones that do not need it and cannot land a chip on the button. */
    .cta { padding-block: calc(var(--space-9) + var(--space-5)); }

    .cta__row {
      /* Off the edge of the band. Flush read as cropped rather than placed,
         as though the strip carried on past the screen. */
      --cta-row-inset: var(--space-6);

      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: var(--space-2);
      padding-inline: var(--space-4);
    }

    .cta__row--top { top: var(--cta-row-inset); }
    .cta__row--bottom { bottom: var(--cta-row-inset); }

    /* The stagger and the tilt come off the same two numbers the wide scatter
       uses, scaled down, rather than a second set of values invented for this
       width. So the arrangement is recognisably the frame's even though the
       layout is not, and there is one place to change a chip's character.

       Both are transforms, so neither moves the row box: the strip stays the
       height flex made it and the nudges happen inside the inset above. */
    .cta__chip {
      font-size: var(--text-xs);
      padding: var(--space-1) var(--space-3);
      transform:
        translateY(calc(var(--dy) * 1.2px))
        rotate(calc(var(--r) * 0.5));
    }
  }

  /* The whole strip travels, rather than each chip in it. One distance to
     know instead of six, and the row's own width is whatever flex made it,
     which is the thing hand-placed coordinates cannot see.

     `top`/`bottom` in per cent is what pulls it to the middle of the band,
     because a per cent there reads off the band. The translate that pairs
     with it reads off the row's own height, which is what centres the row on
     that point rather than hanging it from its top edge. Two properties, two
     different reference boxes, both needed. */
  @media (max-width: 63.999rem) and (prefers-reduced-motion: no-preference) {
    .cta[data-scroll] .cta__row {
      opacity: var(--in);
    }

    .cta[data-scroll] .cta__row--top {
      top: calc((1 - var(--in)) * 50% + var(--in) * var(--cta-row-inset));
      transform:
        translateY(calc((1 - var(--in)) * -50%))
        scale(calc(var(--cta-chip-min) + (1 - var(--cta-chip-min)) * var(--in)));
    }

    .cta[data-scroll] .cta__row--bottom {
      bottom: calc((1 - var(--in)) * 50% + var(--in) * var(--cta-row-inset));
      transform:
        translateY(calc((1 - var(--in)) * 50%))
        scale(calc(var(--cta-chip-min) + (1 - var(--cta-chip-min)) * var(--in)));
    }
  }
}