/* AUTOFLOW site — shared smooth-motion layer (loaded after page CSS) */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;text-rendering:optimizeLegibility}
/* endless chat boxes */
.ebox{position:relative;overflow:hidden;display:block!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
.ebox>.trk{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;will-change:transform}
.ebox .m,.ebox .typing,.ebox .poster{animation:none!important;flex:none}
.ebox .m.s{align-self:center;background:#E1F2FB;color:#41566A;font-size:11.5px;padding:4px 10px;border-radius:8px;box-shadow:none}
.ebox .typing{align-self:flex-start;background:#fff;border-radius:12px;padding:10px 12px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.1)}
.ebox .typing.o{align-self:flex-end;background:#D9FDD3}
.ebox .typing i{width:6px;height:6px;border-radius:50%;background:#8A94A3;animation:afDot 1.2s ease-in-out infinite!important}
.ebox .typing i:nth-child(2){animation-delay:.18s!important}.ebox .typing i:nth-child(3){animation-delay:.36s!important}
@keyframes afDot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.ebox .poster{width:150px;aspect-ratio:1080/1350;object-fit:cover;border-radius:12px;border:4px solid #fff;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.m.o,.typing.o{transform-origin:bottom right}.m,.typing{transform-origin:bottom left}
/* chat page bubbles (scrolling list) */
@keyframes afIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.msgs>.b,.msgs>.typing{animation:afIn .5s var(--ease-out) both!important}
.qr button{animation:afIn .45s var(--ease-out) both!important}
/* section reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)!important}
.rv.in{opacity:1;transform:none}
/* word-by-word headings */
.w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.words-in .w{opacity:1;transform:none}
/* hover */
.btn,.po,.ft,.pc,.st,.pi,.lc,.qr button,.jump button,.pctrl button{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .25s,border-color .25s!important}
.po:hover,.ft:hover,.pc:hover,.st:hover{transform:translateY(-5px)}
.pstrip{scroll-behavior:smooth}
.fc{animation:afFloat 8s ease-in-out infinite!important}@keyframes afFloat{50%{transform:translateY(-8px)}}
.track i,.vid .tr i{transition:width 1.2s linear!important}
.rc{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)!important}
.nfade{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)!important}.nfade.out{opacity:0;transform:translateY(10px)}
/* overlay + lightbox */
.ov{display:block!important;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
.ov.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out),visibility 0s;animation:none!important}
.ov .frame{transform:translateY(20px) scale(.98);transition:transform .55s var(--ease-out);animation:none!important}.ov.on .frame{transform:none}
.lb{display:flex!important;opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out),visibility 0s .35s}
.lb.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out),visibility 0s}
.lb img{transform:scale(.95);transition:transform .45s var(--ease-out)}.lb.on img{transform:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv,.w{opacity:1!important;transform:none!important}}