/* Approved Work card: brand-color pixel wash, large blinking eye, caption below. */
.project-tile--eye{container-type:inline-size}
.project-tile--eye>a{--card-eye-visible:0;--card-eye-play:paused;--project-overlay-color:#ff8700;--project-overlay-ink:#050605}
.project-tile--eye .project-media{aspect-ratio:1.6;isolation:isolate}
.project-tile--eye.project-tile--featured .project-media{aspect-ratio:2.24}
.project-tile--eye .project-media>img{transition:transform .55s cubic-bezier(.2,.7,.2,1);transform:scale(calc(1 + var(--card-eye-visible)*.035))}
.project-tile--eye .project-caption{position:static;inset:auto;z-index:auto;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;padding:24px 26px 26px;opacity:1;visibility:visible;pointer-events:auto;color:var(--ink);background:var(--paper);transition:none}
.project-tile--eye .project-caption h2{margin:0;font:500 clamp(22px,4.2cqi,30px)/1.1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.035em;max-width:100%;overflow-wrap:normal}
.project-tile--eye .project-caption h2>span,.project-tile--eye .project-caption p>span{padding:0;background:transparent}
.project-tile--eye .project-caption h2 sup{margin-left:3px;top:2px}
.project-tile--eye .project-caption p{margin:0;font:400 max(var(--mobile-type-min,0px),11px)/1.4 'GT America Mono',monospace;letter-spacing:.035em;text-transform:uppercase;white-space:normal}
.project-hover{position:absolute;inset:0;z-index:2;pointer-events:none;color:var(--project-overlay-ink)}
.project-hover-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(7,1fr)}
.project-hover-tile{display:block;background:var(--project-overlay-color);opacity:calc(var(--card-eye-visible)*.96);transition:opacity 120ms steps(2,end);transition-delay:calc(var(--tile-order)*9ms)}
.project-hover-prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:18px;opacity:var(--card-eye-visible);transform:translateY(calc((1 - var(--card-eye-visible))*12px));transition:opacity .15s ease,transform .25s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--card-eye-visible)*160ms)}
.project-hover-eye{display:block;width:40%;max-width:306px;height:auto;aspect-ratio:17/9;flex:none;fill:currentColor;shape-rendering:crispEdges}
.project-hover-label{display:block;font:400 max(var(--mobile-type-min,0px),12px)/1.4 'GT America Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.project-hover-eye .card-eye-open{animation:project-card-eye-open 4.4s steps(1,end) infinite;animation-play-state:var(--card-eye-play)}
.project-hover-eye .card-eye-half{opacity:0;animation:project-card-eye-half 4.4s steps(1,end) infinite;animation-play-state:var(--card-eye-play)}
.project-hover-eye .card-eye-closed{opacity:0;animation:project-card-eye-closed 4.4s steps(1,end) infinite;animation-play-state:var(--card-eye-play)}
.project-tile--eye>a:focus-visible{--card-eye-visible:1;--card-eye-play:running}
@media(hover:hover){.project-tile--eye>a:hover{--card-eye-visible:1;--card-eye-play:running}}
@media(hover:none){.project-tile--eye>a:active{--card-eye-visible:1;--card-eye-play:running}.project-tile--eye>a:active .project-hover-tile,.project-tile--eye>a:active .project-hover-prompt{transition:none}}
@container(max-width:440px){.project-tile--eye .project-media{aspect-ratio:1.35}.project-tile--eye.project-tile--featured .project-media{aspect-ratio:1.6}.project-tile--eye .project-caption{padding:18px;align-items:flex-start;flex-direction:column;gap:8px}.project-hover-eye{width:49%}.project-hover-prompt{gap:20px}}
@keyframes project-card-eye-open{0%,24%,32%,100%{opacity:1}25%,31%{opacity:0}}
@keyframes project-card-eye-half{0%,24%,27%,29%,32%,100%{opacity:0}25%,30%{opacity:1}}
@keyframes project-card-eye-closed{0%,26%,30%,100%{opacity:0}27%,29%{opacity:1}}
[data-motion="paused"] .project-hover-eye g{animation:none!important}
[data-motion="paused"] .project-hover-eye .card-eye-open{opacity:1}
[data-motion="paused"] .project-hover-eye .card-eye-half,[data-motion="paused"] .project-hover-eye .card-eye-closed{opacity:0}
[data-motion="paused"] .project-hover-tile,[data-motion="paused"] .project-hover-prompt,[data-motion="paused"] .project-tile--eye .project-media>img{transition:none}
@media(prefers-reduced-motion:reduce){.project-hover-tile,.project-hover-prompt,.project-tile--eye .project-media>img{transition:none}.project-hover-eye g{animation:none!important}.project-hover-eye .card-eye-open{opacity:1}.project-hover-eye .card-eye-half,.project-hover-eye .card-eye-closed{opacity:0}}