/* Restrained motion, with ordinary pointer and controls always available. */
.brand img{transform-origin:50% 50%}
.brand .brand-name{display:inline-block;white-space:pre}
.brand .brand-letter{display:inline-block;font:inherit;letter-spacing:inherit}
.brand.is-rolling img{animation:brand-roll var(--roll-duration) linear both}
.brand.is-rolling .brand-letter{animation:letter-uncover .1s var(--reveal-at) ease-out both}
.brand.is-rolling small{animation:tagline-arrive .5s var(--tagline-at) ease-out both}
.hero-copy h1{animation:headline-arrive 1s cubic-bezier(.22,1,.36,1) both}
.hero-image .hero-slide{position:absolute;inset:0;opacity:0;transform:translateX(4%) scale(1.025);transition:opacity 1s ease,transform 1.5s cubic-bezier(.22,1,.36,1);animation:none;pointer-events:none}
.hero-image .hero-slide.is-active{opacity:1;transform:translateX(0) scale(1)}
.hero-image .image-caption{z-index:2;pointer-events:none}
.hero-controls{position:absolute;right:26px;bottom:78px;z-index:3;display:flex;align-items:center;gap:10px;color:white}
.hero-controls button{border:1px solid #ffffff80;background:#252c255c;color:white;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-size:17px;backdrop-filter:blur(8px);transition:background .25s,transform .25s}
.hero-controls button:hover{background:#252c25ae;transform:translateY(-2px)}
.hero-controls span{font-size:9px;letter-spacing:.1em;padding:0 4px}
.cursor-halo{position:fixed;z-index:100;pointer-events:none;width:30px;height:30px;border:1px solid #7a806580;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:width .2s,height .2s,opacity .2s,background .2s}
.cursor-halo.is-shown{opacity:1}.cursor-halo.over-link{width:46px;height:46px;background:#7a806516}
.project-card .project-photo{transition:box-shadow .4s}.project-card:hover .project-photo{box-shadow:0 12px 30px #292e2710}
@keyframes brand-roll{from{transform:translateX(var(--roll-distance))}to{transform:translateX(0)}}
@keyframes letter-uncover{from{opacity:0;transform:translateX(3px)}to{opacity:1;transform:translateX(0)}}
@keyframes tagline-arrive{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes headline-arrive{from{transform:translateY(20px)}to{transform:translateY(0)}}
@media(max-width:650px){.hero-controls{right:15px;bottom:70px;gap:7px}.hero-controls button{width:33px;height:33px}.cursor-halo{display:none}}
@media(prefers-reduced-motion:reduce){.brand.is-rolling img,.brand.is-rolling .brand-letter,.brand.is-rolling small,.hero-copy h1{animation:none}.hero-image .hero-slide{transition:none;transform:none}.cursor-halo{display:none}}
.hero-image > img:first-child{object-fit:contain;background:#dedbd1}