:root {
  --lux-motion-duration: 720ms;
  --lux-motion-delay: 0ms;
  --lux-motion-distance: 28px;
  --lux-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lux-stagger-step: 90ms;
}

.lux-motion-ready [data-lux-motion] {
  opacity: 0;
  transform: translate3d(0, var(--lux-motion-distance), 0);
  will-change: opacity, transform;
}

.lux-motion-ready [data-lux-motion="fade-left"] {
  transform: translate3d(calc(var(--lux-motion-distance) * -1), 0, 0);
}

.lux-motion-ready [data-lux-motion="fade-right"] {
  transform: translate3d(var(--lux-motion-distance), 0, 0);
}

.lux-motion-ready [data-lux-motion="zoom-in"] {
  transform: scale(0.96);
}

.lux-motion-ready [data-lux-motion="reveal"] {
  transform: translate3d(0, calc(var(--lux-motion-distance) * 0.5), 0) scale(0.985);
}

.lux-motion-ready [data-lux-motion="jump-in"] {
  opacity: 0;
  transform: scale(0.2) translateY(60px);
  transition: none;
}

.lux-motion-ready [data-lux-motion].is-visible {
  opacity: 1;
  transform: none;
  animation: lux-fade-up var(--lux-motion-duration) var(--lux-motion-ease) var(--lux-motion-delay) both;
}

.lux-motion-ready [data-lux-motion="fade-left"].is-visible {
  animation-name: lux-fade-left;
}

.lux-motion-ready [data-lux-motion="fade-right"].is-visible {
  animation-name: lux-fade-right;
}

.lux-motion-ready [data-lux-motion="zoom-in"].is-visible {
  animation-name: lux-zoom-in;
}

.lux-motion-ready [data-lux-motion="reveal"].is-visible {
  animation-name: lux-reveal;
}

.lux-motion-ready [data-lux-motion="jump-in"].is-visible {
  animation: lux-jump-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 1;
  transform: none;
}

[data-lux-stagger] > * {
  --lux-motion-delay: calc(var(--lux-index, 0) * var(--lux-stagger-step));
}

.lux-hover-lift {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.lux-hover-lift:hover {
  transform: translateY(-4px);
}

.lux-float {
  animation: lux-float 6s ease-in-out infinite;
}

@keyframes lux-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes lux-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--lux-motion-distance), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lux-fade-left {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--lux-motion-distance) * -1), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lux-fade-right {
  from {
    opacity: 0;
    transform: translate3d(var(--lux-motion-distance), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lux-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lux-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--lux-motion-distance) * 0.5), 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lux-jump-in {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(60px);
  }
  40% {
    opacity: 1;
    transform: scale(1.12) translateY(-10px);
  }
  65% {
    transform: scale(0.95) translateY(6px);
  }
  85% {
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-motion-ready [data-lux-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .lux-hover-lift,
  .lux-float {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}