/* Motion shares one preference across CSS, transitions, and the 3D viewer. */
.header-caption{display:flex;align-items:center;gap:18px}
#motion-toggle{font-family:inherit;font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.03em;border:1px solid #c4e4cf25;border-radius:24px;padding:9px 12px;background:#bfe8cf08;color:#bcd9c6;white-space:nowrap;transition:background .3s,box-shadow .3s}
#motion-toggle[aria-pressed=true]{background:#bfe8cf12;box-shadow:inset 0 0 14px #bfe8cf08}
#motion-toggle:hover{background:#bfe8cf24}
.word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.word-mask>span{display:inline-block;transform-origin:left bottom}
.hero-background{transform:translateY(var(--hero-parallax,0px)) scale(1.08)}
.hero-copy h1{line-height:1.2}
.will-reveal{clip-path:inset(5% 0 0 round 18px);transform:translateY(55px) scale(.96);transition:opacity 1s ease var(--delay),transform 1.2s cubic-bezier(.16,1,.3,1) var(--delay),filter 1s ease var(--delay),clip-path 1.2s cubic-bezier(.16,1,.3,1) var(--delay)}
.will-reveal.visible{clip-path:inset(0 round 0);transform:none}
.touch-ring{position:absolute;width:160px;height:160px;border:1px solid #d6ffdf88;background:radial-gradient(circle,#d6ffdf25,transparent 70%);border-radius:50%;pointer-events:none;z-index:5}
.project-card{isolation:isolate}
.project-caption strong{transition:color .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.project-card:hover .project-caption strong{color:#c8e6d1;transform:translateX(4px)}
.project-caption-meta{transition:letter-spacing .7s}.project-card:hover .project-caption-meta{letter-spacing:.08em}
.side-card img{transition:transform 1.3s cubic-bezier(.16,1,.3,1),filter .8s}
.side-card:hover img{transform:scale(1.045);filter:brightness(1.07)}
.toolbox-group{transition:border-color .6s,background .6s,box-shadow .6s}
.toolbox-group:hover{border-color:#c5e8d03d;background:#bde8cc05;box-shadow:0 16px 60px #0002}
.tool-item{transition:transform .65s cubic-bezier(.16,1,.3,1)}
.tool-item:hover{transform:translateY(-7px)}
.tool-item:hover .tool-icon{animation:icon-hover 2.4s ease-in-out infinite}
.about-art:after{animation:orbit-art 32s linear infinite}
.modal-panel{transform-origin:50% 70%;animation:archive-open .85s cubic-bezier(.16,1,.3,1) both}
#project-dialog.closing .modal-panel{animation:archive-close .42s cubic-bezier(.4,0,.8,.4) both}
#project-dialog::backdrop{animation:backdrop-open .65s ease both}
#project-dialog.closing::backdrop{animation:backdrop-close .42s ease both}
.watch-link{transition:transform .4s,background .4s,box-shadow .4s}
.watch-link:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0002}
.image-dialog[open]{animation:archive-open .6s cubic-bezier(.16,1,.3,1) both}
@keyframes archive-open{from{opacity:0;transform:translateY(65px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes archive-close{to{opacity:0;transform:translateY(35px) scale(.97);filter:blur(5px)}}
@keyframes backdrop-open{from{opacity:0}to{opacity:1}}
@keyframes backdrop-close{to{opacity:0}}
@keyframes icon-hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes orbit-art{to{transform:rotate(360deg)}}
@media(max-width:1050px){.header-caption>span{display:none}.header-caption{gap:0}}
@media(max-width:700px){#motion-toggle{font-size:9px;padding:8px}.site-header{gap:8px}.hero-copy h1{line-height:1.22}}
html[data-motion=reduced]{scroll-behavior:auto!important}
html[data-motion=reduced] *,html[data-motion=reduced] *:before,html[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=reduced] .will-reveal{opacity:1;transform:none;filter:none;clip-path:none}
html[data-motion=reduced] .hero-background{transform:none}