/* Artwork first: large uninterrupted images, with controls on demand. */
#work .section-heading{margin-bottom:38px;align-items:center}
#work .portfolio-controls{display:none}
#work #work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#work #work-grid .work-item{grid-column:auto!important;display:block;position:relative;isolation:isolate;aspect-ratio:16/9;min-width:0;overflow:hidden;padding:0;border:0;border-radius:10px;background:#191919;text-align:left;translate:none;transform:none;filter:none;opacity:1;box-shadow:none;cursor:zoom-in}
#work #work-grid .work-item::before{display:none}
#work #work-grid .work-item::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff12;background:linear-gradient(0deg,#0006,transparent 38%);opacity:0;transition:opacity .35s}
#work #work-grid .work-item>img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;filter:none;transform:none;transition:transform .65s cubic-bezier(.22,1,.36,1)}
#work #work-grid .work-item__caption{position:absolute;z-index:2;right:16px;bottom:16px;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 15px;margin:0;border:1px solid #ffffff24;border-radius:8px;background:#151515f2;backdrop-filter:none;color:#fff;font-size:12px;font-weight:550;line-height:1.2;opacity:0;translate:0 7px;pointer-events:none;transition:opacity .25s,translate .35s cubic-bezier(.22,1,.36,1)}
#work #work-grid .work-item__caption>span:last-child{display:grid;place-items:center;width:25px;height:25px;border:0;border-radius:0;background:transparent;color:#ffda35;font-size:18px}
#work #work-grid .work-item:focus-visible{outline:2px solid #ffda35;outline-offset:5px}
#work #work-grid .work-item:focus-visible .work-item__caption{opacity:1;translate:0 0}
#work #work-grid .work-item:focus-visible::after{opacity:1}
#work .work__foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px;padding:0;border:0}
#work #work-more{order:-1;min-width:180px;min-height:48px;justify-content:space-between;gap:30px;border-radius:8px;border:1px solid #e0c45e40;background:transparent;box-shadow:none;padding:12px 18px;color:#eeeade;font-size:13px;transition:background .25s,border-color .25s}
#work #work-count{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:#777973}
@media(hover:hover) and (pointer:fine){#work #work-grid .work-item:hover{background:#191919;translate:none;transform:none;filter:none;opacity:1}#work #work-grid .work-item:hover>img{transform:scale(1.018);filter:none}#work #work-grid .work-item:hover .work-item__caption{opacity:1;translate:0 0}#work #work-grid .work-item:hover::after{opacity:1}#work #work-more:hover{border-color:#e0c45e99;background:#ffda3509}}
@media(hover:none){#work #work-grid .work-item__caption{opacity:1;translate:none;padding:7px;right:10px;bottom:10px}#work #work-grid .work-item__label{display:none}}
@media(max-width:960px){#work #work-grid{gap:16px}}
@media(max-width:620px){#work .section-heading{margin-bottom:26px}#work #work-grid{grid-template-columns:1fr;gap:16px}#work #work-grid .work-item{border-radius:8px}#work .work__foot{margin-top:26px}}
@media(prefers-reduced-motion:reduce){#work #work-grid .work-item>img,#work #work-grid .work-item__caption,#work #work-grid .work-item::after{transition:none;transform:none!important;translate:none}}
body[data-motion='paused'] #work #work-grid .work-item>img{transform:none!important;transition:none}

/* Three image belts with a soft fade at both edges. */
#work #work-grid.work-gallery-loop{display:flex;flex-direction:column;gap:18px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#work .work-loop-row{--thumb-width:clamp(280px,28vw,420px);--thumb-gap:18px;min-width:0;overflow:hidden}
#work .work-loop-track{display:flex;width:max-content;animation:work-belt-drift 105s linear infinite;will-change:transform}
#work .work-loop-row:nth-child(2) .work-loop-track{animation-direction:reverse;animation-duration:115s}
#work .work-loop-row:nth-child(3) .work-loop-track{animation-duration:98s}
#work .work-loop-group{display:flex;gap:var(--thumb-gap);padding-right:var(--thumb-gap);flex-shrink:0}
#work #work-grid .work-loop-group .work-item{flex:0 0 var(--thumb-width);width:var(--thumb-width);cursor:zoom-in}
@keyframes work-belt-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#work[data-motion-visible='false'] .work-loop-track,body[data-page-hidden='true'] .work-loop-track,body[data-motion='paused'] .work-loop-track{animation-play-state:paused}
@media(hover:hover){#work .work-loop-row:hover .work-loop-track{animation-play-state:paused}}
#work .work-loop-row:has(.work-item:focus-visible){overflow-x:auto}
#work .work-loop-row:has(.work-item:focus-visible) .work-loop-track{animation:none;transform:none}
#work .work-loop-row:has(.work-item:focus-visible) .work-loop-group[aria-hidden='true']{display:none}
@media(max-width:620px){#work #work-grid.work-gallery-loop{gap:12px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}#work .work-loop-row{--thumb-width:230px;--thumb-gap:12px}}
@media(prefers-reduced-motion:reduce){#work .work-loop-track{animation:none;transform:none}#work .work-loop-row{overflow-x:auto;scrollbar-width:thin}#work .work-loop-group[aria-hidden='true']{display:none}}

/* Artwork focus inspired by Eric Ngu's portfolio, adapted to the moving belts. */
#work .work-loop-row{padding-block:10px}
#work #work-grid.work-gallery-loop{gap:2px}
#work #work-grid .work-item{transition:opacity .4s,filter .4s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s}
@media(hover:hover) and (pointer:fine){
 #work #work-grid.is-hovering .work-loop-row:has(.is-focused) .work-loop-track{animation-play-state:paused}
 #work #work-grid.is-hovering .work-item{opacity:.34;filter:none;transform:none}
 #work #work-grid.is-hovering .work-item:not(.is-focused)>img{filter:blur(2.2px) grayscale(.38)}
 #work #work-grid.is-hovering .work-item.is-focused{opacity:1;filter:none;z-index:8;transform:translateY(-4px);box-shadow:0 12px 24px -12px #000b}
 #work #work-grid.is-hovering .work-item.is-focused>img{transform:perspective(950px) rotateX(var(--work-tilt-x,0deg)) rotateY(var(--work-tilt-y,0deg)) scale(1.045);filter:saturate(1.035) contrast(1.025)}
 #work #work-grid.is-hovering .work-item.is-focused::after{opacity:1;box-shadow:inset 0 0 0 1px #e9d47c66}
}
@media(prefers-reduced-motion:reduce){#work #work-grid .work-item{transition:none;filter:none!important;opacity:1!important;transform:none!important}}
body[data-motion='paused'] #work #work-grid .work-item{filter:none!important;opacity:1!important;transform:none!important}