/* motion.css — maincharacter.com motion language. Pair with motion.js.  Values as observed; see research/maincharacter_motion_spec.md. */

:root{ --mo-ease:cubic-bezier(.16,1,.3,1); --mo-back:cubic-bezier(.34,1.56,.64,1); --mo-ui:cubic-bezier(.4,0,.2,1); --mo-reveal-d:.9s; --mo-reveal-y:28px; --mo-marquee-d:38s;
}

/* Reveal */
html.js [data-reveal]{ opacity:0; transform:translateY(var(--mo-reveal-y)); will-change:opacity,transform; transition:opacity var(--mo-reveal-d) var(--mo-ease),            transform var(--mo-reveal-d) var(--mo-ease); transition-delay:var(--mo-delay,0ms);
}
html.js [data-reveal].is-visible{opacity:1;transform:none}

html.js [data-reveal="pop"]{ transform:translateY(34px) scale(.94); transition:opacity .55s var(--mo-ease),transform .7s var(--mo-back); transition-delay:var(--mo-delay,0ms);
}
html.js [data-reveal="pop"].is-visible{transform:translateY(0) scale(1)}

html.js [data-reveal="focus"]{ filter:blur(14px);transform:scale(1.015); transition:opacity 1.1s var(--mo-ease),filter 1.1s var(--mo-ease),transform 1.1s var(--mo-ease); transition-delay:var(--mo-delay,0ms);
}
html.js [data-reveal="focus"].is-visible{filter:blur(0);transform:scale(1)}

html.js [data-reveal="fade"]{transform:none}

/* Split text */
html.js [data-split] .mo-line{display:block;overflow:hidden}
html.js [data-split] .mo-word{display:inline-block;overflow:hidden;vertical-align:top}
html.js [data-split] .mo-in{ display:inline-block;opacity:0;transform:translateY(115%); transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease); transition-delay:var(--mo-delay,0ms);
}
html.js [data-split].is-visible .mo-in{opacity:1;transform:translateY(0)}

/* Marquee */
[data-marquee]{overflow:hidden;position:relative}
[data-marquee]>.mo-track{display:flex;width:max-content;animation:var(--mo-marquee-d) linear infinite mo-marquee}
[data-marquee]>.mo-track>*{display:flex;flex:none}
[data-marquee][data-marquee-fade]{ -webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);         mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);
}
@keyframes mo-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}

/* Parallax */
html.js [data-parallax]{will-change:transform}

/* Nav */
[data-nav]{transition:background-color .3s var(--mo-ui),border-color .3s var(--mo-ui),backdrop-filter .3s var(--mo-ui);border-bottom:1px solid transparent}
[data-nav].is-scrolled{ background:rgba(246,243,238,.92); border-bottom-color:rgba(16,16,16,.1); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* Hovers */
.mo-cta{display:inline-flex;align-items:center;gap:8px;transition:gap .15s var(--mo-ui),transform .15s var(--mo-ui)}
.mo-cta:hover{gap:12px}
.mo-pill{transition:transform .15s var(--mo-ui)}
.mo-pill:hover{transform:scale(1.04)}
.mo-link{transition:color .15s var(--mo-ui)}
.mo-card{transition:transform .4s var(--mo-ease),box-shadow .4s,border-color .4s}
.mo-card:hover{transform:translateY(-4px);box-shadow:0 2px 8px #1028500f,0 24px 64px #1028501f}
.mo-cta-pop{transition:transform .35s var(--mo-back),box-shadow .35s}
.mo-cta-pop:hover{transform:scale(1.06) rotate(-1deg);box-shadow:0 14px 44px #155fc459}
.mo-cta-pop:active{transform:scale(.97)}

/* Ambient */
.mo-float{animation:8s ease-in-out infinite mo-float}
@keyframes mo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Counters */
[data-count]{font-variant-numeric:tabular-nums}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ *,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important} html.js [data-reveal],html.js [data-split] .mo-in{opacity:1;transform:none;filter:none} html.js [data-parallax]{transform:none!important}
}