/* One visible picture, including transparent cutouts: never blend two photos. */
.hero .scene{display:none;visibility:hidden;opacity:0;transition:none}
.hero .scene.active{display:block;visibility:visible;opacity:1}
.hero .picture-scene{background:#121212;transition:none}
.hero .picture-scene img{object-fit:contain;object-position:center}
/* Let the opening media extend behind the fixed header. */
body>header{background:rgba(17,17,17,.12);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:background .2s ease,box-shadow .2s ease}
body>header.is-scrolled,body>header:has(details[open]){background:rgba(17,17,17,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 16px #0002}
body>header .login-menu>div,body>header .mobile-menu>div{background:#191919}
@media(prefers-reduced-motion:reduce){body>header{transition:none}}