/* ============================================================
STANDARD MOTION LAYER v1 — reusable across every site
Drop-in:
Universal: logo intro overlay, scroll-reveal choreography,
hover micro-interactions, smooth anchors.
============================================================ */
:root{
--mo-intro-bg:#0e1116; /* override per site to match brand */
--mo-intro-fg:#ffffff;
--mo-accent:#5b8cff; /* override per site */
--mo-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
/* ---------- LOGO INTRO OVERLAY ---------- */
.mo-intro{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
background:var(--mo-intro-bg);
transition:opacity .55s var(--mo-ease), transform .7s var(--mo-ease), visibility .55s;
}
.mo-intro__logo{
position:relative;
color:var(--mo-intro-fg);
font-weight:800;letter-spacing:.18em;text-transform:uppercase;
font-size:clamp(18px,4.2vw,34px);
opacity:0;transform:translateY(8px);
animation:mo-logo-in .7s var(--mo-ease) .08s forwards;
}
/* accent sweep line under the wordmark */
.mo-intro__logo::after{
content:"";position:absolute;left:0;bottom:-12px;height:2px;width:0;
background:var(--mo-accent);
animation:mo-sweep .6s var(--mo-ease) .5s forwards;
}
.mo-intro.is-leaving{opacity:0;transform:translateY(-12px);visibility:hidden}
@keyframes mo-logo-in{
0%{opacity:0;transform:translateY(10px);letter-spacing:.42em;filter:blur(4px)}
100%{opacity:1;transform:translateY(0);letter-spacing:.18em;filter:blur(0)}
}
@keyframes mo-sweep{to{width:100%}}
/* ---------- SCROLL REVEAL CHOREOGRAPHY ---------- */
[data-mo-reveal]{
opacity:0;transform:translateY(22px);
transition:opacity .7s var(--mo-ease), transform .7s var(--mo-ease);
transition-delay:var(--mo-delay,0ms);
will-change:opacity,transform;
}
[data-mo-reveal].is-in{opacity:1;transform:none}
/* ---------- HOVER MICRO-INTERACTIONS ---------- */
[data-mo-lift]{transition:transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease)}
[data-mo-lift]:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
/* ---------- REDUCED MOTION: disable everything ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.mo-intro{display:none!important}
[data-mo-reveal]{opacity:1!important;transform:none!important;transition:none}
.mo-intro__logo,.mo-intro__logo::after{animation:none}
}