/* Animaties voor SH Wonen (script: /js/animaties.js). Rustig en kort, in de huisstijl.
   Wie in het besturingssysteem "minder beweging" kiest, krijgt niets hiervan. */

/* Bannerfoto's laden uitgesteld; zonder JavaScript meteen. */
html:not(.js) [data-lazy-bg],
[data-lazy-bg].bg-in { background-image: var(--lazy-bg); }

@media (prefers-reduced-motion: no-preference) {

  /* Blokken schuiven zacht in beeld (klasse .anim zet het script, alleen onder de vouw) */
  .anim {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--anim-i, 0) * 110ms);
  }
  .anim.is-in { opacity: 1; transform: none; }

  /* Hero: tekst komt laag voor laag binnen, beeld zoomt licht uit */
  section.hero .hero-content > * { animation: sh-omhoog .9s cubic-bezier(.2, .7, .2, 1) both; }
  section.hero .hero-content > :nth-child(2) { animation-delay: .08s; }
  section.hero .hero-content > :nth-child(3) { animation-delay: .16s; }
  section.hero .hero-content > :nth-child(4) { animation-delay: .24s; }
  section.hero .hero-content > :nth-child(5) { animation-delay: .32s; }
  section.hero .hero-content > :nth-child(n+6) { animation-delay: .4s; }
  section.hero .hero-image { overflow: hidden; }
  section.hero .hero-image img,
  section.hero .hero-image video { animation: sh-uitzoom 1.8s cubic-bezier(.2, .7, .2, 1) both; }

  @keyframes sh-omhoog {
    from { opacity: .01; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes sh-uitzoom {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
  }

  /* Knoppen komen iets omhoog bij hover */
  .btn, .pc-btn, header nav.navbar .nav-cta { will-change: transform; }
  .btn:hover, .pc-btn:hover, header nav.navbar .nav-cta:hover { transform: translateY(-2px); }

  /* Foto's in de modellen en verhalen zoomen rustig in bij hover */
  section.versions .version-image,
  section.story .story-image,
  .pc-type-img { overflow: hidden; }
  section.versions .version-image img,
  section.story img,
  .pc-type-img img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  section.versions .version:hover .version-image img,
  section.story:hover img,
  .pc-type:hover .pc-type-img img { transform: scale(1.04); }

  /* Kop krijgt een schaduw zodra je scrolt */
  header { transition: box-shadow .4s; }
  html.is-gescrold header nav.navbar.navbar-main { box-shadow: 0 14px 30px rgba(43, 50, 48, .18); }

  /* Vaste CTA: één zachte puls kort na het laden, zodat hij opvalt */
  header nav.navbar .nav-cta { animation: sh-puls 2.4s ease-out 1.2s 1; }
  @keyframes sh-puls {
    0%   { box-shadow: 0 0 0 0 rgba(191, 159, 126, .55); }
    70%  { box-shadow: 0 0 0 14px rgba(191, 159, 126, 0); }
    100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
  }
}