/* Animaties publieke site (test, nov 2026).
   Elke animatie staat alleen aan als haar woord in html[data-anim] staat:
   scroll (verschijnen bij scrollen), zoekblok (zoekblok bij laden), zweef (zweven en klikken),
   tab (tabblad wisselen), tellen (cijfers tellen, alleen script).
   Bij "minder beweging" op het apparaat gebeurt er niets. */
@keyframes ic-omhoog { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ic-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ic-tab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* 1. Verschijnen bij scrollen: het script zet .ic-reveal op blokken en .ic-zichtbaar zodra ze in beeld komen */
    html[data-anim~="scroll"] .ic-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .5s ease, transform .5s ease;
        transition-delay: var(--ic-vertraging, 0s);
    }
    html[data-anim~="scroll"] .ic-reveal.ic-zichtbaar { opacity: 1; transform: none; }

    /* 2. Zoekblok bij laden: alleen de vakjes komen een voor een in beeld (de kaart en de kop staan er meteen,
       anders lijkt het blok twee keer te laden) */
    html[data-anim~="zoekblok"] .home-page-section .hp-blok { animation: ic-omhoog .35s ease both; animation-delay: calc(.1s + var(--ic-i, 0) * 40ms); }

    /* 3. Zweven en klikken: iets omhoog met zachte schaduw; knoppen drukken iets in.
       Alleen met een muis (hover: hover): op een aanraakscherm blijft :hover na een tik hangen en dat voelt kapot. */
    @media (hover: hover) and (pointer: fine) {
        html[data-anim~="zweef"] .hp-blok,
        html[data-anim~="zweef"] .category-card,
        html[data-anim~="zweef"] .custom-card,
        html[data-anim~="zweef"] .whychose_us .banner { transition: transform .18s ease, box-shadow .18s ease, border-color .15s, background-color .15s, color .15s; }
        html[data-anim~="zweef"] .hp-blok:hover,
        html[data-anim~="zweef"] .category-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 91, 65, .12); }
        html[data-anim~="zweef"] .custom-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 91, 65, .10) !important; }
        html[data-anim~="zweef"] .btn { transition: transform .12s ease, background-color .15s, border-color .15s, color .15s; }
        html[data-anim~="zweef"] .btn:active,
        html[data-anim~="zweef"] .hp-blok:active,
        html[data-anim~="zweef"] .category-card:active { transform: scale(.97); }
    }

    /* 4. Tabblad wisselen: de nieuwe inhoud komt zacht in beeld. Pas na een klik op een tabblad (het script zet
       data-ic-gewisseld), niet bij het laden van de pagina. */
    html[data-anim~="tab"] .home-page-section .tab-content[data-ic-gewisseld] > .tab-pane.active { animation: ic-tab .3s ease both; }

    /* Telefoon: korter en zonder vertraging per blok, anders loopt het beeld achter bij snel scrollen */
    @media (max-width: 767.98px) {
        html[data-anim~="scroll"] .ic-reveal { transform: translateY(10px); transition-duration: .3s, .3s; transition-delay: 0s !important; }
        html[data-anim~="zoekblok"] .home-page-section .hp-blok { animation-duration: .3s; animation-delay: calc(.05s + var(--ic-i, 0) * 25ms); }
        html[data-anim~="tab"] .home-page-section .tab-content[data-ic-gewisseld] > .tab-pane.active { animation-duration: .2s; }
    }
}