/* R&O Keukens — animations. Loaded after site.css (and projecten.css).
   Everything only runs when animaties.js adds .anim to <html>, and never for prefers-reduced-motion. */

/* 1. Smooth page transitions between pages (View Transitions API; browsers without it simply navigate) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.top { view-transition-name: site-header; }
.phero img.bg, .phero-split .ps-photo img { view-transition-name: proj-hero; }
::view-transition-group(proj-hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.77,0,.18,1); }
::view-transition-old(proj-hero), ::view-transition-new(proj-hero) { height: 100%; object-fit: cover; }

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

  /* 2. Headlines rise word by word out of an invisible mask */
  .anim rno-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
  .anim rno-i { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms)); }
  .anim .rise-on rno-i { transform: none; }

  /* 3. Cabinet-door reveal for large photos: a charcoal panel slides away, photo settles */
  .anim .door { position: relative; overflow: hidden; isolation: isolate; }
  .anim .door::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--char, #232328);
    transform-origin: right center; transform: scaleX(1); transition: transform 1s cubic-bezier(.77,0,.18,1); pointer-events: none; }
  .anim .door > img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .anim .door.door-on::after { transform: scaleX(0); }
  .anim .door.door-on > img { transform: scale(1); }
  .anim .door.door-done::after { display: none; }
  .anim .door.door-done > img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }

  /* 4. Staggered fade-up for grids and lists */
  .anim .stag { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .anim .stag.stag-on { opacity: 1; transform: none; }

  /* small extra: the walnut underline of the active menu item grows in */
  .anim .nav a[aria-current="page"] { background: linear-gradient(var(--walnut,#6A4433),var(--walnut,#6A4433)) left bottom / 0 1.5px no-repeat; border-color: transparent; transition: background-size .7s cubic-bezier(.2,.75,.2,1) .2s; }
  .anim.loaded .nav a[aria-current="page"] { background-size: 100% 1.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .anim .door::after { transition-delay: calc(var(--i, 0) * 90ms); }
  .anim .door > img { transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .anim span.door { display: block; }
}