@charset "UTF-8";
/**
 * nuevo Wordpress Theme
 *
 * @abstract
 * @author 	Bastian Schröder <bastian@creative-feat.com>
 * @author 	Marvin Landau <marvin@creative-feat.com>
 * @copyright Copyright (c) 2025, creative feat GmbH
 * @package cf-wp-theme-template
 * @version 2025-06-02
 */
.scroll-effect {
  will-change: transform, opacity;
  opacity: 0;
  transition: transform var(--scroll-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1) var(--scroll-delay, 0s), opacity var(--scroll-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1) var(--scroll-delay, 0s);
}
.scroll-effect.in-view {
  opacity: 1;
  transform: none !important;
}

.scroll-fade:not(.in-view) {
  opacity: 0;
}

.scroll-slide-up:not(.in-view) {
  transform: translateY(30px);
  opacity: 0;
}

.scroll-slide-down:not(.in-view) {
  transform: translateY(-30px);
  opacity: 0;
}

.scroll-slide-left:not(.in-view) {
  transform: translateX(-30px);
  opacity: 0;
}

.scroll-slide-right:not(.in-view) {
  transform: translateX(30px);
  opacity: 0;
}

.scroll-zoom-in:not(.in-view) {
  transform: scale(0.95);
  opacity: 0;
}

.scroll-zoom-out:not(.in-view) {
  transform: scale(1.05);
  opacity: 0;
}

.img-wrap {
  overflow: hidden;
}
.img-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.img-wrap.scroll-effect {
  opacity: 1;
}
.img-wrap.scroll-effect img {
  transition: transform var(--scroll-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1) var(--scroll-delay, 0s), opacity var(--scroll-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1) var(--scroll-delay, 0s);
}
.img-wrap.scroll-effect:not(.in-view) img {
  opacity: 0;
  transform: scale(1.1);
}
.img-wrap.scroll-effect.in-view img {
  opacity: 1;
  transform: scale(1);
}

.scroll-effect .scroll-effect {
  --scroll-delay: calc(var(--parent-delay, 0s) + 0.1s);
}

@media (max-width: 600px) {
  .scroll-effect {
    transition: opacity var(--scroll-duration, 0.45s) cubic-bezier(0.4, 0, 0.2, 1) var(--scroll-delay, 0s);
    /* Avoid large transforms on mobile which may cause reflow/jumps */
    transform: none !important;
  }
  .scroll-slide-up:not(.in-view),
  .scroll-slide-down:not(.in-view),
  .scroll-slide-left:not(.in-view),
  .scroll-slide-right:not(.in-view),
  .scroll-zoom-in:not(.in-view),
  .scroll-zoom-out:not(.in-view) {
    transform: none !important;
    opacity: 0;
  }
  .scroll-effect.in-view {
    transform: none !important;
    opacity: 1;
  }
  /* If a container explicitly requests fade on mobile use that (keeps markup API-compatible) */
  [data-scroll-prefer-fade-mobile=true] .scroll-effect:not(.in-view) {
    transform: none !important;
    opacity: 0;
  }
  /* If animations should be disabled on mobile via attribute, make everything visible and remove transitions */
  [data-scroll-disable-mobile=true] .scroll-effect {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-effect {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .img-wrap .scroll-effect img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*# sourceMappingURL=scroll-effects.css.map */