/* Mechanical accents: cobalt enamel, warm brass, and a moving paper folder. */
.object-art .object-motion-control{pointer-events:auto;cursor:pointer;touch-action:manipulation;display:grid;place-items:center;padding:0;min-width:0;min-height:0;transition:transform 140ms var(--shell-ease);}
.object-motion-control:focus-visible{outline:2px solid #f7fbff;outline-offset:3px;box-shadow:0 0 0 4px #4277b8;}
.object-motion-control:active{transform:translateY(1px);}
.object-pause-glyph{display:block;width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;}
.object-motion-control[aria-pressed="true"] .object-pause-glyph{height:0;width:0;border:6px solid transparent;border-left:9px solid currentColor;border-right:0;transform:translateX(1px);}
.object-art .object-action-control{pointer-events:auto;cursor:pointer;touch-action:manipulation;display:grid;place-items:center;padding:0;min-width:0;min-height:0;flex-shrink:0;color:inherit;transition:transform 140ms var(--shell-ease);}
.object-action-control svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.object-action-control:focus-visible{outline:2px solid #f7fbff;outline-offset:3px;}
.object-action-control:active{transform:translateY(1px);}
.street-plaque .scenic-route-link{width:28px;height:28px;margin:-2px -3px -2px 0;border:0;border-radius:3px;color:#fffce4;background:transparent;}
.floating-folder .folder-open{position:absolute;z-index:2;right:0;top:15px;width:28px;height:28px;border:1px solid #caecfb99;border-radius:4px;background:linear-gradient(#90d4ee,#5cacd5);color:#effaff;box-shadow:inset 0 1px #def7ff80,0 1px 2px #377da433;}
.folder-open svg{width:19px;height:19px;}
.folder-open:focus-visible{outline-color:#164b76;}
.jukebox-player .jukebox-transport{right:11px;bottom:11px;width:45px;height:22px;border:1px solid #ac6a48;border-radius:4px;background:linear-gradient(#eb9868,#c56749);box-shadow:inset 0 1px #ffd7a0,0 2px 0 #9b5b40;color:#fff2cb;display:flex;justify-content:center;gap:7px;}
.jukebox-player .jukebox-transport>i{width:4px;height:4px;border:0;border-radius:50%;background:#cee4ae;box-shadow:0 0 3px #d9eda9;}
.jukebox-player .jukebox-transport[aria-pressed="true"]>i{background:#6c6650;box-shadow:none;}
.jukebox-wordmark{right:21px;bottom:5px;}

.object-gyro{width:126px;height:138px;}
.kinetic-gyro{position:relative;width:126px;height:138px;}
.gyro-sculpture{position:absolute;z-index:2;left:7px;top:0;width:112px;height:112px;perspective:350px;transform:rotate(-17deg);}
.gyro-ring{position:absolute;border-radius:50%;box-sizing:border-box;}
.gyro-outer{inset:1px;border:7px solid #2e64b5;border-left-color:#95c8f1;border-top-color:#65a6ec;box-shadow:inset 0 0 0 1px #c8e5ff,0 0 0 1px #204c8b,3px 4px 0 #123b7733;animation:gyro-gimbal 12s linear infinite;}
.gyro-inner{inset:13px;border:5px solid #eaa558;border-left-color:#ffdaa2;border-right-color:#a85e32;box-shadow:inset 0 0 0 1px #ffdfaa,0 0 0 1px #8e5b3e;animation:gyro-inner-turn 8s linear infinite;}
.gyro-core{position:absolute;z-index:2;inset:37px;border-radius:50%;background:radial-gradient(circle at 29% 24%,#fff6b4 0,#ffbe59 31%,#e77a39 69%,#a0472e 100%);border:1px solid #d38249;box-shadow:inset -3px -3px 4px #ad4a2c44,0 3px 5px #123b7740;}
.gyro-core::after{content:'';position:absolute;inset:5px;border-radius:50%;border-top:1px solid #fff9dfb3;transform:rotate(-25deg);}
.gyro-orbit{position:absolute;z-index:3;inset:9px;border-radius:50%;animation:gyro-satellite 6s linear infinite;}
.gyro-orbit>b{position:absolute;width:13px;height:13px;top:-6px;left:39px;border:1px solid #688da9;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffff1,#e1f0e6 45%,#698fa3);box-shadow:0 2px 2px #1d396633;}
.gyro-axle{position:absolute;z-index:1;left:10px;right:10px;top:54px;height:3px;background:linear-gradient(#def3f6,#7898b4);border-radius:2px;transform:rotate(-24deg);box-shadow:0 1px #275072;}
.gyro-stem{position:absolute;left:57px;top:88px;width:12px;height:33px;border-radius:3px;background:linear-gradient(90deg,#1d4e90,#6d9bd0 40%,#306bb0 68%,#153767);transform:rotate(7deg);}
.gyro-plinth{position:absolute;left:18px;bottom:4px;width:91px;height:23px;border-radius:50%;border:1px solid #437aac;background:radial-gradient(ellipse at 30% 17%,#79abd8,#2b619a 65%,#173c6d);box-shadow:inset 0 2px 0 #adcfe88c,0 3px 0 #183e66,0 6px 4px #13354733;}
.kinetic-gyro .gyro-control{position:absolute;z-index:4;left:41px;bottom:6px;width:44px;height:26px;border-radius:50%;border:1px solid #88aac2;background:linear-gradient(#a3c5df,#608aaf);box-shadow:inset 0 1px #d4e8f4,0 2px 0 #2e5985;color:#133f67;}
.gyro-control .object-pause-glyph{height:9px;width:9px;border-left-width:2px;border-right-width:2px;}
.gyro-control[aria-pressed="true"] .object-pause-glyph{height:0;width:0;border-width:5px;border-left-width:8px;border-right:0;}
@keyframes gyro-gimbal{from{transform:rotateY(35deg) rotateX(18deg) rotateZ(0)}to{transform:rotateY(35deg) rotateX(18deg) rotateZ(360deg)}}
@keyframes gyro-inner-turn{from{transform:rotateY(64deg) rotateX(-22deg) rotateZ(0)}to{transform:rotateY(64deg) rotateX(-22deg) rotateZ(-360deg)}}
@keyframes gyro-satellite{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.folder-sheets{position:absolute;inset:4px 6px 5px;}
.folder-sheets em{position:absolute;inset:0;display:block;border:1px solid #c6d7de;border-radius:2px;background:repeating-linear-gradient(0deg,#fcf8e6 0 6px,#c6d8d780 6px 7px);transform-origin:50% 100%;animation:folder-pages 13s cubic-bezier(.77,0,.175,1) infinite;}
.folder-sheets em:nth-child(2){animation-delay:-.15s;background:#bfdadd;}
.folder-sheets em:nth-child(3){animation-delay:-.3s;background:repeating-linear-gradient(0deg,#fff9df 0 6px,#c7d7d780 6px 7px);}
@keyframes folder-pages{0%,20%,80%,100%{transform:translateY(0) rotate(0)}35%,65%{transform:translateY(-13px) rotate(-8deg)}}

/* The little controls own playback. Hover should not silently countermand them. */
@media(hover:hover) and (pointer:fine){.desk-object:is(.object-music,.object-gyro):hover .object-art *{animation-play-state:running!important;}}
.desk-object:is(.object-music,.object-gyro)[data-object-paused="true"] .object-art *,
.desk-object:is(.object-music,.object-gyro).object-moving .object-art *,
.desk-object:is(.object-music,.object-gyro):focus-visible .object-art *,
html[data-motion="paused"] .desk-object:is(.object-music,.object-gyro,.object-folder) .object-art *,
html[data-motion-preference="paused"] .desk-object:is(.object-music,.object-gyro,.object-folder) .object-art *,
html[data-visible="false"] .desk-object:is(.object-music,.object-gyro,.object-folder) .object-art *,
html[data-hero-visible="false"] .desk-object:is(.object-music,.object-gyro,.object-folder) .object-art *{animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){.object-gyro .object-art *,.folder-sheets em{animation:none!important;}.gyro-outer{transform:rotateY(35deg) rotateX(18deg) rotateZ(35deg);}.gyro-inner{transform:rotateY(64deg) rotateX(-22deg) rotateZ(-25deg);}.object-motion-control,.object-action-control{transition:none;}}