/* Motion language for the public pages (motion.js adds html.motion and .is-in).
   Without JavaScript or with reduced motion nothing here applies and all content is visible.
   Only transform, opacity and clip-path animate. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-reveal: 850ms;
  --stagger: 70ms;
}

/* Default: supporting text and blocks fade in with a short rise. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

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

/* Headlines rise from behind a soft mask. */
.motion [data-reveal="headline"],
.motion [data-reveal-stagger] > h1,
.motion [data-reveal-stagger] > h2 {
  transform: translateY(18px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out),
    clip-path 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.motion [data-reveal="headline"].is-in,
.motion [data-reveal-stagger] > h1.is-in,
.motion [data-reveal-stagger] > h2.is-in {
  clip-path: inset(-10% -4% -12% -4%);
}

/* Paragraphs following a headline wait a beat longer. */
.motion [data-reveal-stagger] > p {
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * var(--stagger) + 90ms);
}

/* Key numbers settle with a gentle scale. */
.motion [data-reveal="scale"] {
  transform: scale(.96);
  transform-origin: left bottom;
  transition-duration: 700ms;
  transition-delay: 160ms;
}

/* Hairlines draw in from the left. */
.motion [data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}

.motion [data-reveal="line"].is-in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Keep the pricing card hover lift once revealed. */
@media (hover: hover) and (pointer: fine) {
  .motion .tier.is-in:hover {
    transform: translateY(-3px);
    transition-delay: 0s;
    transition-duration: .2s;
  }
}