/* ===================================================================
   animate-ibo.css — IBO Computers, 02-08-2026

   Dit bestand vervangt webdigify/animate.css in common/header.twig.
   Het origineel is 60 kB en bevat 69 klassen en 123 keyframe-blokken:
   de complete Animate.css-bibliotheek, met bounce, flash, shake, tada,
   rotateIn, zoomOut en tientallen andere animaties.

   Gemeten op 02-08-2026, op zeven paginasoorten (homepage, categorie,
   product, aanbiedingen, winkelwagen, informatiepagina en contact):
   van die 69 klassen komen er precies twee voor op de hele site,
   hb-animate-element en bottom-to-top. De andere 67 staan nergens in
   een sjabloon en nergens in de uitgeserveerde HTML. Ook de richtingen
   top-to-bottom, left-to-right en right-to-left worden niet gebruikt;
   alle negen sjablonen met een animatieblok kiezen bottom-to-top.

   Hieronder staat alleen wat overblijft: de beginstand, de regel voor
   bottom-to-top en de ene keyframe-animatie waar die naar verwijst.
   Van 60 kB naar minder dan 1 kB, met precies hetzelfde resultaat op
   het scherm.

   Wilt u er later een andere richting bij, bijvoorbeeld left-to-right,
   haal dan uit het originele animate.css zowel de regel
   .hb-animate-element.hb-in-viewport.left-to-right als het bijbehorende
   @keyframes fadeInLeft op. Zonder dat keyframe-blok gebeurt er niets.
   Het origineel blijft gewoon op de server staan.

   Hoe het samenwerkt met de rest:
   - ibo.js zet de klasse hb-in-viewport op een blok zodra het in beeld
     komt. Daarvoor is inview.js nodig (de selector :in-viewport).
   - In common/header.twig staat een vangnet dat na 2,5 seconde alles
     alsnog zichtbaar maakt, voor het geval er in het JavaScript iets
     stukgaat. Dat blijft staan.
   =================================================================== */

.hb-animate-element {
  opacity: 0;
}

.hb-animate-element.hb-in-viewport.bottom-to-top {
  opacity: 1;
  animation: 1s ease 0s normal none 1 fadeInUp;
  -webkit-animation: 1s ease 0s normal none 1 fadeInUp;
  -moz-animation: 1s ease 0s normal none 1 fadeInUp;
  -o-animation: 1s ease 0s normal none 1 fadeInUp;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}