/* FirstChair motion. Every effect has a job:
   - Hero words rise in once, in reading order, so the eye lands on the promise first.
   - Sections fade up as they arrive, in small staggered groups, so the page reads in order.
   - The CRM headline fills letter by letter with scroll, the same effect as the CRM's own site.
   - Big images ease from a slight zoom to rest as they enter, so photos feel alive, not pasted.
   - The 150+ counts up when seen, to make the proof land.
   - Moving rows pause under the cursor so a card can be read.
   - Buttons and cards answer touch with a small press or lift.
   Reduced motion: everything is shown at rest with no movement. */

/* fade up on arrival (only when JS is running, so the page is never stuck hidden) */
html.js .fx{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .fx.in{opacity:1;transform:none}

/* hero: words rise in, then the rest follows */
html.js .w{display:inline-block;opacity:0;transform:translateY(.32em);animation:fcWord .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)}
html.js .hx{opacity:0;animation:fcUp .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)}
html.js.hero-done .w,html.js.hero-done .hx{opacity:1;transform:none;animation:none}
@keyframes fcWord{to{opacity:1;transform:none}}
@keyframes fcUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* hero backgrounds breathe very slowly, like footage */
html.js .hero .bg{animation:fcBreathe 18s ease-in-out infinite alternate;transform-origin:70% 40%}
html.js .chero .glow,html.js .hero .glow{animation:fcGlow 12s ease-in-out infinite alternate}
@keyframes fcBreathe{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes fcGlow{from{opacity:.75}to{opacity:1}}

/* CRM headline: letter fill, same as the CRM homepage */
html.js .ch{color:rgba(3,3,3,.14);transition:color .35s ease}
html.js .ch.on{color:var(--ink)}
html.js .crm .btext p,html.js .crm .btext .ctas{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
html.js .crm .btext.done p{opacity:1;transform:none}
html.js .crm .btext.done .ctas{opacity:1;transform:none;transition-delay:.12s}

/* images settle as they enter (driven by scroll in motion.js) */
.bimg,.stage,.spot{will-change:transform}

/* moving rows pause under the cursor */
.marquee:hover .track{animation-play-state:paused}

/* touch feedback */
.btn:active{transform:scale(.97)}
.btn{transition:background .15s,border-color .15s,transform .12s}
.door .mark{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.door:hover .mark{transform:translateY(-3px) rotate(-6deg)}
.way,.icard,.q,.lc{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.way:hover,.icard:hover,.lc:hover,html.js .way.in:hover,html.js .icard.in:hover,html.js .lc.in:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);transition-delay:0ms}
.q:hover,html.js .q.in:hover{transform:translateY(-3px);transition-delay:0ms}

/* FAQ answers slide open */
details[open] .a{animation:fcUp .35s cubic-bezier(.2,.7,.2,1)}

/* Mastery join bar waits until you've seen the hero */
html.js .joinbar{transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html.js .joinbar.up{transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .fx,html.js .w,html.js .hx{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  html.js .hero .bg,html.js .glow{animation:none!important}
  html.js .ch{color:inherit!important}
  html.js .crm .btext p,html.js .crm .btext .ctas{opacity:1!important;transform:none!important}
  html.js .joinbar{transform:none!important}
  .bimg,.stage,.spot{transform:none!important}
}