/**
 * UPDATE 2601042126
 * RMA Animations Library
 * Custom scroll-triggered animations
 * Usage: Add class to element + configure via CSS variables
 * Example: <div class="rma-fade-in" style="--duration: 1s; --delay: 0.2s; --trigger: 30;">
 */

/* ========================================
   ACCESSIBILITY: Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  [class*="rma-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ========================================
   Disable RMA animations by device
   ======================================== */
@media (max-width: 768px) {
  .rma-no-mobile {
    /* Entrance animations */
    animation: none !important;
    --animation-name: none !important;
    
    /* Scroll animations */
    --scroll-percent: 1 !important;
    
    /* Reset all transforms/effects */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ========================================
   BASE ANIMATION STYLES
   ======================================== */

[class*="rma-"] {
  animation-name: var(--animation-name);
  animation-duration: var(--duration, 1s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: var(--easing, ease-in-out);
  animation-fill-mode: forwards;
}

/* Helper class for infinite loop */
.rma-loop {
  animation-iteration-count: infinite;
}

/* ========================================
   1. WIPE LEFT (Left to Right reveal)
   ======================================== */

.rma-wipe-left {
  opacity: 0;
}

@keyframes rma-wipe-left {
  0% {
    opacity: 1;
    clip-path: polygon(0 0, 1% 0, 1% 100%, 0 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ========================================
   2. FADE IN
   ======================================== */

.rma-fade-in {
  opacity: 0;
}

@keyframes rma-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ========================================
   3. FADE UP (Fade + Slide from bottom)
   ======================================== */

.rma-fade-up {
  opacity: 0;
}

@keyframes rma-fade-up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   4. FADE DOWN (Fade + Slide from top)
   ======================================== */

.rma-fade-down {
  opacity: 0;
}

@keyframes rma-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   5. SLIDE UP (From bottom)
   ======================================== */

.rma-slide-up {
  opacity: 0;
}

@keyframes rma-slide-up {
  0% {
    opacity: 1;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   6. SLIDE DOWN (From top)
   ======================================== */

.rma-slide-down {
  opacity: 0;
}

@keyframes rma-slide-down {
  0% {
    opacity: 1;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   7. SLIDE LEFT (From right)
   ======================================== */

.rma-slide-left {
  opacity: 0;
}

@keyframes rma-slide-left {
  0% {
    opacity: 1;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   8. SLIDE RIGHT (From left)
   ======================================== */

.rma-slide-right {
  opacity: 0;
}

@keyframes rma-slide-right {
  0% {
    opacity: 1;
    transform: translateX(var(--slide-distance, -100px));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   9. ZOOM IN (Scale from small)
   ======================================== */

.rma-zoom-in {
  opacity: 0;
}

@keyframes rma-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   10. ZOOM OUT (Scale from large)
   ======================================== */

.rma-zoom-out {
  opacity: 0;
}

@keyframes rma-zoom-out {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   11. BLUR IN (Blur to clear)
   ======================================== */

.rma-blur-in {
  opacity: 0;
}

@keyframes rma-blur-in {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* ========================================
   12. PULSE (Gentle scale pulse)
   ======================================== */

.rma-pulse {
  opacity: 0;
}

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

/* ========================================
   13. BOUNCE (Bounce effect)
   ======================================== */

.rma-bounce {
  opacity: 0;
}

@keyframes rma-bounce {
  0% {
    opacity: 1;
    transform: translateY(-45px);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   14. FADE LEFT (Fade + Slide from Left)
   ======================================== */

.rma-fade-left {
  opacity: 0;
}

@keyframes rma-fade-left {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ========================================
   15. FADE RIGHT (Fade + Slide from Right)
   ======================================== */

.rma-fade-right {
  opacity: 0;
}

@keyframes rma-fade-right {
  0% {
    opacity: 0;
    transform: translateX(var(--slide-distance, -50px));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}