
/* Workshop gallery: cut metal surrounds and restrained depth. */
.projects-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 85% 25%,#28364155,transparent 45%),#131a20}
.projects-section>.section-top,.projects-section>h2,.project-grid,.inventory-band{position:relative;z-index:1}
.gallery-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gallery-atmosphere i{position:absolute;width:var(--size);height:var(--size);left:var(--x);top:var(--y);border-radius:50%;background:#d7e3eb;box-shadow:0 0 9px #b5cbdf66;opacity:0;animation:workshop-drift var(--duration) var(--delay) linear infinite}
@keyframes workshop-drift{0%{transform:translate3d(-25px,70px,0);opacity:0}20%,75%{opacity:var(--opacity)}100%{transform:translate3d(50px,-90px,0);opacity:0}}
.gallery-motion{background:transparent;border:1px solid #66727d;color:#dfe7ed;padding:.65rem .9rem;font:inherit;font-size:.875rem;cursor:pointer}
.gallery-motion:focus-visible{outline:2px solid #e5edf5;outline-offset:4px}
.gallery-motion[hidden]{display:none}
.project-card{--rx:0deg;--ry:0deg;--lift:0px;perspective:1100px}
.project-frame{position:relative;padding:10px;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transition:transform .35s ease;isolation:isolate}
.project-frame:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#9cacb5,#33434f 24%,#18222b 65%,#8297a6);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.project-frame:after{content:"";position:absolute;inset:15px -9px -9px 15px;z-index:-2;border-right:1px solid #8a9ba977;border-bottom:1px solid #8a9ba977;pointer-events:none}
.project-card:nth-child(even) .project-frame:before{clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px)}
.project-window{overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.project-card:nth-child(even) .project-window{clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.project-window img{transition:transform .65s ease,filter .65s ease}
.project-card figcaption{display:flex;gap:1rem;align-items:baseline;border:0;max-width:100%;padding:1.4rem .3rem .5rem}
.project-card figcaption:before{content:attr(data-number);color:#8da0ae;font-size:.8rem;letter-spacing:.1em}
@media(hover:hover) and (pointer:fine){.projects-section:not(.motion-paused) .project-card:hover{--lift:-7px}.projects-section:not(.motion-paused) .project-card:hover img{transform:scale(1.035);filter:saturate(1.05) brightness(1.04)}}
.projects-section.motion-paused .gallery-atmosphere i,.projects-section.motion-offscreen .gallery-atmosphere i{animation-play-state:paused}
.projects-section.motion-paused .project-frame{transform:none}
.scroll-reveal{transition:opacity .8s ease,translate .8s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.reveal-pending{opacity:0;translate:0 24px}
@media(max-width:650px){.project-frame{padding:6px}.project-frame:after{inset:10px -4px -5px 10px}.gallery-motion{font-size:.8rem}.projects-section .section-top{flex-wrap:wrap;gap:1rem}.project-card figcaption{gap:.65rem}.project-window img{transform:none!important}}
@media(prefers-reduced-motion:reduce){.gallery-atmosphere{display:none}.project-frame,.project-window img,.scroll-reveal{transition:none!important;transform:none!important}.scroll-reveal.reveal-pending{opacity:1;translate:none}}

/* Component titles overlay the photo, leaving the gallery visually uncluttered. */
.project-card{outline:none}
.project-card figcaption{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;margin:0;padding:3.8rem 1.5rem 1.3rem;max-width:none;color:#fff;background:linear-gradient(transparent,rgba(6,12,18,.95));opacity:0;translate:0 8px;pointer-events:none;transition:opacity .3s,translate .3s;clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px))}
.project-card:hover figcaption,.project-card:focus figcaption,.project-card:focus-within figcaption{opacity:1;translate:0 0}
.project-card:focus-visible .project-frame{outline:2px solid #c7dbea;outline-offset:5px}
.project-card figcaption:before{color:#b7ccdc}
.gallery-atmosphere i{display:none}
.gallery-atmosphere svg{width:100%;height:100%;overflow:visible}
.energy-base{fill:none;stroke:#6d9aae;stroke-width:1;opacity:.22;vector-effect:non-scaling-stroke}
.energy-pulse{fill:none;stroke:#aedfff;stroke-width:2;stroke-linecap:round;stroke-dasharray:110 760;filter:drop-shadow(0 0 5px #79c9fa);vector-effect:non-scaling-stroke;animation:energy-flow 14s linear infinite;opacity:.7}
.energy-pulse:nth-of-type(2n){animation-duration:20s;animation-delay:-6s;stroke:#f0f6fa;opacity:.5}
.energy-pulse:nth-of-type(3n){animation-direction:reverse;animation-delay:-9s}
@keyframes energy-flow{to{stroke-dashoffset:-1740}}
.projects-section.motion-paused .energy-pulse,.projects-section.motion-offscreen .energy-pulse{animation-play-state:paused}
.contact-icon.contact-art{width:88px;height:112px;flex:0 0 88px;background-image:url('assets/contact-icons-higgsfield.webp');background-size:300% 100%;background-repeat:no-repeat;border-radius:12px;border:0;box-shadow:none}
.contact-art.email-art{background-position:0% 50%}.contact-art.phone-art{background-position:50% 50%}.contact-art.address-art{background-position:100% 50%}
@media(hover:none),(pointer:coarse){.project-card figcaption{opacity:1;translate:0 0;padding:2.8rem .8rem .9rem;font-size:.95rem}}
@media(max-width:650px){.project-card figcaption{left:6px;right:6px;bottom:6px;gap:.45rem}.contact-icon.contact-art{width:72px;height:92px;flex-basis:72px}}
@media(prefers-reduced-motion:reduce){.gallery-atmosphere{display:block}.energy-pulse{animation:none;opacity:.25}.project-card figcaption{transition:none}}
.contact-item[href]:hover .contact-icon.contact-art{background-image:url("assets/contact-icons-higgsfield.webp");background-size:300% 100%;background-repeat:no-repeat}.contact-item[href]:hover .email-art{background-position:0% 50%}.contact-item[href]:hover .phone-art{background-position:50% 50%}
