/*
 * Open Season Media motion foundation.
 * Inert by default: motion only runs when future markup opts in with a
 * motion utility class or data-motion attribute and motion.js is available.
 */

:root {
  /* Timing */
  --osm-motion-duration-fast: 180ms;
  --osm-motion-duration-base: 520ms;
  --osm-motion-duration-slow: 720ms;
  --osm-motion-delay: 0ms;

  /* Distance */
  --osm-motion-distance-xs: 0.5rem;
  --osm-motion-distance-sm: 1rem;
  --osm-motion-distance-md: 1.5rem;
  --osm-motion-distance-lg: 2.5rem;

  /* Easing */
  --osm-motion-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --osm-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --osm-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --osm-motion-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);

  /* Stagger */
  --osm-motion-stagger-interval: 80ms;
  --osm-motion-stagger-interval-tight: 48ms;
  --osm-motion-stagger-interval-wide: 120ms;

  /* Opacity and transform defaults */
  --osm-motion-opacity-start: 0;
  --osm-motion-opacity-end: 1;
  --osm-motion-scale-start: 0.98;
  --osm-motion-scale-end: 1;
  --osm-motion-start-transform: none;
  --osm-motion-end-transform: none;
}

.fade-in,
[data-motion="fade-in"] {
  --osm-motion-start-transform: none;
}

.fade-up,
[data-motion="fade-up"] {
  --osm-motion-start-transform: translate3d(0, var(--osm-motion-distance-sm), 0);
}

.fade-left,
[data-motion="fade-left"] {
  --osm-motion-start-transform: translate3d(var(--osm-motion-distance-sm), 0, 0);
}

.fade-right,
[data-motion="fade-right"] {
  --osm-motion-start-transform: translate3d(calc(var(--osm-motion-distance-sm) * -1), 0, 0);
}

.scale-in,
[data-motion="scale-in"] {
  --osm-motion-start-transform: scale(var(--osm-motion-scale-start));
}

.reveal,
[data-motion="reveal"] {
  --osm-motion-duration: var(--osm-motion-duration-slow);
  --osm-motion-start-transform: translate3d(0, var(--osm-motion-distance-xs), 0);
}

.stagger,
[data-stagger] {
  --osm-motion-stagger: var(--osm-motion-stagger-interval);
}

.motion-safe {
  --osm-motion-duration: var(--osm-motion-duration-base);
}

.motion-reduce {
  --osm-motion-duration: 1ms;
  --osm-motion-delay: 0ms;
  --osm-motion-start-transform: none;
}

.osm-motion-js :where([data-motion], .fade-in, .fade-up, .fade-left, .fade-right, .scale-in, .reveal)[data-motion-state="pending"] {
  opacity: var(--osm-motion-opacity-start);
  transform: var(--osm-motion-start-transform);
}

.osm-motion-js :where([data-motion], .fade-in, .fade-up, .fade-left, .fade-right, .scale-in, .reveal)[data-motion-state="active"] {
  animation-delay: var(--osm-motion-delay);
  animation-duration: var(--osm-motion-duration, var(--osm-motion-duration-base));
  animation-fill-mode: both;
  animation-name: osm-motion-enter;
  animation-timing-function: var(--osm-motion-ease, var(--osm-motion-ease-enter));
  will-change: opacity, transform;
}

.osm-motion-js :where([data-motion], .fade-in, .fade-up, .fade-left, .fade-right, .scale-in, .reveal)[data-motion-state="complete"] {
  opacity: var(--osm-motion-opacity-end);
  transform: var(--osm-motion-end-transform);
  will-change: auto;
}

@keyframes osm-motion-enter {
  from {
    opacity: var(--osm-motion-opacity-start);
    transform: var(--osm-motion-start-transform);
  }

  to {
    opacity: var(--osm-motion-opacity-end);
    transform: var(--osm-motion-end-transform);
  }
}

@media (prefers-reduced-motion: reduce) {
  .osm-motion-js :where([data-motion], .fade-in, .fade-up, .fade-left, .fade-right, .scale-in, .reveal) {
    animation: none !important;
    opacity: var(--osm-motion-opacity-end) !important;
    transform: var(--osm-motion-end-transform) !important;
    transition-duration: 0.01ms !important;
    will-change: auto !important;
  }
}