/* Calm, professional motion on top of the existing MILO details. Nothing tilts, nothing bounces.
   Loads after four-tone-theme.css, which carries an older copy of these rules; the resets below answer that copy. */
:root{--milo-ease:cubic-bezier(.2,.8,.2,1);--milo-render:cubic-bezier(.65,0,.35,1);--milo-wire-color:var(--muted);--milo-wire-fill:var(--paper)}
@keyframes milo-fade{from{opacity:0}}
@keyframes milo-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes milo-switch{from{opacity:0}}
@keyframes milo-orbit{from{transform:rotateX(55deg) rotate(-25deg)}to{transform:rotateX(55deg) rotate(335deg)}}
@keyframes milo-spin{to{transform:rotate(360deg)}}
@keyframes milo-pulse{50%{opacity:.4}}
@keyframes milo-bob{50%{transform:translateY(3px)}}
@keyframes milo-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes milo-film{from{opacity:0;clip-path:inset(4% 3% round 8px)}to{clip-path:inset(0 round 0)}}
@keyframes milo-arrow{from{opacity:0;transform:translate(-12px,12px)}}
@keyframes milo-render{from{clip-path:inset(-.15em 100% -.25em -.1em)}to{clip-path:inset(-.15em -.1em -.25em -.1em)}}
@keyframes milo-wire-off{from{clip-path:inset(-.15em -.1em -.25em 0)}to{clip-path:inset(-.15em -.1em -.25em 100%)}}

/* Titles: wireframe first, then a render from left to right. The outline sits behind the title and leaves with the wipe. */
.showcase-copy,.motion-design{--milo-wire-color:var(--lime);--milo-wire-fill:var(--ink)}
.milo-stack{position:relative;isolation:isolate;width:fit-content;max-width:100%}
.milo-wire{position:absolute;left:0;top:0;z-index:-1;width:100%;margin:0;pointer-events:none}
.milo-wire,.milo-wire *{color:var(--milo-wire-fill)!important;-webkit-text-stroke:2px var(--milo-wire-color);paint-order:stroke fill}
.showcase-copy h1:not(.milo-wire),.page-heading h1:not(.milo-wire){animation:milo-render 1.2s .55s var(--milo-render) backwards}
.showcase-copy h1.milo-glitch:not(.milo-wire),.page-heading h1.milo-glitch:not(.milo-wire){animation:milo-render 1.2s .55s var(--milo-render) backwards,milo-title-signal .8s 1.9s steps(1) both}
.showcase-copy .milo-wire,.page-heading .milo-wire{animation:milo-fade .4s backwards,milo-wire-off 1.2s .55s var(--milo-render) forwards}
.milo-wait .milo-fill{clip-path:inset(-.15em 100% -.25em -.1em)}
.milo-in .milo-fill{animation:milo-render 1.2s .45s var(--milo-render) backwards}
.milo-in .milo-wire{animation:milo-fade .4s backwards,milo-wire-off 1.2s .45s var(--milo-render) forwards}

/* Hero: plays from CSS alone, so the first paint never waits for JavaScript. */
.showcase-top,.showcase-bottom{animation:milo-fade .9s .1s backwards}
.showcase-kicker{animation:milo-rise .7s .1s var(--milo-ease) backwards}
.showcase-intro{animation:milo-rise .7s .9s var(--milo-ease) backwards}
.showcase-actions{animation:milo-rise .7s 1s var(--milo-ease) backwards}
.showcase-tools{animation:milo-rise .7s 1.1s var(--milo-ease) backwards}
.showcase-viewport{animation:milo-fade .9s .3s backwards}
.showcase-word{animation:milo-fade 1.2s .6s backwards;transition:opacity .45s}
.showcase-word.is-leaving{opacity:0}
.showcase-top i{animation:milo-pulse 2.6s ease-in-out infinite}
.showcase-orbit{animation:milo-fade 1.4s .4s backwards,milo-orbit 60s linear infinite}
.showcase-orbit::before{content:none}
.showcase-orbit::after{animation:milo-spin 40s linear infinite reverse}
.milo-scroll-arrow{display:inline-block;animation:milo-bob 2.2s ease-in-out infinite}
.milo-drag-arrow{display:inline-block;animation:none}
.showcase-hero:has([data-hero-pause][aria-pressed=true]) :is(.showcase-orbit,.showcase-top i,.milo-scroll-arrow),.showcase-hero:has([data-hero-pause][aria-pressed=true]) .showcase-orbit::after{animation-play-state:paused}

