/* Motion layer styles (pairs with motion.js). Only active when html.mo is set. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.mo .rv-up.in,.mo .rv-blur.in,.mo .rv-img.in,.mo .rv-mask.in{animation:none}

/* Blur reveal — Mafhoom: blur(16px) · translateY(34px) · scale(.92) → sharp, 0.88s, 90ms stagger */
.mo .r-el{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--ri,0)*90ms);will-change:opacity,transform,filter}
.mo .r-el.r-std:not(.r-in){opacity:0;transform:translateY(34px) scale(.94);filter:blur(16px)}
.mo .r-el.r-pop:not(.r-in){opacity:0;transform:translateY(140px) scale(.9) rotate(var(--rot,0deg));filter:blur(14px);transform-origin:center top}
.mo .r-el.r-pop{transition-duration:1.1s}
.mo .r-el.r-done{transition:none;will-change:auto;transition-delay:0s}
.mo .card.r-el.r-done{transition:border-color .4s,transform .2s}
.mo .pkg.r-el.r-done{transition:transform .5s var(--ease)}

/* 3D letter flip — One Two Move otmChar, with blur */
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;transform-origin:50% 100%}
.mo .split:not(.chs) .ch{opacity:0;transform:translateY(.55em) rotateX(-70deg);filter:blur(8px)}
.mo .split .ch{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .7s;transition-delay:calc(var(--c)*18ms)}
.mo .split{perspective:600px}

/* Numbers flip in with an accent glow — One Two Move otmDigit */
.mo .flip{animation:moDigit 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes moDigit{0%{opacity:0;filter:blur(9px);transform:rotateX(-82deg) translateY(-.18em) scale(.92);text-shadow:0 0 26px var(--accent)}45%{opacity:1;filter:blur(.4px);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}75%{transform:rotateX(6deg) scale(1.02)}100%{opacity:1;filter:none;transform:none;text-shadow:0 0 0 transparent}}

/* Hero headline: each line rises out of a blur */
.mo .hero .h1 .ln>span{animation-name:moLine;animation-duration:1.25s}
@keyframes moLine{from{transform:translateY(105%) rotate(3deg);filter:blur(14px);opacity:0}60%{filter:blur(2px);opacity:1}to{transform:none;filter:none;opacity:1}}
.mo .hero .wrap{will-change:transform,filter,opacity;transform-origin:50% 0}
.mo .hero>.plate{will-change:transform;transform-origin:50% 30%}

/* Marquees skew with scroll speed */
.mo .mq .tr span,.mo .lg-t span{transform:skewX(var(--sk,0deg));transition:transform .3s}
.mo .rv-tr .rv{transform:skewX(calc(var(--sk,0deg) * .5));transition:transform .3s}

/* Scroll-linked containers */
.mo main>section.sec>.wrap{transform-origin:50% 0}
.mo main>section.sec.alt{will-change:clip-path}

/* Nav: active section */
.nav .links a.act{color:var(--fg);background:var(--surface)}
.nav .links a{position:relative}
.nav .links a.act::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}

/* Scroll traveller — One Two Move road */
.trav{position:fixed;left:0;right:0;bottom:0;height:40px;z-index:70;pointer-events:none;opacity:0;transform:translateY(100%);transition:opacity .4s,transform .5s var(--ease)}
.trav.on{opacity:1;transform:none}
.trav-road{position:absolute;left:24px;right:24px;bottom:12px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.trav-road i{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent2),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
.trav-car{position:absolute;bottom:4px;left:24px;display:flex;align-items:center;gap:7px;padding:3px 9px 3px 4px;border-radius:999px;background:color-mix(in srgb,var(--bg) 75%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 .68rem/1 var(--fb);font-variant-numeric:tabular-nums;color:var(--fg)}
.trav-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
@media (max-width:760px){.trav{display:none}}
body.lib .trav{display:none}

/* Plates: softer, deeper hover */
.mo .plate{transition:box-shadow .5s var(--ease)}
.mo .plate:hover{box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 45%,transparent)}