/**
 * Entry Motion Classes - Fade in + Slide Up
 * Apply to individual elements for animated entrance
 * Repeats each time element enters viewport (requires entry-motion.js)
 */

/* Hidden resting state — JS adds .is-visible to trigger animation */
.superblockslider__slide_inner {
  padding: 0;
}
.superblockslider__controls  
{ 
padding:0 3rem !important;
 }
.entry-motion {
  opacity: 0;
  transform: translateX(60px);
  will-change: opacity, transform;
}

/* Active state - plays animation */
.entry-motion.is-visible {
  animation: fadeSlideIn 800ms cubic-bezier(0.22, 0.9, 0.35, 1) both;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Timing variants */
.entry-motion.fast.is-visible {
  animation-duration: 350ms;
}

.entry-motion.slow.is-visible {
  animation-duration: 800ms;
}

/* Delay variants - for staggering without parent wrapper */
.entry-motion.delay-1.is-visible {
  animation-delay: 0ms;
}

.entry-motion.delay-2.is-visible {
  animation-delay: 200ms;
}

.entry-motion.delay-3.is-visible {
  animation-delay: 400ms;
}

.entry-motion.delay-4.is-visible {
  animation-delay: 600ms;
}

.entry-motion.delay-5.is-visible {
  animation-delay: 800ms;
}

/* Slide distance variants — override the keyframe start/end values */
.entry-motion.small-slide {
  transform: translateX(15px);
}
.entry-motion.small-slide.is-visible {
  animation-name: fadeSlideInSmall;
}

.entry-motion.large-slide {
  transform: translateX(60px);
}
.entry-motion.large-slide.is-visible {
  animation-name: fadeSlideInLarge;
}

@keyframes fadeSlideInSmall {
  from { opacity: 0; transform: translateX(15px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideInLarge {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .entry-motion,
  .entry-motion.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}