.category-scene { display: none; }
@keyframes category-pan {
    from { transform: scale(1.04) translate3d(-.6%, 0, 0); }
    to { transform: scale(1.08) translate3d(.6%, -6px, 0); }
}
@media (min-width: 1024px) {
    /* The shell and scene must share a surface, including uncovered page gutters. */
    body.desktop-navigation-enabled, body.desktop-navigation-enabled[data-page][data-theme],
    body:has(> .hub-wrap), body:has(> #view.wrap), body:has(> .wrap #cdSearch) {
        background: #17191b !important;
        background-image: none !important;
        transition: none !important;
    }
    body.desktop-navigation-enabled::before, body.desktop-navigation-enabled::after { display: none !important; }
    body.desktop-navigation-enabled :is(#friends, #today) { margin-top: 0 !important; margin-bottom: 0 !important; min-height: 100dvh; }
    body:has(> .hub-wrap), body:has(> #view.wrap), body:has(> .wrap #cdSearch) { overflow-x: clip; }
    :is(.hub-wrap, #view.wrap, body > .wrap)[data-scene] > .category-scene {
        left: 50%; right: auto; width: 100vw; transform: translateX(-50%);
    }
    [data-scene] { isolation: isolate; background: #17191b !important; }
    [data-scene]::before, [data-scene]::after { display: none !important; }
    [data-scene] > .category-scene { display: block; }
    #photos[data-scene], #birthday[data-scene], #pinsPage[data-scene] { margin-block: 0 !important; min-height: 100dvh; }
    #photos[data-scene] .sec-header.profile-hero-header .profile-hero-backdrop {
        mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(transparent, #000 20%, transparent);
        mask-composite: intersect;
        opacity: .35;
    }
    #photos[data-scene] .sec-header.profile-hero-header::after { display: none; }
    .hub-wrap[data-scene], #view.wrap[data-scene], body > .wrap[data-scene], .gh-sheet[data-scene] { position: relative; }
}
body.desktop-embedded { background: #17191b !important; background-image: none !important; overflow-x: clip; transition: none !important; }
body.desktop-embedded::before, body.desktop-embedded::after { display: none !important; }
body.desktop-embedded :is(.hub-wrap, #view.wrap, .wrap)[data-scene] > .category-scene {
    left: 50%; right: auto; width: 100vw; transform: translateX(-50%);
}
body.desktop-embedded [data-scene] { isolation: isolate; background: #17191b !important; }
body.desktop-embedded [data-scene] > .category-scene { display: block; }
body.desktop-embedded :is(.hub-wrap, #view.wrap, .wrap)[data-scene] { position: relative; }
.category-scene {
    position: absolute;
    inset: 0 0 auto;
    height: 380px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
    /* Fade every boundary so constrained directory columns never look like banners. */
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 12%, #000 28%, transparent);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 12%, #000 28%, transparent);
    -webkit-mask-composite: source-in;
    opacity: .65;
}
.category-scene::before {
    content: '';
    position: absolute;
    inset: -10px;
    background-image: linear-gradient(#17191b66, #17191baa), var(--category-image);
    background-size: cover;
    background-position: center;
    animation: category-pan 28s ease-in-out infinite alternate;
}
[data-scene="social"] { --category-image: url('/assets/scenes/social.webp'); }
[data-scene="fitness"] { --category-image: url('/assets/scenes/fitness.webp'); }
[data-scene="creative"] { --category-image: url('/assets/scenes/creative.webp'); }
@media (prefers-reduced-motion: reduce) {
    .category-scene::before { animation: none; transform: none; }
}
@media (forced-colors: active) {
    [data-scene] > .category-scene { display: none !important; }
}