/* expx.nl site behaviour styles (see site.js) */

/* Elements that only exist in another state (menu open, hover) */
[data-st-off] {
  display: none !important;
}

/* Size/position changes of hovered components (underlines, image zoom) animate like Framer's springs */
[data-st-hover] * {
  transition-property: width, height, top, left, right, bottom;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Formspark form */
form[data-st-form] input[type='submit'] {
  transition: opacity 300ms ease;
}
form[data-st-form] input[type='submit']:hover {
  opacity: 0.8;
}
@keyframes st-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-st-hover] * {
    transition: none;
  }
}

/* Page changes: keep the old page on screen until the next one is ready, then crossfade
   (cross-document view transitions; browsers without support navigate normally) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}