/* Picking another hero model: a plain crossfade. */
.showcase-viewport::after{content:none}
.showcase-viewport.is-switching{animation:milo-switch .45s ease-out}

/* Scroll entrances: classes only arrive through page-motion.js, so without it everything stays visible. */
.milo-wait .milo-item,.milo-item.milo-wait{opacity:0}
.milo-in .milo-item,.milo-item.milo-in{animation:milo-rise .8s calc(var(--step,0)*70ms + .15s) var(--milo-ease) backwards}
.motion-design-film.milo-in{animation:milo-film 1s var(--milo-ease) backwards}
.rendered-preview.milo-in .rendered-invite>span{animation:none}

/* Process: cards follow each other and the icons draw themselves. */
.process-list.milo-in>li{animation-delay:calc(var(--step,0)*120ms)}
.process-list.milo-in .process-icon path{animation:milo-draw .9s calc(var(--step,0)*120ms + .25s) ease-in-out backwards}
.process-list.milo-in>li:not(:last-child)::after{animation:milo-fade .4s calc(var(--step,0)*120ms + .6s) backwards}

/* Closing: the arrow slides into place. */
.closing-main.milo-in .closing-link svg{animation:milo-arrow .7s .3s var(--milo-ease) backwards}

/* Viewport frame on cards: they stay straight, lift a little and get corner markers with a label. */
.clear-process>li,.tool-grid>article,.project-image{--milo-corner:var(--muted);transition:transform .25s ease-out,box-shadow .25s}
.tool-grid>article{position:relative}
.clear-process>li::before,.tool-grid>article::before,.project-image::before{content:'3D / VIEWPORT';position:absolute;inset:8px;z-index:2;display:flex;justify-content:flex-end;align-items:flex-end;padding:7px 9px;font:9px/1 monospace;letter-spacing:.12em;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(var(--milo-corner),var(--milo-corner)) left top/14px 1px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) left top/1px 14px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) right top/14px 1px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) right top/1px 14px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) left bottom/14px 1px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) left bottom/1px 14px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) right bottom/14px 1px no-repeat,linear-gradient(var(--milo-corner),var(--milo-corner)) right bottom/1px 14px no-repeat}
.tool-grid>article::before{inset:-1px -12px -12px}
.project-image::before{inset:12px;align-items:flex-start;color:var(--ink);--milo-corner:var(--ink)}
.project-image:focus-visible::before{opacity:1}

/* Hover details. */
.showcase-cta span,.rendered-arrow{display:inline-block;transition:transform .2s}
.showcase-select img,.rendered-option-thumb{transition:transform .25s}
.rendered-picker button[aria-pressed="true"] .rendered-detail{animation:milo-fade .35s ease-out backwards}
.service-row{position:relative;isolation:isolate}
.service-row::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--lime);transform:none;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .55s var(--milo-ease)}
.service-row>svg{transition:transform .25s}
.service-row:focus-visible::before{clip-path:circle(150% at 50% 50%)}
.service-row:focus-visible :is(p,.technical){color:var(--ink)}
@media(hover:hover){
.showcase-cta:hover span{transform:translate(3px,-3px)}
.showcase-select button:hover img{transform:scale(1.04)}
.rendered-picker button:hover .rendered-arrow{transform:translate(3px,-3px)}
.rendered-picker button:hover .rendered-option-thumb{transform:scale(1.03)}
.service-row:hover{padding-left:18px}
.service-row:hover::before{transform:none;clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.service-row:hover>svg{transform:translate(-14px,-4px)}
.service-row:hover :is(p,.technical){color:var(--ink)}
.clear-process>li:hover,.tool-grid>article:hover,.project-image:hover{transform:translateY(-4px)}
.clear-process>li:hover{box-shadow:0 10px 24px #111A1514}
.clear-process>li:hover::before,.tool-grid>article:hover::before,.project-image:hover::before{opacity:1}
}

/* Reduced motion switches every animation off in style.css; these keep waiting content visible. */
@media print,(prefers-reduced-motion:reduce){.milo-wait .milo-item,.milo-item.milo-wait{opacity:1}.milo-wait .milo-fill{clip-path:none}.clear-process>li:hover,.tool-grid>article:hover,.project-image:hover{transform:none}}