/**
 * Animaciones genéricas (assets/js/fx.js). Solo con body.fx-on (añadida por
 * fx.js) y nunca con «reducir movimiento». Colores: --fx-accent, --fx-glow.
 */
@media (prefers-reduced-motion: no-preference) {
  .fx-on .fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--fx-accent, #E8590C), rgb(var(--fx-glow, 255, 140, 60)));
    transform: scaleX(var(--fx-progress, 0));
    transform-origin: 0 50%;
    pointer-events: none;
  }

  .fx-on .fx-reveal {
    opacity: 0;
    transition:
      opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--fx-delay, 0s);
  }
  .fx-on .fx-reveal--up { transform: translate3d(0, 36px, 0); }
  .fx-on .fx-reveal--left { transform: translate3d(-40px, 0, 0); }
  .fx-on .fx-reveal--right { transform: translate3d(40px, 0, 0); }
  .fx-on .fx-reveal--zoom { transform: scale(0.94); }
  .fx-on .fx-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .fx-embers {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .fx-on [data-tilt] {
    transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.25s ease-out;
    transform-style: preserve-3d;
  }

  .fx-fly {
    position: fixed;
    z-index: 3000;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF 0%, rgb(var(--fx-glow, 255, 140, 60)) 45%, var(--fx-accent, #E8590C) 100%);
    box-shadow: 0 0 18px 6px rgba(var(--fx-glow, 255, 140, 60), 0.6);
    pointer-events: none;
  }

  .fx-on [data-cart].is-bumped {
    animation: fx-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes fx-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.22) rotate(-8deg); }
    60% { transform: scale(0.95) rotate(4deg); }
    100% { transform: scale(1); }
  }

  @keyframes fx-rise {
    from { transform: translate3d(0, 28px, 0); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  @keyframes fx-kenburns {
    from { transform: scale(1.12) translate3d(1.5%, 1%, 0); }
    to { transform: scale(1) translate3d(0, 0, 0); }
  }

  @keyframes fx-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
  }

  @keyframes fx-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes fx-flicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.06, 0.95) rotate(-3deg); }
    40% { transform: scale(0.97, 1.06) rotate(2deg); }
    60% { transform: scale(1.04, 0.98) rotate(-1deg); }
    80% { transform: scale(0.99, 1.03) rotate(2deg); }
  }

  @keyframes fx-progressbar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .fx-embers,
  .fx-progress {
    display: none !important;
  }
}