/* RAYYAF motion system v1 — native CSS, no libraries. Hidden states exist only under html.mo (set by a tiny head script and removed if motion.js never loads), so content is always visible without JS or with reduced motion. */
:root{--mo-fast:180ms;--mo-med:300ms;--mo-slow:560ms;--mo-ease:cubic-bezier(.2,.7,.2,1);--mo-dist:18px;--mo-stagger:70ms}
@keyframes mo-draw{to{stroke-dashoffset:0}}
@keyframes mo-in{from{opacity:0}to{opacity:1}}
@keyframes mo-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes mo-lower{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* 1. section reveals (replaces the old always-hidden .reveal rule) */
.mo .reveal{opacity:0;translate:0 var(--mo-dist);transition:opacity var(--mo-slow) var(--mo-ease),translate var(--mo-slow) var(--mo-ease)}
.mo .reveal.in{opacity:1;translate:none}
.mo .reveal.lead{transition-delay:80ms}
.mo .reveal.bento,.mo .reveal.ind{opacity:1;translate:none}
/* grouped cards: one trigger, staggered children (index set by motion.js via --i) */
.mo .bento>.tile,.mo .ind>a,.mo .proof>div,.mo .facts>div,.mo .offers>.offer{opacity:0;translate:0 var(--mo-dist);transition:opacity var(--mo-slow) var(--mo-ease),translate var(--mo-slow) var(--mo-ease),background .3s var(--mo-ease);transition-delay:calc(var(--i,0)*var(--mo-stagger))}
.mo .bento.in>.tile,.mo .ind.in>a,.mo .proof.in>div,.mo .facts.in>div,.mo .offers.in>.offer{opacity:1;translate:none}
/* founder portrait: restrained image settle */
.portrait{overflow:hidden}
.mo .portrait img{opacity:0;scale:1.05;transition:opacity 700ms var(--mo-ease),scale 1100ms var(--mo-ease)}
.mo .portrait.in img{opacity:1;scale:1}

/* 2. hero line-drawing sequence (finite, ~1.2 s, then settles; CSS-only so it cannot block the heading or the CTA) */
.mo .hero-art .d{stroke-dasharray:1;stroke-dashoffset:1;animation:mo-draw var(--dur,.5s) var(--mo-ease) var(--d,0s) forwards}
.mo .hero-art .f{opacity:0;animation:mo-in .45s ease var(--d,0s) forwards}
.mo .hero-art .ms circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:mo-pop .35s var(--mo-ease) var(--d,.6s) forwards}
.mo .hero-art .hook{animation:mo-lower .5s var(--mo-ease) .8s both}
.mo .hero-art .prog{stroke-width:1.6}

/* 3. cards: hover and keyboard focus (pointer devices only; nothing depends on hover) */
.bento .tile,.offer{transition:background .3s var(--mo-ease),transform var(--mo-med) var(--mo-ease),box-shadow var(--mo-med) var(--mo-ease)}
.bento .tile:focus-visible,.offer:focus-within{outline-offset:-3px}
@media(hover:hover){
 .bento .tile:hover,.offer:hover{transform:translateY(-3px);box-shadow:inset 0 -2px 0 var(--gold);z-index:1}
 .bento .tile:hover .tlink,.offer:hover .tlink{gap:13px}
 .bento .tile:hover svg.ic{transform:translateY(-2px)}
}
.bento .tile:focus-visible .tlink,.offer:focus-within .tlink{gap:13px}
.tile svg.ic{transition:transform var(--mo-med) var(--mo-ease)}
.ind a:focus-visible svg{transform:scale(1.04)}

/* 4. methodology connector: progress line follows the active step (value set by the page script) */
.meth-tabs{position:relative}
.meth-tabs::before,.meth-tabs::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.meth-tabs::before{background:var(--line)}
.meth-tabs::after{background:var(--gold);transform:scaleY(var(--p,.2));transform-origin:top;transition:transform var(--mo-slow) var(--mo-ease)}
.meth-tabs button{padding-left:20px;transition:color .2s,padding-left var(--mo-med) var(--mo-ease)}
.meth-tabs button[aria-selected=true]{padding-left:30px}

/* 5. navigation and buttons */
.menu>a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--mo-med) var(--mo-ease)}
.menu>a[aria-current=page]::after{transform:none}
.menu>a:not(.btn):hover::after,.menu>a:not(.btn):focus-visible::after{transform:scaleX(1)}
.btn{transition:background var(--mo-fast),color var(--mo-fast),border-color var(--mo-fast),box-shadow var(--mo-fast),transform 120ms}
@media(hover:hover){.btn.gold:hover{box-shadow:0 8px 20px rgba(181,154,104,.25)}}
@media(max-width:900px){.mo .menu.open>*{animation:mo-in .35s ease both}.mo .menu.open>*:nth-child(2){animation-delay:40ms}.mo .menu.open>*:nth-child(3){animation-delay:80ms}.mo .menu.open>*:nth-child(4){animation-delay:120ms}.mo .menu.open>*:nth-child(5){animation-delay:160ms}.mo .menu.open>*:nth-child(6){animation-delay:200ms}.mo .menu.open>*:nth-child(7){animation-delay:240ms}.mo .menu.open>*:nth-child(8){animation-delay:280ms}.mo .menu.open>*:nth-child(n+9){animation-delay:320ms}}

/* 6. reduced motion and print: show everything, no movement */
@media(prefers-reduced-motion:reduce){
 .mo .reveal,.mo .bento>.tile,.mo .ind>a,.mo .proof>div,.mo .facts>div,.mo .offers>.offer,.mo .portrait img{opacity:1!important;translate:none!important;scale:1!important}
 .mo .hero-art .d{stroke-dashoffset:0!important}.mo .hero-art .f,.mo .hero-art .ms circle,.mo .hero-art .hook{opacity:1!important}
 .bento .tile:hover,.offer:hover{transform:none}
}
@media print{.mo .reveal,.mo .bento>.tile,.mo .ind>a,.mo .proof>div,.mo .facts>div,.mo .offers>.offer,.mo .portrait img{opacity:1!important;translate:none!important;scale:1!important}}