.project-card{position:relative;transition:transform .3s ease,border-color .3s ease}
.project-open{position:absolute;inset:0;z-index:5;width:100%;height:100%;background:transparent;border:0;border-radius:0;cursor:pointer;padding:0}
.project-open:focus-visible{outline:2px solid var(--blue);outline-offset:8px}
.project-title-row .arrow{transition:transform .3s ease,color .3s ease}
.project-visual{transition:border-color .3s ease}
.project-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.65,.3,1)}
.visual-ccs .project-cover{object-fit:contain;background:#111628}
.project-card .case-button{pointer-events:none}
.case-media{margin:25px 0 28px}
.case-media img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.case-media figcaption{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1.8;margin-top:10px}
.contribution-list{list-style:none;counter-reset:contribution;margin:0;padding:0}
.contribution-list li{position:relative;counter-increment:contribution;padding:16px 0 16px 35px;border-top:1px solid var(--line);margin:0;line-height:1.95}
.contribution-list li:before{content:counter(contribution,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:var(--mono);font-size:9px;color:var(--blue)}
@media(hover:hover){.project-card:hover{transform:translateY(-4px);border-color:var(--blue)}.project-card:hover .project-visual{border-color:var(--blue)}.project-card:hover .project-cover{transform:scale(1.025)}.project-card:hover .arrow{transform:translate(3px,-3px);color:var(--blue)}.project-card:hover .case-button{border-color:var(--blue)}}
.project-card:focus-within .arrow{transform:translate(3px,-3px);color:var(--blue)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal.is-visible.project-card{transition:opacity .65s ease,transform .3s ease,border-color .3s ease}
@media(hover:hover){.reveal.is-visible.project-card:hover{transform:translateY(-4px)}}
.hero-copy{animation:hero-enter .75s cubic-bezier(.2,.65,.3,1) both}
.hero-art{animation:horizon-enter 1.3s ease both}
dialog[open]{animation:dialog-enter .22s ease both}
dialog[open]::backdrop{animation:backdrop-enter .22s ease both}
@keyframes hero-enter{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes horizon-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.visual-ccs,.visual-cave{height:auto;aspect-ratio:1.8}.project-cover{position:absolute;inset:0}.case-media{margin:20px 0}.contribution-list li{padding-left:29px}.project-open:focus-visible{outline-offset:5px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}