/* Animation belongs to portfolio only. The original hero and keyboard keep their backdrop. */
.portfolio-atmosphere { position: absolute; inset: 0 0 auto; height: clamp(720px, 65vw, 1080px); z-index: -1; overflow: hidden; pointer-events: none; background: url('assets/images/portfolio-ambient-desktop-v1.webp') center / cover no-repeat; mask-image: linear-gradient(transparent, #000 100px, #000 64%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 100px, #000 64%, transparent); }
.portfolio-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; opacity: 0; }
.portfolio-atmosphere.has-film { background-image: none; }
.portfolio-atmosphere.has-film .portfolio-film { opacity: 1; }
@media (max-width: 760px) {
  .portfolio-atmosphere { height: 980px; background-image: url('assets/images/portfolio-ambient-mobile-v1.webp'); mask-image: linear-gradient(transparent, #000 70px, #000 65%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 70px, #000 65%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .portfolio-film { display: none; } }