/* Entrance motion for the tool pages (tracking, calculator).
   Only active when motion.js has added html.motion-ready, so nothing stays hidden without JavaScript,
   and never when the visitor prefers reduced motion. Uses the individual translate/scale properties,
   so it doesn't fight elements that are positioned with transform (e.g. the centred CTA button). */

:root { --fxl-ease: cubic-bezier(.2, .7, .2, 1); }

/* page title: headline word by word, then label and description */
html.motion-ready .fxl-word { animation: fxl-word-in 900ms var(--fxl-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes fxl-word-in {
  from { opacity: 0; translate: 0 .45em; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; filter: none; }
}

/* scroll reveals */
html.motion-ready [data-reveal] {
  opacity: 0; translate: 0 28px;
  transition: opacity 700ms var(--fxl-ease) var(--rd, 0ms), translate 800ms var(--fxl-ease) var(--rd, 0ms), scale 700ms var(--fxl-ease) var(--rd, 0ms);
}
html.motion-ready [data-reveal="left"] { translate: -80px 0; }
html.motion-ready [data-reveal="pop"] { translate: 0 0; scale: .9; }
html.motion-ready [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; }

/* homepage big headings: words rise in when the heading scrolls into view */
html.motion-ready .fxl-headreveal .fxl-hw { display: inline-block; opacity: 0; translate: 0 .45em; filter: blur(6px); }
html.motion-ready .fxl-headreveal.is-in .fxl-hw { animation: fxl-word-in 900ms var(--fxl-ease) both; animation-delay: calc(var(--i, 0) * 80ms); }

/* Framer writes opacity:1 inline on many elements; the reveal states must win over it */
html.motion-ready [data-reveal] { opacity: 0 !important; }
html.motion-ready [data-reveal].is-in { opacity: 1 !important; }

/* homepage hero: the background photo starts slightly larger and settles quickly (zoom-out entrance) */
html.motion-ready[data-page="home"] [data-framer-name="Hero"] [data-framer-background-image-wrapper] img,
html.motion-ready[data-page="home"] [data-framer-name="Hero"] > div > img {
  animation: fxl-hero-zoom 1100ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes fxl-hero-zoom { from { scale: 1.18; } to { scale: 1; } }