/* Versão compartilhada (Pagina/Post/Categoria) do efeito "grade cinética
   animada" que já existia só na Introdução da home do turplus
   (turplus/css/components/intro-kinetic-grid.css, usado por
   turplus/index/config_intro.blade.php + h1_hero_menu.blade.php). Aqui
   adaptado pra intros/sections/h1_hero_guard.blade.php (e h1_hero.blade.php,
   se algum dia precisar) - mesmo canvas, mesmo JS (intro-hero-kinetic-grid.js),
   só os seletores trocam de ".cms-intro" pra ".cms-intro-hero-content", que é
   o wrapper real usado por esses arquivos. Fundo branco, canvas cobre só a
   área da própria seção e reage ao mouse/clique de quem estiver sobre ela. */

.cms-intro-hero-content {
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.cms-intro-hero-content canvas.cms-intro-kinetic-grid {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Conteúdo (texto + colagem de fotos) sempre acima do canvas */
.cms-intro-hero-content > .container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cms-intro-hero-content canvas.cms-intro-kinetic-grid {
        display: none;
    }
}