/* ============================================================
   Motion — matched to bevel.health, measured from their computed styles.
   Their stack is Lenis + GSAP/ScrollTrigger (~70KB). We get the same feel
   with native CSS + a ~600 byte IntersectionObserver, keeping the budget.
   ============================================================ */

:root{
  /* Bevel's signature curve: cubic-bezier(0.19,1,0.22,1) — easeOutExpo */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  .15s;   /* nav links */
  --dur-mid:   .25s;   /* cards, small items */
  --dur-slow:  .6s;    /* primary interactions */
  --reveal:    .8s;    /* scroll reveals */
}

/* ---- Scroll reveal ---------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--reveal) var(--ease-expo),
             transform var(--reveal) var(--ease-expo);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; will-change:auto }

/* children stagger in sequence */
[data-reveal-group] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--reveal) var(--ease-expo),
             transform var(--reveal) var(--ease-expo);
}
[data-reveal-group].is-in > *{ opacity:1; transform:none }
[data-reveal-group].is-in > *:nth-child(1){ transition-delay:0ms }
[data-reveal-group].is-in > *:nth-child(2){ transition-delay:60ms }
[data-reveal-group].is-in > *:nth-child(3){ transition-delay:120ms }
[data-reveal-group].is-in > *:nth-child(4){ transition-delay:180ms }
[data-reveal-group].is-in > *:nth-child(5){ transition-delay:240ms }
[data-reveal-group].is-in > *:nth-child(6){ transition-delay:300ms }
[data-reveal-group].is-in > *:nth-child(n+7){ transition-delay:360ms }

/* ---- Micro-interactions, matched to their timings --------------------- */
.btn{
  transition:transform var(--dur-slow) var(--ease-expo),
             box-shadow var(--dur-mid) var(--ease-expo),
             background-color var(--dur-mid) var(--ease-out);
}
.btn:hover{ transform:translateY(-3px) }
.btn:active{ transform:translateY(-1px); transition-duration:.1s }

.nav a{ transition:color var(--dur-fast) ease }

.txc__media,
.screen__frame,
.path,
.soft,
.card,
.step{ transition:transform var(--dur-mid) var(--ease-out),
                  box-shadow var(--dur-mid) var(--ease-out) }

.ww__item{ transition:opacity var(--dur-mid) var(--ease-out) }
.badge{ transition:transform var(--dur-mid) var(--ease-expo) }

/* ---- Hero and navigation choreography -------------------------------- */
.header{
  position:fixed !important;
  transition:transform .7s var(--ease-expo), opacity .45s ease;
  will-change:transform;
}
.header--hidden{ transform:translateY(-130%); opacity:0 }

.hero5__sky{
  transform-origin:50% 60%;
  will-change:transform;
}
.hero5__phone{ will-change:transform }

.motion-ready .header__inner,
.motion-ready .hero5__kicker,
.motion-ready .hero5 h1,
.motion-ready .hero5__sub,
.motion-ready .hero5__cta,
.motion-ready .hero5__proof,
.motion-ready .hero5__fine{
  opacity:0;
  transform:translateY(24px);
}
.motion-ready .header__inner{ transform:translateY(-22px) }
.motion-ready .hero5__phone{ opacity:0 }

.motion-entered .header__inner,
.motion-entered .hero5__kicker,
.motion-entered .hero5 h1,
.motion-entered .hero5__sub,
.motion-entered .hero5__cta,
.motion-entered .hero5__proof,
.motion-entered .hero5__fine,
.motion-entered .hero5__phone{
  opacity:1;
  transform:none;
  transition:opacity .9s var(--ease-expo), transform 1.15s var(--ease-expo);
}
.motion-entered .header__inner{ transition-delay:.05s }
.motion-entered .hero5__kicker{ transition-delay:.12s }
.motion-entered .hero5 h1{ transition-delay:.18s }
.motion-entered .hero5__sub{ transition-delay:.26s }
.motion-entered .hero5__cta{ transition-delay:.32s }
.motion-entered .hero5__proof{ transition-delay:.38s }
.motion-entered .hero5__fine{ transition-delay:.42s }
.motion-entered .hero5__phone--left{ transition-delay:.36s }
.motion-entered .hero5__phone--main{ transition-delay:.28s }
.motion-entered .hero5__phone--right{ transition-delay:.44s }

.pillar__media img,
.appsec__screens .screens{
  transform:translateY(var(--media-shift, 0));
  transition:transform .15s linear;
  will-change:transform;
}

/* ---- Respect the setting ---------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .btn:hover, .txc__media:hover{ transform:none }
  .header{ position:absolute !important; transform:none !important; opacity:1 !important }
  .motion-ready .header__inner,
  .motion-ready .hero5__kicker,
  .motion-ready .hero5 h1,
  .motion-ready .hero5__sub,
  .motion-ready .hero5__cta,
  .motion-ready .hero5__proof,
  .motion-ready .hero5__fine,
  .motion-ready .hero5__phone{ opacity:1 !important; transform:none; transition:none }
  .pillar__media img, .appsec__screens .screens{ transform:none !important; transition:none }
}

/* ---- Progress charts: draw-in lines, growing bars, filling macros ----- */
.pg__chart .pg-line{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease-expo) .15s;
}
.pg__chart.is-in .pg-line{ stroke-dashoffset:0 }
.pg__chart .pg-area,
.pg__chart .pg-target,
.pg__chart .pg-band{ opacity:0; transition:opacity .8s ease 1s }
.pg__chart.is-in .pg-area{ opacity:.08 }
.pg__chart.is-in .pg-target{ opacity:1 }
.pg__chart.is-in .pg-band{ opacity:.06 }
.pg__chart .pg-dot{
  transform-box:fill-box; transform-origin:center;
  transform:scale(0); transition:transform .5s var(--ease-expo) 1.4s;
}
.pg__chart.is-in .pg-dot{ transform:scale(1) }
.pg__chart .pg-bar{
  transform-box:fill-box;
  transform:scaleY(0);
  transition:transform .9s var(--ease-expo);
}
.pg__chart .pg-bar--down{ transform-origin:top }
.pg__chart .pg-bar--up{ transform-origin:bottom }
.pg__chart.is-in .pg-bar{ transform:scaleY(1) }
.pg__chart .pg-fade{ opacity:0; transition:opacity .6s ease .9s }
.pg__chart.is-in .pg-fade{ opacity:1 }
.pg__nutrition .pg__mbar span{
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-expo) .2s;
}
.pg__nutrition.is-in .pg__mbar span{ transform:scaleX(1) }
@media (prefers-reduced-motion: reduce){
  .pg__chart .pg-line{ stroke-dasharray:none; stroke-dashoffset:0; transition:none }
  .pg__chart .pg-area{ opacity:.08 !important; transition:none }
  .pg__chart .pg-target{ opacity:1 !important; transition:none }
  .pg__chart .pg-band{ opacity:.06 !important; transition:none }
  .pg__chart .pg-dot, .pg__chart .pg-bar{ transform:none !important; transition:none }
  .pg__chart .pg-fade{ opacity:1 !important; transition:none }
  .pg__nutrition .pg__mbar span{ transform:none !important; transition:none }
}