/* Circle of 100 — premium motion layer.
 * Emil-Kowalski-style entrances: things ENTER with a decelerating ease-out,
 * a short rise, and a whisper of blur. Restrained, GPU-friendly, one-time.
 *
 * The initial hidden state is gated on html.js-motion, which is only set by an
 * inline <head> script when motion is allowed. So with JS off or reduced-motion
 * on, nothing is ever hidden — the page renders exactly as before.
 */

:root {
  --jt-ease: cubic-bezier(0.16, 1, 0.3, 1);       /* signature ease-out */
  --jt-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);  /* for width/size glides */
  --jt-rise: 20px;
  --jt-dur: 0.82s;
}

/* Progress/thermometer fills glide whenever their width changes. */
.dash-bar-fill,
.dash-mini-bar-fill,
[data-jt-width] {
  transition: width 1.1s var(--jt-ease-soft) 0.12s;
}

/* Dynamically-rendered companion rows rise in with a stagger. */
@keyframes jtFadeUp {
  from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  to   { opacity: 1; transform: none;             filter: none; }
}

/* ---- Scroll reveal ---- */
html.js-motion .eyebrow,
html.js-motion h1,
html.js-motion h2,
html.js-motion .sub,
html.js-motion .lede,
html.js-motion .circle-tile,
html.js-motion .kit-card,
html.js-motion .faq-item,
html.js-motion .gift-card,
html.js-motion .dash-stat-card,
html.js-motion .dash-frame,
html.js-motion .signup-form,
html.js-motion .step,
html.js-motion .gift-summary,
html.js-motion .testimonial {
  opacity: 0;
  transform: translateY(var(--jt-rise));
  filter: blur(6px);
  transition:
    opacity var(--jt-dur) var(--jt-ease),
    transform var(--jt-dur) var(--jt-ease),
    filter var(--jt-dur) var(--jt-ease);
  transition-delay: var(--jt-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.js-motion .eyebrow.is-in,
html.js-motion h1.is-in,
html.js-motion h2.is-in,
html.js-motion .sub.is-in,
html.js-motion .lede.is-in,
html.js-motion .circle-tile.is-in,
html.js-motion .kit-card.is-in,
html.js-motion .faq-item.is-in,
html.js-motion .gift-card.is-in,
html.js-motion .dash-stat-card.is-in,
html.js-motion .dash-frame.is-in,
html.js-motion .signup-form.is-in,
html.js-motion .step.is-in,
html.js-motion .gift-summary.is-in,
html.js-motion .testimonial.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* A gentle, tactile lift on the interactive tiles/cards. */
html.js-motion .circle-tile,
html.js-motion .dash-stat-card {
  transition:
    opacity var(--jt-dur) var(--jt-ease),
    transform 0.42s var(--jt-ease-soft),
    filter var(--jt-dur) var(--jt-ease),
    box-shadow 0.42s var(--jt-ease-soft);
}
html.js-motion .circle-tile.is-in:hover {
  transform: translateY(-3px);
}

/* Belt-and-suspenders: if js-motion somehow got set under reduced-motion,
   reveal everything and kill all motion. */
@media (prefers-reduced-motion: reduce) {
  html.js-motion .eyebrow,
  html.js-motion h1,
  html.js-motion h2,
  html.js-motion .sub,
  html.js-motion .lede,
  html.js-motion .circle-tile,
  html.js-motion .kit-card,
  html.js-motion .faq-item,
  html.js-motion .gift-card,
  html.js-motion .dash-stat-card,
  html.js-motion .dash-frame,
  html.js-motion .signup-form,
  html.js-motion .step,
  html.js-motion .gift-summary,
  html.js-motion .testimonial {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .dash-bar-fill,
  .dash-mini-bar-fill,
  [data-jt-width],
  .companion-row {
    transition: none !important;
    animation: none !important;
  }
}