/* Motion.
 *
 * The page was static below the hero: one fade per section and nothing else,
 * which reads as a brochure rather than as a product that does something.
 *
 * The rule everything here obeys: **motion earns its place by explaining
 * something, and costs nothing when it is refused.** Every effect is opacity
 * and transform only — no layout property is ever animated, so nothing here can
 * cause a reflow or drop a frame on a long page. All of it is off under
 * `prefers-reduced-motion`, and all of it is a no-op with JavaScript disabled,
 * because the hidden state lives behind `@media (scripting: enabled)` in
 * `base.css` and behind `[data-in]` here.
 */

/* ================================================================== *
 * 1. Stagger
 *
 * A list that arrives all at once is one event; a list that arrives in order is
 * a sentence. 45ms apart — far enough to read as sequence, near enough that the
 * last item is in under a third of a second and nobody is kept waiting for a
 * feature list.
 *
 * The delay is a custom property set by the JS, so a block with fourteen
 * children does not need fourteen selectors.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-stagger] > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.5s var(--ease-out),
      transform 0.5s var(--ease-out);
    transition-delay: var(--stagger-delay, 0ms);
  }

  [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================== *
 * 2. The plan cards
 *
 * A pointer over a card that does nothing tells the visitor the card is not
 * for pressing, which on a pricing page is exactly wrong. 2px and a shadow —
 * the same distance the buttons travel, so the page has one physics.
 *
 * `translateY` and not `scale`: scaling a card resamples its text for the
 * duration of the transition, and 15px type going soft is the tell that
 * separates a cheap page from an expensive one.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .plan {
    transition:
      transform 0.25s var(--ease),
      box-shadow 0.25s var(--ease),
      border-color 0.25s var(--ease);
  }

  @media (hover: hover) and (min-width: 900px) {
    .plan:hover {
      transform: translateY(-2px);
      box-shadow: var(--lift-2);
      border-color: var(--ink-faint);
    }

    .plan--featured:hover {
      box-shadow: var(--lift-3);
    }
  }
}

/* ================================================================== *
 * 3. The signature rule
 *
 * A hairline that draws itself across the page as a section arrives. It is the
 * one decorative thing on the site and it is here because it is the product's
 * own gesture: a line being written, left to right, at the speed a sentence
 * lands.
 *
 * `scaleX` on a 1px element, not a width animation — width is layout and would
 * be measured every frame.
 * ================================================================== */

.rule-draw {
  display: block;
  height: 1px;
  background: var(--paper-edge);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .rule-draw {
    transform: scaleX(0);
    transition: transform 0.9s var(--ease-out);
  }

  .rule-draw.is-in {
    transform: scaleX(1);
  }
}

/* ================================================================== *
 * 4. Headlines
 *
 * A large headline rising a few pixels as it arrives is the cheapest way to
 * make a page feel built rather than printed. 14px and 0.6s — slower and
 * further than the body text around it, because a bigger object moving at the
 * same speed as a smaller one reads as faster than it is.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
  }

  [data-rise].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================== *
 * 5. The counters
 *
 * Numbers that count up when they arrive. Only on figures that are *quantities*
 * — an allowance, a word count — and never on a price: a price ticking upwards
 * in front of somebody deciding whether to pay it is a small hostile joke.
 *
 * The value is animated by the JS; this only stops the digits from reflowing
 * the line as they change width.
 * ================================================================== */

[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ================================================================== *
 * 6. Links that are worth following
 *
 * An underline that grows from the left on hover, rather than appearing whole.
 * It is two pseudo-element-free lines of CSS and it is the difference between
 * a link that responds and a link that changes colour.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .navlink,
  .site-footer a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0% 1px;
    transition:
      background-size 0.28s var(--ease-out),
      color 0.2s var(--ease);
  }

  .navlink:hover,
  .navlink:focus-visible,
  .site-footer a:hover,
  .site-footer a:focus-visible {
    background-size: 100% 1px;
  }
}