/* Shared portfolio motion; real content stays available without enhancement. */
.motion-home .hero h1 span{animation:word-arrive .95s cubic-bezier(.2,.75,.25,1) both}
.motion-home .hero h1 .smelly{animation-delay:.16s}
.motion-home .hero h1 .stuff{animation-delay:.32s}
.motion-home .hero .intro,.motion-home .hero .button{animation:word-arrive .8s .45s both}
.motion-home .art{animation:art-arrive 1.3s .15s both}
.motion-home .logo-disc{translate:var(--duck-x,0px) var(--duck-y,0px);rotate:var(--duck-turn,0deg);transition:translate .65s ease-out,rotate .65s ease-out}
.motion-home .art-star{animation:star-sway 6s ease-in-out infinite}
.motion-home .orbit{animation:orbit-open 1.6s ease-out both}
.motion-home .orbit.two{animation-delay:.2s}
.motion-home .orbit.three{animation-delay:.4s}
.motion-home .motion-section{position:relative}
.motion-home .motion-section:after{content:'';position:absolute;left:6%;right:6%;top:0;height:1px;background:currentColor;opacity:.35;transform-origin:left;pointer-events:none}
.motion-home .motion-section.in-view:after{animation:rule-draw 1.3s cubic-bezier(.2,.7,.3,1) both}
.motion-home .motion-section.in-view h2{animation:section-arrive .9s ease-out both}
.motion-home .motion-section.in-view p{animation:section-arrive .9s .15s ease-out both}
.motion-home .motion-section.in-view .hello-word{animation:hello-arrive 1.3s cubic-bezier(.2,.7,.3,1) both}
.motion-home .motion-section.in-view .hello-art:before{animation:hello-ring 7s ease-in-out infinite}
.motion-home.motion-suspended *, .motion-home.motion-suspended *:before,.motion-home.motion-suspended *:after{animation-play-state:paused!important}
/* Pause never leaves words half-hidden. */
.paused .motion-home *, .paused .motion-home *:before,.paused .motion-home *:after{animation:none!important;transition:none!important}
.paused .motion-home .logo-disc{translate:0 0;rotate:0deg}
.motion-home .motion{position:fixed;right:18px;bottom:16px;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:10px 16px;box-shadow:0 3px 18px #0001}
.motion-home .footer{padding-bottom:85px}
[data-conversation] .message.guide-sample-reveal{animation:bubble-left .5s cubic-bezier(.2,.75,.25,1) both}
[data-conversation] .from-you.guide-sample-reveal{animation-name:bubble-right}
[data-conversation] .picture.guide-sample-reveal figure{animation:picture-unfold .7s ease-out both;transform-origin:top}
[data-conversation] .time-note.guide-sample-reveal{animation-name:section-arrive}
[data-conversation] .typing-cue{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);padding:10px 14px;margin:0 25px 20px;width:max-content;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
[data-conversation] .typing-cue[hidden]{display:none}
.typing-cue span{margin-right:7px}
.typing-cue i{width:5px;height:5px;background:currentColor;border-radius:50%;animation:typing-dot .9s ease-in-out infinite}
.typing-cue i:nth-of-type(2){animation-delay:.15s}.typing-cue i:nth-of-type(3){animation-delay:.3s}
[data-conversation].chat-paused *,[data-conversation].chat-paused *:before{animation:none!important}
[data-conversation].chat-still *{animation:none!important;transition:none!important}
@keyframes word-arrive{from{opacity:.15;transform:translateY(30px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes art-arrive{from{opacity:.2;scale:.88;rotate:-9deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes orbit-open{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes star-sway{50%{transform:rotate(40deg) scale(.88)}}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes section-arrive{from{opacity:.25;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hello-arrive{from{opacity:.2;clip-path:inset(0 100% 0 0);transform:rotate(-16deg) translateY(12px)}to{opacity:1;clip-path:inset(0 -10% 0 -10%);transform:rotate(-10deg)}}
@keyframes hello-ring{50%{transform:rotate(8deg) scaleY(.9)}}
@keyframes bubble-left{from{opacity:.2;transform:translateX(-18px) translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bubble-right{from{opacity:.2;transform:translateX(18px) translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes picture-unfold{from{opacity:.2;transform:scaleY(.94)}to{opacity:1;transform:none}}
@keyframes typing-dot{50%{transform:translateY(-4px);opacity:.35}}
@media(prefers-reduced-motion:reduce){.motion-home *,.motion-home *:before,.motion-home *:after,[data-conversation] *{animation:none!important;transition:none!important}.motion-home .logo-disc{translate:0 0!important;rotate:0deg!important}}
/* Subpages share the same pacing, without hiding text before it is seen. */
.motion-site .motion{position:fixed;right:18px;bottom:16px;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:10px 16px;box-shadow:0 3px 18px #0001}
.motion-site .footer{padding-bottom:85px}
.motion-subpage .subpage h1,.motion-guide .guide-intro h1{animation:word-arrive .85s cubic-bezier(.2,.75,.25,1) both}
.motion-subpage .subpage h1{padding-bottom:28px;border-bottom:1px solid var(--line);position:relative}
.motion-subpage .subpage h1:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform-origin:left;animation:rule-draw 1.3s .15s both}
.motion-subpage .motion-copy.in-view{animation:section-arrive .75s ease-out both}
.motion-subpage .subpage h2{position:relative;padding-top:22px;margin-top:45px}
.motion-subpage .subpage h2:before{content:'';position:absolute;top:0;left:0;width:55px;height:1px;background:currentColor;transform-origin:left}
.motion-subpage .subpage h2.in-view:before{animation:rule-draw .9s ease-out both}
.motion-subpage .aside.in-view{animation:quote-arrive .9s ease-out both}
.motion-quiet .subpage h1{animation:quiet-arrive .55s ease-out both}
.motion-quiet .motion-copy.in-view{animation:quiet-arrive .5s ease-out both}
.motion-site .text-link,.motion-site .back,.motion-site .footer-links a{text-decoration-thickness:1px;transition:text-decoration-color .2s,opacity .2s}
.motion-site .text-link:hover,.motion-site .back:hover,.motion-site .footer-links a:hover{ text-decoration-thickness:2px}
.motion-site .button .arrow,.motion-site .button>span,.motion-site .text-link>span{display:inline-block;transition:transform .25s ease}
.motion-site .button:is(:hover,:focus-visible)>span,.motion-site .text-link:is(:hover,:focus-visible)>span{transform:translate(3px,-3px)}
.motion-guide .guide-chapter.in-view>h2,.motion-guide .capability-map.in-view>h2{animation:section-arrive .8s ease-out both}
.motion-guide .guide-jumps a{position:relative}
.motion-guide .guide-jumps a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.motion-guide .guide-jumps a[aria-current=location]:after{transform:scaleX(1)}
.reading-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:8;background:#cac8c155;pointer-events:none}
.reading-progress>span{display:block;width:100%;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.reading-position{position:fixed;bottom:16px;left:18px;z-index:5;padding:10px 13px;min-height:44px;background:var(--paper);border:1px solid var(--line);border-radius:30px;font-size:10px;text-decoration:none;display:flex;align-items:center;max-width:calc(100% - 195px)}
.motion-guide .capability-grid summary{transition:background .2s}
.motion-guide .capability-grid summary:is(:hover,:focus-visible){background:#eae9e355}
.parcel-timeline{position:relative;list-style:none;margin:20px 0 0;padding:0 0 0 21px;isolation:isolate}
.parcel-timeline:before{content:'';position:absolute;left:4px;top:8px;bottom:12px;width:1px;background:var(--line);transform-origin:top;z-index:-1}
.parcel-timeline>li{position:relative;margin:0;padding:0 0 20px;font-size:12px;line-height:1.65}
.parcel-timeline>li:last-child{padding-bottom:0}
.parcel-timeline>li:before{content:'';position:absolute;left:-21px;top:6px;width:7px;height:7px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.parcel-timeline .event-time{display:block;font-size:10px;color:var(--muted)}
.parcel-timeline .event-label{font-weight:600}
.parcel-timeline.in-view:before,.guide-sample-reveal .parcel-timeline:before{animation:timeline-draw 1.1s ease-out both}
.parcel-timeline.in-view>li,.guide-sample-reveal .parcel-timeline>li{animation:bubble-left .6s calc(var(--step)*.18s) both}
@keyframes timeline-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes quote-arrive{from{opacity:.2;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes quiet-arrive{from{opacity:.65}to{opacity:1}}
.motion-site.motion-suspended *,.motion-site.motion-suspended *:before,.motion-site.motion-suspended *:after{animation-play-state:paused!important}
.paused .motion-site *,.paused .motion-site *:before,.paused .motion-site *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-site *,.motion-site *:before,.motion-site *:after{animation:none!important;transition:none!important}}
@media print{.motion-site .motion,.typing-cue,.reading-progress,.reading-position{display:none!important}.motion-site *,.motion-site *:before,.motion-site *:after{animation:none!important;opacity:1!important;transform:none!important}}