:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.3,1.5,.5,1)}
.btn{transition:transform .25s var(--ease-spring),box-shadow .25s ease,background-color .2s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97);transition-duration:.08s}
.nav a:not(.btn):not(.nav-brand){position:relative}
.nav a:not(.btn):not(.nav-brand)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.nav a:not(.btn):not(.nav-brand):hover::after{transform:scaleX(1);transform-origin:left}
.hero-cat img{transition:transform .6s var(--ease-out),box-shadow .6s}
.hero-cat:hover img{transform:scale(1.03) rotate(-1.5deg);box-shadow:0 24px 50px -18px color-mix(in srgb,var(--color-text) 40%,transparent)}
.hero-cat .note{transition:transform .5s var(--ease-spring)}
.hero-cat:hover .note{transform:translateY(-6px) rotate(-4deg)}
.hero h1 em{display:inline-block;transition:transform .4s var(--ease-spring)}
.hero h1 em:hover{transform:rotate(-3deg) scale(1.06)}
.proj.card{transition:transform .4s var(--ease-out),box-shadow .4s ease}
.proj.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.proj .shot img,.proj .shot image-slot{transition:transform .7s var(--ease-out)}
.proj.card:hover .shot img{transform:scale(1.05)}
.proj .go{display:inline-flex;gap:4px;transition:gap .25s var(--ease-out)}
.proj .go:hover{gap:10px}
.proj .metric{transition:transform .3s var(--ease-spring)}
.proj.card:hover .metric{transform:scale(1.02)}
.role{transition:transform .35s var(--ease-out)}
.role::before{transition:transform .35s var(--ease-spring),background-color .25s}
.role:hover{transform:translateX(6px)}
.role:hover::before{transform:scale(1.3);background:var(--color-accent)}
.tag{transition:transform .2s var(--ease-spring)}
.tag:hover{transform:translateY(-2px) scale(1.05)}
.sb-tabs button .t{transition:transform .3s var(--ease-out)}
.sb-tabs button:hover .t{transform:translateX(4px)}
.badge-frame{transition:transform .5s var(--ease-out),box-shadow .5s}
.badge-frame:hover{transform:rotate(-1.5deg) scale(1.02);box-shadow:var(--shadow-lg)}
.why{transition:transform .5s var(--ease-out)}
.chips button{transition:transform .2s var(--ease-spring),background-color .2s}
.chips button:hover{transform:translateY(-2px)}
.msg{animation:msgIn .35s var(--ease-out) both}
.msg.me{transform-origin:bottom right}.msg.cat{transform-origin:bottom left}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
.msg.typing::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.cover{transition:transform 1.4s cubic-bezier(.6,0,.2,1),filter .3s}
.book:not(.open) .cover:hover{transform:rotateY(-14deg);filter:brightness(1.05)}
.cover-f .tap{animation:tapPulse 2.4s ease-in-out infinite}
@keyframes tapPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.js-motion .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.js-motion .rv.in{opacity:1;transform:none}
.js-motion .hero h1 .line{display:block;opacity:0;transform:translateY(.4em);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js-motion .hero h1 .line:nth-child(2){transition-delay:.15s}
.js-motion.loaded .hero h1 .line{opacity:1;transform:none}
.js-motion .hero-cat{opacity:0;transform:scale(.94) rotate(3deg);transition:opacity 1s var(--ease-out) .3s,transform 1.1s var(--ease-spring) .3s}
.js-motion.loaded .hero-cat{opacity:1;transform:none}
.circle-bg{will-change:transform}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01s!important;animation-duration:.01s!important;animation-iteration-count:1!important}
.js-motion .rv,.js-motion .hero h1 .line,.js-motion .hero-cat{opacity:1;transform:none}
}

.scroll{position:relative;max-width:940px;margin:var(--leading) auto 0}
.scroll-body{position:relative;padding-bottom:13px}
.paper{position:relative;margin:-13px 22px 0;padding:calc(1.6*var(--leading)) clamp(24px,4vw,56px) calc(1.4*var(--leading));background:var(--color-surface);background-image:linear-gradient(to right,color-mix(in srgb,var(--color-accent-700) 10%,transparent),transparent 6%,transparent 94%,color-mix(in srgb,var(--color-accent-700) 10%,transparent)),radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--color-accent-3-300) 18%,transparent),transparent 60%);box-shadow:var(--shadow-md)}
.paper .timeline{max-width:none}
.rod{position:relative;z-index:2;height:26px;border-radius:13px;margin:0 6px;background:linear-gradient(to bottom,var(--color-accent-400),var(--color-accent) 45%,var(--color-accent-800));box-shadow:0 6px 12px -4px color-mix(in srgb,var(--color-text) 35%,transparent)}
.rod::before,.rod::after{content:"";position:absolute;top:-5px;width:22px;height:36px;border-radius:11px;background:linear-gradient(to bottom,var(--color-accent-3-300),var(--color-accent-3-700,var(--color-accent-700)));box-shadow:0 3px 6px color-mix(in srgb,var(--color-text) 30%,transparent)}
.rod::before{left:-8px}.rod::after{right:-8px}
.rod.bot{position:absolute;left:0;right:0;bottom:0}
.scroll.live .rod.bot{top:-13px;bottom:auto;will-change:transform}
.scroll.live .rod.bot::selection{background:none}
.scroll.live:not(.done) .rod.bot{box-shadow:0 -10px 18px -6px color-mix(in srgb,var(--color-text) 25%,transparent),0 6px 12px -4px color-mix(in srgb,var(--color-text) 35%,transparent)}
.scroll.live .paper{will-change:clip-path}