/* Limite les repaints couteux de la page d'accueil pendant le scroll. */
#collabs-showcase,
.groover-showcase,
.youtube-popular {
    contain: layout paint style;
}

/* Ces halos n'apportent pas d'information et forçaient des repaints continus. */
.collabs-orbit,
#collabs-showcase::before,
#collabs-showcase::after,
.groover-showcase__glow,
.home-certifications__halo,
.youtube-popular::before {
    animation: none !important;
}

/* Le flou dynamique est particulièrement coûteux sur mobile. */
@media (max-width: 900px), (pointer: coarse) {
    .channel,
    .collabs-filter-btn,
    .collabs-sort-btn,
    .collab-tag,
    .collabs-nav,
    .groover-showcase .overlay-left,
    .groover-showcase .overlay-center,
    .groover-showcase .overlay-right,
    .certification-card__badge,
    .youtube-card__rank {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Pendant un geste, la priorité va au déplacement natif de la page. */
html.tvr-is-scrolling .main-content *,
html.tvr-is-scrolling .main-content *::before,
html.tvr-is-scrolling .main-content *::after {
    animation-play-state: paused !important;
}

html.tvr-is-scrolling .collabs-track,
html.tvr-is-scrolling .groover-showcase #carousel2,
html.tvr-is-scrolling .home-certifications__cards,
html.tvr-is-scrolling .youtube-popular__track {
    scroll-behavior: auto !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .main-content *,
    .main-content *::before,
    .main-content *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}