/* Adaptive Safety Solutions: small movements that follow the visitor (polish.js sets html.polish and the values).
 *
 * - The dock's Werkwijze icon (workflow, Hugeicons via AnimateIcons, MIT: see assets/licenties-iconen.txt).
 * - Headlines come in word by word as they reach the screen; the second, coloured part just after the first.
 * - Werkwijze: the line above the steps draws itself with the scroll, and each step lights up when it is reached.
 * - Diensten: the photos open with a wipe (where the section is a list) and drift a little with the scroll.
 * - Hovers: the pillars and steps take the forest line; plain text links ease their underline; the large buttons
 *   lean towards the mouse.
 * Everything here waits for html.polish, so without JavaScript or with reduced motion the page is as it was. */

/* The workflow icon ------------------------------------------------------------------------------------------- */

.di-flow .di-track {
  opacity: 0.25;
}

@media (prefers-reduced-motion: no-preference) {
  .dock a:hover .di-flow .di-box,
  .dock a:focus-visible .di-flow .di-box,
  .dock.is-open .di-flow .di-box {
    animation: di-bump 0.3s ease-in-out var(--di-d) both;
  }

  .dock a:hover .di-flow .di-box2,
  .dock a:focus-visible .di-flow .di-box2,
  .dock.is-open .di-flow .di-box2 {
    animation-delay: calc(var(--di-d) + 0.8s);
  }

  .dock a:hover .di-flow .di-line,
  .dock a:focus-visible .di-flow .di-line,
  .dock.is-open .di-flow .di-line {
    animation: di-draw 0.35s ease-in-out calc(var(--di-d) + 0.1s) both;
  }

  .dock a:hover .di-flow .di-line2,
  .dock a:focus-visible .di-flow .di-line2,
  .dock.is-open .di-flow .di-line2 {
    animation-delay: calc(var(--di-d) + 0.5s);
  }

  .dock a:hover .di-flow .di-node,
  .dock a:focus-visible .di-flow .di-node,
  .dock.is-open .di-flow .di-node {
    animation: di-turn 0.35s ease-in-out calc(var(--di-d) + 0.4s) both;
  }
}

@keyframes di-bump {
  50% { transform: scale(1.2); }
}

@keyframes di-turn {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(45deg) scale(1.3); }
  100% { transform: rotate(90deg) scale(1); }
}

/* Headlines, word by word ------------------------------------------------------------------------------------- */

html.polish h2.is-split[data-reveal]:not(.is-in) {
  opacity: 1;
  transform: none;
}

h2.is-split w-o {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  vertical-align: top;
}

h2.is-split w-i {
  display: inline-block;
  transition: transform 0.9s var(--ease-out) var(--wd, 0ms), opacity 0.6s ease var(--wd, 0ms);
}

html.polish h2.is-split:not(.is-in) w-i {
  opacity: 0;
  transform: translateY(105%);
}

.rv-skip w-i {
  transition: none !important;
}

/* Werkwijze: the line follows the scroll --------------------------------------------------------------------- */

html.polish .steps.is-scrub[data-reveal] li::before,
html.polish .steps.is-scrub[data-reveal]:not(.is-in) li::before {
  transform: scaleX(var(--lp, 0));
  transition: none;
}

/* the head of the line */
html.polish .steps.is-scrub li::after {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(var(--lp, 0) * 100% - 4px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
  opacity: 0;
  transition: opacity 0.3s ease;
}

html.polish .steps.is-scrub li.is-going::after {
  opacity: 1;
}

html.polish .steps.is-scrub li h3,
html.polish .steps.is-scrub li p,
html.polish .steps.is-scrub li .n {
  transition: opacity 0.5s ease, color 0.5s ease;
}

html.polish .steps.is-scrub li:not(.is-lit) h3,
html.polish .steps.is-scrub li:not(.is-lit) p {
  opacity: 0.42;
}

html.polish .steps.is-scrub li:not(.is-lit) .n {
  color: var(--quiet);
}

/* Diensten: wipe and drift ------------------------------------------------------------------------------------ */

html.polish .sectors:not(.is-enhanced) .sector__media {
  clip-path: inset(12% 6% 12% 6% round var(--media-radius));
  transition: clip-path 1.1s var(--ease-out);
}

html.polish .sectors:not(.is-enhanced) .sector__media.is-shown {
  clip-path: inset(0 round var(--media-radius));
}

html.polish .sector__media picture {
  transform: translate3d(0, var(--py, 0%), 0) scale(1.08);
  will-change: transform;
}

/* On the pinned stage the picture holds the photo's box, so its transform does not change the photo's size */
html.polish .sectors.is-enhanced .sector__media picture {
  position: absolute;
  inset: 0;
}

/* Hovers ------------------------------------------------------------------------------------------------------ */

@media (hover: hover) {
  .pillars li {
    position: relative;
  }

  .pillars li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--forest);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out);
  }

  .pillars li:hover::before {
    transform: scaleX(1);
  }

  .pillars li h3,
  .steps li h3 {
    transition: color 0.3s ease;
  }

  .pillars li:hover h3,
  .steps li:hover h3 {
    color: var(--forest);
  }

  main p a:not([class]) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-underline-offset 0.3s var(--ease-out), text-decoration-color 0.3s ease;
  }

  main p a:not([class]):hover {
    text-underline-offset: 5px;
    text-decoration-color: currentColor;
  }
}

/* The large buttons lean towards the mouse (polish.js sets --mx and --my) */
html.polish .cta-btn.is-magnet {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.45s var(--ease-out);
}

html.polish .cta-btn.is-magnet .cta-btn__icon {
  transform: translate3d(calc(var(--mx, 0px) * 0.6), calc(var(--my, 0px) * 0.6), 0);
}

html.polish .cta-btn.is-magnet:hover .cta-btn__icon {
  transform: translate3d(calc(var(--mx, 0px) * 0.6 + 3px), calc(var(--my, 0px) * 0.6), 0);
}

html.polish .cta-btn.is-magnet:hover {
  box-shadow: 0 10px 24px -12px rgba(14, 15, 16, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  h2.is-split w-i,
  html.polish .sectors:not(.is-enhanced) .sector__media {
    transition: none;
  }
}