/* ================================================================
   htmxRazor Animation Component
   BEM: rhx-animation / rhx-animation--playing
   ~20 predefined @keyframes animations.
   ================================================================ */

/* ── Container ── */
.rhx-animation {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   FADE
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rhx-fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes rhx-fadeInUp {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rhx-fadeInDown {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rhx-fadeInLeft {
  from { opacity: 0; transform: translateX(-1rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes rhx-fadeInRight {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════
   SLIDE
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes rhx-slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes rhx-slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes rhx-slideInDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes rhx-slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes rhx-slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* ══════════════════════════════════════════════════════════════
   ZOOM
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rhx-zoomOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}

/* ══════════════════════════════════════════════════════════════
   BOUNCE
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes rhx-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.5rem); }
}

/* ══════════════════════════════════════════════════════════════
   FLIP
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-flipInX {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

@keyframes rhx-flipInY {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* ══════════════════════════════════════════════════════════════
   PULSE / SHAKE / SPIN
   ══════════════════════════════════════════════════════════════ */

@keyframes rhx-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes rhx-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-0.5rem); }
  40%      { transform: translateX(0.5rem); }
  60%      { transform: translateX(-0.25rem); }
  80%      { transform: translateX(0.25rem); }
}

@keyframes rhx-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rhx-animation {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}