/* Voorbeeld-animaties CarCleaning homepage (test) */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: rustig infaden bij laden pagina */
  .hero-inner > div:first-child{animation:owHeroIn .8s ease both;}
  .hero-logo{animation:owHeroIn .8s ease .15s both;}
  @keyframes owHeroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

  /* USP-balk: icoontjes bijna gelijktijdig infaden, na de hero */
  .usp-grid > div{opacity:0;animation:owUspIn .6s ease forwards;}
  .usp-grid > div:nth-child(1){animation-delay:.9s;}
  .usp-grid > div:nth-child(2){animation-delay:.95s;}
  .usp-grid > div:nth-child(3){animation-delay:1s;}
  .usp-grid > div:nth-child(4){animation-delay:1.05s;}
  @keyframes owUspIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

  /* Scroll-reveal: elementen komen rustig in beeld tijdens scrollen */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .cards3 a.card.reveal:nth-child(1){transition-delay:0s;}
  .cards3 a.card.reveal:nth-child(2){transition-delay:.08s;}
  .cards3 a.card.reveal:nth-child(3){transition-delay:.16s;}

  /* Iets levendiger hover op dienstenkaarten en knoppen */
  a.card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
  a.card:hover{transform:translateY(-6px) scale(1.015);}
  .btn{transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;}
  .btn-primary:hover{box-shadow:0 10px 24px rgba(214,40,40,0.35);}
}