/* Local hero-media treatment inspired by the layered Google Play backdrop.
   It uses an existing local screenshot and never requests a remote asset. */
.app-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    contain: paint;
    background: #202124 !important;
}

.app-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 25%;
    pointer-events: none;
    background-image: url("../img/hero.jpg");
    background-repeat: no-repeat;
    background-position: 50% 29%;
    background-size: cover;
    filter: brightness(.76) saturate(1.16) contrast(1.04);
    animation: crest-hero-pan 18s ease-in-out infinite alternate;
}

.app-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 0 25%;
    pointer-events: none;
    background:
        linear-gradient(90deg, #202124 0%, rgba(32, 33, 36, 0) 56%),
        linear-gradient(0deg, #202124 0%, rgba(32, 33, 36, 0) 56%),
        linear-gradient(270deg, #202124 0%, rgba(32, 33, 36, 0) 56%);
}

.hero-content {
    position: relative !important;
    z-index: 2;
}

@keyframes crest-hero-pan {
    from {
        background-position: 50% 27%;
    }
    to {
        background-position: 47% 31%;
    }
}

@media (max-width: 768px) {
    .app-hero::before {
        inset: 0;
        opacity: .48;
        background-position: 50% 25%;
    }

    .app-hero::after {
        inset: 0;
        background:
            linear-gradient(90deg, rgba(32, 33, 36, .94) 0%, rgba(32, 33, 36, .18) 68%),
            linear-gradient(0deg, #202124 0%, rgba(32, 33, 36, .14) 64%),
            linear-gradient(270deg, rgba(32, 33, 36, .82) 0%, rgba(32, 33, 36, .08) 62%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-hero::before {
        animation: none;
    }
}