/* Pearl portrait and movement share the existing canvas colours. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.mock-art.cat-art{isolation:isolate;background:#0c1011}
.cat-art .cat-portrait{position:absolute;inset:0;transform-origin:52% 52%;animation:cat-breathe 9s ease-in-out infinite;animation-delay:var(--portrait-phase,0s)}
.cat-art .cat-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:none!important;filter:none!important}
.cat-art .cat-portrait .cat-blink{opacity:0;animation:cat-blink 8.7s linear infinite;animation-delay:var(--portrait-phase,0s)}
.cat-art::before{content:"";position:absolute;inset:-25%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 15% 55%,#b9efad22,transparent 42%),radial-gradient(ellipse at 85% 30%,#c5aff326,transparent 40%);mix-blend-mode:screen;animation:pearl-light 12s ease-in-out infinite;animation-delay:var(--portrait-phase,0s)}
.cat-art .art-corner{z-index:2}
@keyframes cat-breathe{0%,100%{transform:translate3d(-.6%,.4%,0) scale(1.035)}50%{transform:translate3d(.6%,-.8%,0) scale(1.065)}}
@keyframes cat-blink{0%,42%,47%,100%{opacity:0}43.4%,45.2%{opacity:1}}
@keyframes pearl-light{0%,100%{transform:translate3d(-3%,2%,0) rotate(-5deg);opacity:.35}50%{transform:translate3d(3%,-2%,0) rotate(6deg);opacity:.85}}
#motion-toggle{flex-shrink:0;color:#b9efad}
#motion-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#motion-toggle[aria-pressed=false]{color:#a9a9a9}
body:not([data-motion=none]) .wires .motion-wire{stroke:#c9f6be;stroke-width:2.6;stroke-dasharray:22 978;stroke-linecap:round;opacity:.7;animation:canvas-current 6s linear infinite;animation-delay:var(--wire-delay,0s)}
body .wires .motion-wire.disconnected{opacity:0;animation:none}
@keyframes canvas-current{from{stroke-dashoffset:1010}to{stroke-dashoffset:10}}
/* The travelling highlight sits over a steady connection, including while typing. */
body.signal-change:not([data-motion=none]) .wires path[data-wire]{animation:none;stroke-dasharray:none}
body.signal-change:not([data-motion=none]) .wires path.motion-wire:not(.disconnected){stroke-dasharray:22 978;animation:canvas-current 6s linear infinite;animation-delay:var(--wire-delay,0s)}
body.signal-change:not([data-motion=none]) #node-preview{animation:preview-breathe .65s ease-out}
body:not([data-motion=none]) .motion-intro{animation:canvas-arrive .9s var(--motion-ease) both;animation-delay:var(--arrival,0s)}
@keyframes canvas-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
body:not([data-motion=none]) dialog[open],body:not([data-motion=none]) #maker-dialog[open]{animation:canvas-dialog .38s var(--motion-ease) both}
body:not([data-motion=none]) dialog[open]::backdrop{animation:canvas-backdrop .35s ease both}
@keyframes canvas-dialog{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:none}}
@keyframes canvas-backdrop{from{background-color:#080b0b00;backdrop-filter:blur(0)}to{background-color:#080b0b9c;backdrop-filter:blur(7px)}}
body:not([data-motion=none]) details[open]>div{animation:canvas-dialog .25s var(--motion-ease)}
body:not([data-motion=none]) .app-destination .app-art i{transition:transform .6s var(--motion-ease)}
body:not([data-motion=none]) .app-destination:hover .app-art i:first-of-type{transform:rotate(18deg) scale(1.12)}
body:not([data-motion=none]) .app-destination:hover .app-art i:last-of-type{transform:rotate(-12deg) scale(.92)}
#outcome-strip button,.segmented button,.layout-options button,.swatches button,.preview-toolbar button,.topbar button,.mobile-actions button{transition:background-color .24s,color .24s,border-color .24s,box-shadow .24s,transform .28s var(--motion-ease)}
@media(hover:hover){#outcome-strip button:hover,.preview-toolbar button:hover{transform:translateY(-2px)}}
#outcome-strip button:active,.preview-toolbar button:active,.mobile-actions button:active{transform:scale(.97)}
body.motion-sleep *,body.motion-sleep *::before,body.motion-sleep *::after,.cat-offscreen .cat-portrait,.cat-offscreen .cat-blink,.cat-offscreen .cat-art::before{animation-play-state:paused!important}
body[data-motion=none] .cat-portrait,body[data-motion=none] .cat-blink,body[data-motion=none] .cat-art::before{animation:none!important}
body[data-motion=none] .cat-blink{opacity:0}
body[data-motion=none] .motion-wire{display:none}
@media(prefers-reduced-motion:reduce){body .motion-intro{opacity:1;translate:none}body .cat-portrait,body .cat-blink,body .cat-art::before,body .motion-wire{animation:none!important}body .cat-blink{opacity:0}body .motion-wire{display:none}body dialog[open]{animation:none!important}body *,body *::before,body *::after{transition:none!important;scroll-behavior:auto!important}}