/* SPDX-License-Identifier: MIT
 * LSD ✨ lsd-fx.css — entrance-animation subset for the `.lsd-fx--*` class-chain.
 *
 * This is the transition-based entrance layer driven by lsd-anim.js: an
 * IntersectionObserver adds `.lsd-fx--in` when an element scrolls into view,
 * and these rules transition it from its hidden start state to visible.
 *
 * Mirrors src/framework/lsd-motion/_fx.scss (whose fully-compiled form ships in
 * lsd-motion.min.css). Extracted + compacted here so the DeadWatch marketing
 * site stays self-contained (static nginx, no CDN). Class names match the LSD
 * runtime exactly: .lsd-fx--fade-in / --slide-up / --slide-down / --slide-left /
 * --slide-right / --zoom-in / --blur-in, plus --duration-* / --delay-* modifiers.
 *
 * Reduced motion: every element snaps straight to its end state, no transition.
 */

[class*="lsd-fx--"] {
  --lsd-fx-duration: 600ms;
  --lsd-fx-delay: 0ms;
  --lsd-fx-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --lsd-fx-distance: 32px;
}

.lsd-fx--fade-in,
.lsd-fx--slide-up,
.lsd-fx--slide-down,
.lsd-fx--slide-left,
.lsd-fx--slide-right,
.lsd-fx--zoom-in,
.lsd-fx--blur-in {
  transition:
    opacity   var(--lsd-fx-duration) var(--lsd-fx-ease) var(--lsd-fx-delay),
    transform var(--lsd-fx-duration) var(--lsd-fx-ease) var(--lsd-fx-delay),
    filter    var(--lsd-fx-duration) var(--lsd-fx-ease) var(--lsd-fx-delay);
  will-change: opacity, transform, filter;
}

.lsd-fx--fade-in:not(.lsd-fx--in)    { opacity: 0; }
.lsd-fx--slide-up:not(.lsd-fx--in)   { opacity: 0; transform: translateY(var(--lsd-fx-distance)); }
.lsd-fx--slide-down:not(.lsd-fx--in) { opacity: 0; transform: translateY(calc(var(--lsd-fx-distance) * -1)); }
.lsd-fx--slide-left:not(.lsd-fx--in) { opacity: 0; transform: translateX(var(--lsd-fx-distance)); }
.lsd-fx--slide-right:not(.lsd-fx--in){ opacity: 0; transform: translateX(calc(var(--lsd-fx-distance) * -1)); }
.lsd-fx--zoom-in:not(.lsd-fx--in)    { opacity: 0; transform: scale(0.92); }
.lsd-fx--blur-in:not(.lsd-fx--in)    { opacity: 0; filter: blur(12px); }

.lsd-fx--in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* duration modifiers */
.lsd-fx--duration-sm { --lsd-fx-duration: 320ms; }
.lsd-fx--duration-md { --lsd-fx-duration: 500ms; }
.lsd-fx--duration-lg { --lsd-fx-duration: 800ms; }
.lsd-fx--duration-xl { --lsd-fx-duration: 1100ms; }

/* delay modifiers (stagger) */
.lsd-fx--delay-xs { --lsd-fx-delay:  80ms; }
.lsd-fx--delay-sm { --lsd-fx-delay: 160ms; }
.lsd-fx--delay-md { --lsd-fx-delay: 280ms; }
.lsd-fx--delay-lg { --lsd-fx-delay: 420ms; }

/* Respect the user's motion preference — jump to end state, no transition. */
@media (prefers-reduced-motion: reduce) {
  [class*="lsd-fx--"] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}