/* Homepage motion. Everything is scoped to html.m-on, which motion.js only adds when
   motion is allowed, so the page is complete and visible with JS off or in ?static. */
.m-on [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.m-on [data-rv="left"] { transform: translateX(-26px); }
.m-on [data-rv="right"] { transform: translateX(26px); }
.m-on [data-rv="zoom"] { transform: scale(.96); }
.m-on [data-rv].in { opacity: 1; transform: none; }

/* scroll progress under the nav */
.m-on .nav::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--p, 0%); background: linear-gradient(90deg, var(--gold), #E0B75A); transition: width .12s linear; }
.nav { position: sticky; }

/* hero: coach card, floating panels, voice wave */
.m-on .stage .meo { animation: rise 1s cubic-bezier(.22,.61,.36,1) both .15s; }
.m-on .stage .float { animation: rise .9s cubic-bezier(.22,.61,.36,1) both .55s, float 7s ease-in-out 1.6s infinite; }
.m-on .stage .f-streak { animation-delay: .75s, 2.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.m-on .wave b { animation: wave 1.1s ease-in-out infinite; transform-origin: center bottom; }
.m-on .wave b:nth-child(2) { animation-delay: .12s; }
.m-on .wave b:nth-child(3) { animation-delay: .24s; }
.m-on .wave b:nth-child(4) { animation-delay: .36s; }
.m-on .wave b:nth-child(5) { animation-delay: .48s; }
.m-on .wave b:nth-child(6) { animation-delay: .6s; }
.m-on .wave b:nth-child(7) { animation-delay: .72s; }
@keyframes wave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.25); } }
.m-on .meo .tag i { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(124, 211, 154, .55); } 70% { opacity: .85; box-shadow: 0 0 0 7px rgba(124, 211, 154, 0); } }

/* the coach line types itself in */
.m-on .say .w { opacity: 0; transition: opacity .35s ease; }
.m-on .say .w.on { opacity: 1; }
.m-on .say.typing p::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -.12em; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* numbers count up */
.m-on .proof .it b { font-variant-numeric: tabular-nums; }

/* cards and buttons */
.m-on .card, .m-on .plan, .m-on .story, .m-on .bdg, .m-on .step { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.m-on .card:hover, .m-on .story:hover, .m-on .bdg:hover, .m-on .step:hover { transform: translateY(-4px); }
.m-on .plan:hover { transform: translateY(-6px); }
.m-on .btn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease; }
.m-on .btn:active { transform: scale(.97); }
.m-on .nav-links a { position: relative; transition: color .25s ease; }
.m-on .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.m-on .nav-links a:hover::after { transform: scaleX(1); }
.m-on .logo { transition: transform .3s cubic-bezier(.34,1.4,.5,1); }
.m-on .logo:hover { transform: translateY(-1px); }

/* pricing switch: the price fades through instead of snapping */
.m-on .plan .price b, .m-on .plan .billed { transition: opacity .22s ease, transform .22s ease; }
.m-on .plan .price b.swap, .m-on .plan .billed.swap { opacity: 0; transform: translateY(-5px); }

/* faq answers slide open */
.m-on .q > div, .m-on .q p { transition: opacity .3s ease; }
.m-on .q[open] > div, .m-on .q[open] p { animation: drop .35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* sticky bottom bar */
.m-on #sticky { transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .m-on [data-rv], .m-on [data-rv].in { opacity: 1; transform: none; transition: none; }
  .m-on .stage .meo, .m-on .stage .float, .m-on .wave b, .m-on .meo .tag i { animation: none; }
  .m-on .say .w { opacity: 1; }
  .m-on .nav::after { display: none; }
}