/* Motion hooks only. Integrate with the website's layout/theme styles. */
:root {
  --ug-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.ug-motion [data-ug-reveal] {
  transition-property: opacity, transform;
  transition-duration: 620ms;
  transition-timing-function: var(--ug-motion-ease);
  transition-delay: var(--ug-delay, 0ms);
}

.ug-motion [data-ug-reveal="hero"] {
  transition-duration: 830ms;
}

/* Keep reveal timing separate from the faster interactive lift. */
.ug-motion [data-ug-reveal].ug-card-lift {
  transition-property: opacity, transform, box-shadow;
  transition-duration: 620ms, 620ms, 210ms;
  transition-delay: var(--ug-delay, 0ms), var(--ug-delay, 0ms), 0ms;
}

.ug-motion [data-ug-reveal].ug-card-lift:hover {
  transition-duration: 620ms, 210ms, 210ms;
  transition-delay: 0ms;
}

.ug-motion [data-ug-reveal].ug-lift {
  transition-property: opacity, transform, box-shadow, color, background-color;
  transition-duration: 830ms, 830ms, 210ms, 200ms, 200ms;
  transition-delay: var(--ug-delay, 0ms), var(--ug-delay, 0ms), 0ms, 0ms, 0ms;
}

.ug-motion [data-ug-reveal].ug-lift:hover,
.ug-motion [data-ug-reveal].ug-lift:focus-visible {
  transition-duration: 830ms, 210ms, 210ms, 200ms, 200ms;
  transition-delay: 0ms;
}

.ug-motion [data-ug-reveal][data-ug-pending="true"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.ug-lift, .ug-card-lift {
  transition: transform 210ms var(--ug-motion-ease), box-shadow 210ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ug-lift:hover { transform: translateY(-2px); }
  .ug-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgb(19 34 56 / .10);
  }
}

.ug-lift:focus-visible { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ug-motion [data-ug-reveal],
  .ug-motion [data-ug-reveal][data-ug-pending="true"],
  .ug-lift, .ug-card-lift {
    opacity: 1;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}