/* First-scroll reveal (see reveal.js for which content gets which type). Only active once the script has
   added .reveal-on to <html>; each element returns to its normal styles after its entrance. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on {
    --reveal-ease: cubic-bezier(.22, 1, .36, 1);
    --reveal-pop: cubic-bezier(.34, 1.4, .64, 1);
  }
  /* Side entrances must never create a horizontal scrollbar. */
  .reveal-on body { overflow-x: clip; }

  .reveal-on [data-reveal] {
    --reveal-at: calc(var(--reveal-base, 0ms) + var(--reveal-delay, 0ms));
    transition: opacity .7s var(--reveal-ease) var(--reveal-at), transform .9s var(--reveal-ease) var(--reveal-at);
  }

  /* Title words slide up out of a clipping mask. */
  x-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .08em .16em; margin-block: -.08em -.16em; }
  x-w { display: inline-block; }
  .reveal-on [data-reveal] x-w {
    transform: translate3d(0, 110%, 0);
    transition: transform .9s var(--reveal-ease) calc(var(--reveal-at) + var(--word) * 40ms);
  }
  .reveal-on [data-reveal].is-revealed x-w { transform: none; }

  /* heading: label first, title words next, supporting copy last. The block itself does not move. */
  .reveal-on [data-reveal="heading"] .eyebrow,
  .reveal-on [data-reveal="heading"] p,
  .reveal-on [data-reveal="heading"] .button {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .7s var(--reveal-ease) var(--reveal-at), transform .7s var(--reveal-ease) var(--reveal-at);
  }
  .reveal-on [data-reveal="heading"] p { transition-delay: calc(var(--reveal-at) + 280ms); }
  .reveal-on [data-reveal="heading"] .button { transition-delay: calc(var(--reveal-at) + 420ms); }
  .reveal-on [data-reveal="heading"].is-revealed :is(.eyebrow, p, .button) { opacity: 1; transform: none; }

  /* rise: short fade-up for copy and buttons. In a hero, the copy waits for the title words. */
  .reveal-on [data-reveal="rise"] { opacity: 0; transform: translate3d(0, 16px, 0); }
  .reveal-on :is(.hero-copy, .ats-hero-copy) > [data-reveal="words"] { --reveal-base: 80ms; }
  .reveal-on :is(.hero-copy, .ats-hero-copy) > [data-reveal="rise"]:not(.eyebrow) { --reveal-base: 320ms; }

  /* card: lifts in with a slight scale; rows cascade (delay set by the script). */
  .reveal-on [data-reveal="card"] { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); transform-origin: 50% 100%; }

  /* step: the card rises, then its icon pops. */
  .reveal-on [data-reveal="step"] { opacity: 0; transform: translate3d(0, 22px, 0); }
  .reveal-on [data-reveal="step"] .step-icon {
    opacity: 0;
    transform: scale(.55);
    transition: opacity .4s ease calc(var(--reveal-at) + 260ms), transform .6s var(--reveal-pop) calc(var(--reveal-at) + 260ms);
  }
  .reveal-on [data-reveal="step"].is-revealed .step-icon { opacity: 1; transform: none; }

  /* Pricing: copy and card meet in the middle. */
  .reveal-on [data-reveal="from-left"] { opacity: 0; transform: translate3d(-36px, 0, 0); }
  .reveal-on [data-reveal="from-right"] { --reveal-base: 140ms; opacity: 0; transform: translate3d(36px, 12px, 0) scale(.98); }

  /* row: brief slide for list rows. */
  .reveal-on [data-reveal="row"] { opacity: 0; transform: translate3d(-14px, 0, 0); transition-duration: .55s, .65s; }
  .reveal-on :is(.mobile-app-features, .pricing-inclusions ul) > [data-reveal="row"] { --reveal-base: 360ms; }

  /* media: image settles into place. */
  .reveal-on [data-reveal="media"] { opacity: 0; transform: scale(.96); transition-duration: 1s, 1.3s; }


  /* fade: opacity only. */
  .reveal-on [data-reveal="fade"] { opacity: 0; transition-duration: .9s; }

  .reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }
}