/* Slow, low-contrast mist around the project cards. */
#projekty{position:relative;isolation:isolate;overflow:hidden;max-width:none;width:100%}
#projekty .projects{max-width:1152px;margin-inline:auto}
#projekty:before,#projekty:after{content:"";position:absolute;pointer-events:none;z-index:-1;inset:0 -18%;background:url('assets/mist.svg') center/cover no-repeat;opacity:.34;mask-image:linear-gradient(transparent 0%,#000 28%,#000 68%,transparent 100%);animation:strefa-mist-drift 38s ease-in-out infinite alternate;will-change:transform}
#projekty:after{inset:4% -25% 0;opacity:.22;transform:scaleX(-1);animation-name:strefa-mist-return;animation-duration:51s}
.projects .card{isolation:isolate}
.projects .card:after{content:"";position:absolute;pointer-events:none;inset:30% -45% -25%;z-index:0;background:url('assets/mist.svg') center/850px 460px;opacity:.2;mask-image:linear-gradient(transparent,#000 50%,transparent);animation:strefa-mist-drift 26s ease-in-out infinite alternate}
.projects .card:nth-child(even):after{animation-direction:alternate-reverse;animation-duration:34s}
.projects .card>*{position:relative;z-index:1}
@keyframes strefa-mist-drift{from{transform:translate3d(-5%,3%,0)}to{transform:translate3d(7%,-3%,0)}}
@keyframes strefa-mist-return{from{transform:translate3d(6%,-2%,0) scaleX(-1)}to{transform:translate3d(-7%,4%,0) scaleX(-1)}}
@media(max-width:600px){#projekty:before{opacity:.25}#projekty:after{display:none}.projects .card:after{opacity:.16;animation-duration:38s}}
@media(prefers-reduced-motion:reduce){#projekty:before,#projekty:after,.projects .card:after{animation:none;will-change:auto}}