/* PurplePerfect V33 additive motion layer.
   This file intentionally changes no layout, spacing, colour, typography or imagery. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pp-v33-page-out .32s cubic-bezier(.2,.8,.2,1) both;
}

::view-transition-new(root) {
  animation: pp-v33-page-in .4s cubic-bezier(.16,1,.3,1) both;
}

.pp-global-nav {
  view-transition-name: pp-v33-global-nav;
}

.pp-service-nav {
  view-transition-name: pp-v33-service-nav;
}

@keyframes pp-v33-page-out {
  to { opacity: 0; transform: translate3d(0,-5px,0); }
}

@keyframes pp-v33-page-in {
  from { opacity: 0; transform: translate3d(0,7px,0); }
}

@keyframes pp-v33-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pp-v33-modal-shell-in {
  from { opacity: 0; transform: translate3d(0,18px,0) scale(.975); }
  to { opacity: 1; transform: none; }
}

.pp-video-modal.is-open {
  animation: pp-v33-modal-backdrop-in .34s cubic-bezier(.16,1,.3,1) both;
}

.pp-video-modal.is-open .pp-video-shell {
  animation: pp-v33-modal-shell-in .48s cubic-bezier(.16,1,.3,1) both;
}

html.pp-v33-motion .pp-v33-reveal-item {
  opacity: 0;
  transform: translate3d(0,22px,0);
  transition:
    opacity .66s cubic-bezier(.16,1,.3,1),
    transform .66s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--pp-v33-delay,0ms);
}

html.pp-v33-motion .pp-v33-reveal-item.pp-v33-visible {
  opacity: 1;
  transform: none;
}

@media (hover:hover) and (pointer:fine) {
  .pp-v33-motion-feedback {
    transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s cubic-bezier(.16,1,.3,1);
  }

  .pp-v33-motion-feedback:hover {
    transform: translate3d(0,-3px,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .pp-video-modal.is-open,
  .pp-video-modal.is-open .pp-video-shell {
    animation: none !important;
  }

  html.pp-v33-motion .pp-v33-reveal-item,
  html.pp-v33-motion .pp-v33-reveal-item.pp-v33-visible,
  .pp-v33-motion-feedback,
  .pp-v33-motion-feedback:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}