/* Consumer Insights · transitions.dev / Texts reveal. */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* Adapt the hooks to independent page units, retaining flex/grid/button sizing.
   The 80ms rhythm matches the approved home-page entrance. */
.wy-consumer-insights .ci-load-item.t-stagger-line {
  --stagger-stagger: 80ms;
  display: var(--ci-load-display, block);
  transition-delay: calc(var(--stagger-stagger) * var(--ci-load-order, 0));
}
.wy-consumer-insights .ci-load-item.t-stagger-line.is-shown {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.wy-consumer-insights .ci-load-item.ci-load-instant { transition: none !important; }

/* Only fade the fixed navigation and the full-bleed hero backdrop. */
.wy-consumer-insights :is(.nav__inner, .ci-banner-bg).ci-load-item {
  --stagger-distance: 0px;
  --stagger-blur: 0px;
}
.wy-consumer-insights .nav__inner.ci-load-item { --stagger-dur: 250ms; }
.wy-consumer-insights .ci-banner-bg.ci-load-item { --stagger-dur: 400ms; }

/* Reserve final layout from the first paint, before the deferred script runs. */
@media (prefers-reduced-motion: no-preference) {
.ci-load-armed:not(.ci-load-ready) .wy-consumer-insights :is(
  #top .shv1__h, #top .shv1__sub, #top .shv1__btn,
  main .sec-head, #pain .wy-data-card, .ci-values > article,
  .ci-feature__copy, .ci-feature__media, .ci-reasons > article,
  .faq__item, #cta .ctaE__grid > div,
  .wy-footer .footer__grid > *, .wy-footer .footer__bottom
) {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: none;
}
.ci-load-armed:not(.ci-load-ready) .wy-consumer-insights :is(#nav .nav__inner, .ci-banner-bg) {
  opacity: 0;
  transition: none;
}
}
html:not(.ci-load-armed) .wy-consumer-insights .ci-load-item.t-stagger-line {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ci-load-armed .wy-consumer-insights .ci-load-item.t-stagger-line {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }
}