/* ==========================================================================
   Motion: rustig en verfijnd, afgestemd op een prikkelgevoelige doelgroep.
   - Alleen transform, opacity en clip-path (soepel, geen layoutverschuiving).
   - Geen parallax, geen loops, geen scroll-hijacking.
   - Alles staat uit bij "minder beweging" (prefers-reduced-motion).
   - De onthullingen werken alleen als motion.js draait (html.js-motion); anders is alles gewoon zichtbaar.
   De vormgeving in rust staat volledig in main.css en verandert hier niet.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-shift: 22px;
}

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

  /* ---------- Onthullen bij binnenkomst en scrollen ---------- */

  /* Tot motion.js klaar is: inhoud even verborgen, zodat er niets flitst. */
  .js-motion:not(.motion-ready) main,
  .js-motion:not(.motion-ready) .site-footer { opacity: 0; }

  .js-motion [data-reveal] {
    transition:
      opacity .9s var(--ease-out) var(--d, 0ms),
      transform 1s var(--ease-out) var(--d, 0ms),
      clip-path 1.2s var(--ease-out) var(--d, 0ms);
  }

  /* Omhoog en in beeld */
  .js-motion [data-reveal="up"] { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
  .js-motion [data-reveal="up"].is-in { opacity: 1; transform: none; }

  /* Alleen vervagen (footer) */
  .js-motion [data-reveal="fade"] { opacity: 0; }
  .js-motion [data-reveal="fade"].is-in { opacity: 1; }

  /* Grote foto's: openen vanuit het midden en zakken zacht terug naar ware grootte */
  .js-motion [data-reveal="img"] {
    clip-path: inset(9% 7% 9% 7% round 20px);
    transform: scale(1.06);
    transition:
      clip-path 1.3s var(--ease-out) var(--d, 0ms),
      transform 1.8s var(--ease-out) var(--d, 0ms);
  }
  .js-motion [data-reveal="img"].is-in { clip-path: inset(0 round 20px); transform: none; }

  /* Label op de hero-foto: schuift er na de foto in */
  .js-motion [data-reveal="caption"] { opacity: 0; transform: translate3d(-14px, 0, 0); }
  .js-motion [data-reveal="caption"].is-in { opacity: 1; transform: none; transition-delay: calc(var(--d, 0ms) + 650ms); }

  /* Foto met onderschrift (galerij, praktische informatie): kaart omhoog, foto opent van onder */
  .js-motion [data-reveal="media"] { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
  .js-motion [data-reveal="media"] img {
    clip-path: inset(16% 0 0 0 round 16px);
    transition: clip-path 1.2s var(--ease-out) calc(var(--d, 0ms) + 80ms);
  }
  .js-motion .photo-card[data-reveal="media"] img { clip-path: inset(16% 0 0 0 round 20px); }
  .js-motion [data-reveal="media"].is-in { opacity: 1; transform: none; }
  .js-motion [data-reveal="media"].is-in img { clip-path: inset(0 round 16px); }
  .js-motion .photo-card[data-reveal="media"].is-in img { clip-path: inset(0 round 20px); }

  /* Gouden lijntjes groeien uit */
  .js-motion [data-reveal="rule"] { transform: scaleX(0); transform-origin: left center; }
  .js-motion .quote [data-reveal="rule"] { transform-origin: center; }
  .js-motion [data-reveal="rule"].is-in { transform: none; }

  /* Paginatitels: woord voor woord omhoog uit een masker */
  .js-motion [data-reveal="words"] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
  }
  .js-motion [data-reveal="words"] .w__i {
    display: inline-block;
    transform: translate3d(0, 105%, 0);
    transition: transform 1.05s var(--ease-out);
    transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 55ms);
  }
  .js-motion [data-reveal="words"].is-in .w__i { transform: none; }

  /* Komt iemand binnen via een paginaovergang, dan morpht de foto al: niet nog eens onthullen */
  .vt-arrival [data-reveal="img"] { clip-path: inset(0 round 20px); transform: none; transition: none; }

  /* ---------- Header ---------- */
  .site-header { transition: box-shadow .35s var(--ease-out), background-color .35s var(--ease-out); }
  .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(47, 42, 38, 0.35); }
  .site-header__logo img { transition: transform .45s var(--ease-out); transform-origin: left center; }
  .site-header.is-scrolled .site-header__logo img { transform: scale(0.9); }

  /* Menulink: onderstreping groeit van links bij hover */
  .main-nav__link { position: relative; }
  .main-nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .4s var(--ease-out);
  }
  .main-nav__link:hover::after, .main-nav__link:focus-visible::after { transform: scaleX(1); }
  .main-nav__link[data-active]::after { display: none; }

  /* Uitklapmenu */
  .dropdown__menu { transform-origin: top left; }
  .dropdown__panel:not([hidden]) .dropdown__menu { animation: u-drop .32s var(--ease-out) both; }
  .dropdown__panel:not([hidden]) .dropdown__item { animation: u-rise .45s var(--ease-out) both; }
  .dropdown__panel:not([hidden]) .dropdown__item:nth-child(2) { animation-delay: 40ms; }
  .dropdown__panel:not([hidden]) .dropdown__item:nth-child(3) { animation-delay: 80ms; }
  .dropdown__panel:not([hidden]) .dropdown__item:nth-child(4) { animation-delay: 120ms; }
  .dropdown__panel:not([hidden]) .dropdown__item:nth-child(n+5) { animation-delay: 160ms; }
  .dropdown__item { transition: background-color .2s var(--ease-out); }

  /* Mobiel menu: paneel glijdt open, items volgen kort na elkaar */
  .mobile-nav:not([hidden]) { animation: u-drop .35s var(--ease-out) both; }
  .mobile-nav:not([hidden]) > * { animation: u-rise .5s var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }

  /* Menuknop: hamburger draait naar kruis */
  .menu-toggle__open, .menu-toggle__close {
    display: inline !important;
    transform-box: fill-box; transform-origin: center;
    transition: opacity .25s var(--ease-out), transform .45s var(--ease-out);
  }
  .menu-toggle__close { opacity: 0; transform: rotate(-60deg) scale(.5); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__open { opacity: 0; transform: rotate(60deg) scale(.5); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close { opacity: 1; transform: none; }

  /* ---------- Knoppen en kaarten ---------- */
  .btn, .gform_wrapper .gform_button {
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .25s var(--ease-out);
  }
  .btn:active, .gform_wrapper .gform_button:active { transform: scale(0.98); }
  .btn svg { transition: transform .4s var(--ease-out); }
  .btn:hover svg { transform: translateX(3px); }
  .text-link svg { transition: transform .4s var(--ease-out); }
  .text-link:hover svg { transform: translate(2px, -2px); }

  .service-card { transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
  .service-card__img { transition: transform 1.1s var(--ease-out); }
  .service-card:hover .service-card__img { transform: scale(1.045); }

  .social__link { transition: background-color .25s var(--ease-out), transform .3s var(--ease-out); }
  .social__link:hover { transform: translateY(-2px); }

  /* ---------- Formulieren ---------- */
  .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  }
  .gform_wrapper .gform_validation_errors,
  .gform_wrapper .gfield_validation_message,
  .gform_confirmation_message { animation: u-rise .5s var(--ease-out) both; }

  /* ---------- WhatsApp-knop: komt één keer per bezoek binnen ---------- */
  .js-motion .whatsapp.wa-intro { animation: u-pop .8s var(--ease-out) 1.4s both; }
  .whatsapp { transition: background-color .25s var(--ease-out), transform .35s var(--ease-out); }
  .whatsapp:hover { transform: translateY(-2px); }

  /* ---------- Paginaovergangen (View Transitions, Chrome/Edge/Safari) ---------- */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: u-vt-out .22s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: u-vt-in .5s var(--ease-out) both; }

  .site-header { view-transition-name: site-header; }
  .whatsapp { view-transition-name: whatsapp; }
  ::view-transition-group(site-header),
  ::view-transition-group(whatsapp) { animation-duration: .5s; animation-timing-function: var(--ease-out); }

  /* Foto van een dienstkaart morpht naar de grote foto op de dienstpagina */
  ::view-transition-group(*.dienst-foto) {
    animation-duration: .75s; animation-timing-function: var(--ease-out);
    overflow: clip; border-radius: 20px;
  }
  ::view-transition-old(*.dienst-foto),
  ::view-transition-new(*.dienst-foto) { height: 100%; object-fit: cover; animation-duration: .75s; }
}

@keyframes u-drop { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.985); } }
@keyframes u-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes u-pop { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.85); } }
@keyframes u-vt-out { to { opacity: 0; } }
@keyframes u-vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* Afdrukken: altijd alles zichtbaar */
@media print {
  .js-motion main, .js-motion .site-footer, .js-motion [data-reveal], .js-motion [data-reveal] * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}