/* PicaMovies Performance Mode Styles */
/* Activated automatically on weak devices */

/* ── Hero: replace blur with a strong gradient so it still looks good ── */
.perf-mode .hero-bg-blur,
.perf-mode .hero-slide .hero-overlay {
    filter: none !important;
    /* Use the backdrop image as a darkened background instead of removing it */
    opacity: 0.45 !important;
}

/* Ensure the hero-overlay gradient is always present on perf-mode */
.perf-mode .hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(7, 10, 18, 0.95) 0%,
        rgba(7, 10, 18, 0.7)  50%,
        rgba(7, 10, 18, 0.5) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Hero text must stay readable */
.perf-mode .hero-inner,
.perf-mode .hero-content {
    position: relative;
    z-index: 2;
}

/* Hero slider height adjustment for small devices */
.perf-mode .hero-slider {
    height: 380px !important;
}

/* Disable expensive transforms */
.perf-mode .movie-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.perf-mode .movies-scroller {
    scroll-behavior: auto !important;
}

.perf-mode .card-hover-overlay {
    display: none !important;
}

.perf-mode .movie-card::before {
    display: none !important;
}

.perf-mode body::before,
.perf-mode body::after {
    display: none !important;
}