/* Site-wide motion. Everything here is opacity/transform only so it stays on
   the compositor, and every hidden initial state is scoped to html.sn-js —
   if the script never runs, the page is simply visible. */

/* scroll progress */
.mo-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, #9ab82a, #c8f135);
}

/* reveal-on-scroll: a slight blur clearing as it lands reads more "instrument"
   than a plain fade */
html.sn-js .mo { opacity: 0; transform: translateY(22px); filter: blur(6px); }
/* Instant, unconditional reveal. No transition and no animation, because both
   are paused in a backgrounded tab — which is exactly how content ends up
   stranded at opacity 0. Applied only to elements currently on screen, so
   reveals further down the page still play normally. */
.mo-now, html.sn-js .mo-now {
  opacity: 1 !important; transform: none !important; filter: none !important;
  transition: none !important; animation: none !important;
}
html.sn-js .mo.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .7s ease, transform .75s cubic-bezier(.22,.7,.3,1), filter .7s ease;
}
html.sn-js .mo-d1.is-in { transition-delay: .06s; }
html.sn-js .mo-d2.is-in { transition-delay: .12s; }
html.sn-js .mo-d3.is-in { transition-delay: .18s; }
html.sn-js .mo-d4.is-in { transition-delay: .24s; }

/* cards lift and grow an accent edge */
.unit, .pillar, .include-card, .guide, .contact-card, .faq-item, .coach-block, .sn-step {
  transition: transform .35s cubic-bezier(.22,.7,.3,1), background .3s, box-shadow .35s;
}
.guide:hover, .contact-card:hover, .unit:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(8,8,8,0.09);
}
.pillar { position: relative; overflow: hidden; }
.pillar::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--green, #c8f135); transition: width .5s cubic-bezier(.22,.7,.3,1);
}
.pillar:hover::after { width: 100%; }

/* buttons: press feedback + a light sweep */
.btn-primary, .closing-cta, .btn-secondary, .closing-cta-alt, .modal-submit, .btn {
  position: relative; overflow: hidden;
  transition: transform .14s cubic-bezier(.22,.7,.3,1), background .15s, box-shadow .2s;
}
.btn-primary:active, .closing-cta:active, .btn-secondary:active,
.closing-cta-alt:active, .modal-submit:active, .btn:active,
.sn-btn:active, .sn-btn-ghost:active, .sn-submit:active { transform: translateY(1px) scale(.988); }
.btn-primary::after, .closing-cta::after, .btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after, .closing-cta:hover::after, .btn:hover::after { left: 130%; }

/* ripple dot dropped at the click point */
.mo-ripple {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.45); pointer-events: none; animation: mo-ripple .55s ease-out forwards;
}
@keyframes mo-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* nav + inline links get a sweeping underline */
.site-nav a:not(.nav-cta), .footer-nav a, .nav-links a, .legal-links a { position: relative; }
.site-nav a:not(.nav-cta)::after, .footer-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--green, #c8f135); transition: right .32s cubic-bezier(.22,.7,.3,1);
}
.site-nav a:not(.nav-cta):hover::after, .footer-nav a:hover::after { right: 0; }

/* counters hold their own width so the layout does not jitter while counting */
.mo-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* section rules draw themselves in */
html.sn-js .divider, html.sn-js .hero-line {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.22,.7,.3,1);
}
html.sn-js .divider.is-in, html.sn-js .hero-line.is-in { transform: scaleX(1); }

/* the big stat figures get a soft glow as they land */
html.sn-js .stat-num.is-in { animation: mo-pop .7s cubic-bezier(.22,.7,.3,1); }
@keyframes mo-pop { 0% { transform: translateY(8px); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.sn-js .mo, html.sn-js .divider, html.sn-js .hero-line {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .mo-progress, .mo-ripple { display: none; }
  .guide:hover, .contact-card:hover, .unit:hover { transform: none; }
  html.sn-js .stat-num.is-in { animation: none; }
}