/* Portfolio motion; homepage snapshots remain static. */
.preview-image{transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.snapshot-composite{background:#050505}.snapshot-lead{aspect-ratio:1250/1400;overflow:hidden}.snapshot-lead>img,.snapshot-tail>img{display:block;width:100%;height:auto;max-width:none}.snapshot-tail{overflow:hidden}.snapshot-tail>img{margin-top:-272%}
.snapshot-project .snapshot-composite img{position:static;width:100%;height:auto;transform:none!important;border-radius:0;box-shadow:none}
.preview-window.is-playing .preview-image{animation:none;transform:translateY(var(--pan-end,0px));transition:transform var(--pan-duration,5s) cubic-bezier(.45,0,.25,1)}
.snapshot-project .project-screen{position:absolute;top:24%;left:10%;width:100%;height:76%;border-radius:var(--control-radius);overflow:hidden;transform:rotate(-7deg);box-shadow:0 18px 40px #0002}
.snapshot-project.rotisa .project-screen{transform:rotate(7deg)}
.snapshot-project.venus .project-screen{transform:rotate(-6deg)}
.snapshot-project .preview-window{height:100%;overflow:clip;background:#fff}
.snapshot-project .preview-window:focus-visible{outline-offset:-4px}
.snapshot-project .preview-image{display:block;position:static;top:auto;left:auto;width:100%;height:auto;max-width:none;object-fit:initial;border-radius:0;box-shadow:none;transform:translateY(0)}
.snapshot-project .preview-window.is-playing .preview-image{transform:translateY(var(--pan-end,0px))}
.project-visual.snapshot-project:hover .preview-image{transform:translateY(0)}
.project-visual.snapshot-project:hover .is-playing .preview-image{transform:translateY(var(--pan-end,0px))}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.case-card .preview-window{overflow:auto;overscroll-behavior-x:contain}.preview-image,.snapshot-project .preview-image{transform:none!important;transition:none!important}}
.snapshot-project .preview-image{transform:none!important;transition:none!important;animation:none!important}
/* A single native link covers each static homepage project card. */
.project{position:relative}
.project-card-link{position:absolute;inset:0;z-index:1;border-radius:var(--control-radius)}
.project-card-link:focus-visible{outline:3px solid var(--primary);outline-offset:6px}
.project:has(.project-card-link):hover .project-title h3{text-decoration:underline;text-underline-offset:5px}