/* VERSION: 21.Mai 2025 */

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    z-index: inherit;
  }

  .animate-on-scroll,
  .animate-fade-in {
    transition: none;
  }
}

@media (width >= 900px) {
  .animate-on-scroll {
    --_translate-zero: translate(0, 0);
    --_scale-one: scale(1);
    --_flip-x: scale(-1, 1);
    --_flip-y: scale(1, -1);
    /* die folgenden 3 werte können angepasst werden: */
    --_scale-in: scale(0.5);
    --_translate: 10rem;
    --_transition: 600ms;
    /* ab hier bleibt alles wie es ist: */
    opacity: 0.0001;
    z-index: 1;
    position: relative;
    will-change: transform, opacity;
    transition: transform var(--_transition) ease, opacity var(--_transition) ease;
  }

  /* effekte: */
  .animate-fade-in {
    transform: var(--_translate-zero) var(--_scale-one);
  }
  .animate-scale-in {
    transform: var(--_translate-zero) var(--_scale-in);
  }
  .animate-flip-in-x {
    transform: var(--_translate-zero) var(--_flip-x);
  }
  .animate-flip-in-y {
    transform: var(--_translate-zero) var(--_flip-y);
  }
  .animate-from-bottom {
    transform: translate(0, var(--_translate)) var(--_scale-one);
  }
  .animate-from-top {
    transform: translate(0, calc(var(--_translate) * -1)) var(--_scale-one);
  }
  .animate-from-right {
    transform: translate(var(--_translate), 0) var(--_scale-one);
  }
  .animate-from-left {
    transform: translate(calc(var(--_translate) * -1), 0) var(--_scale-one);
  }

  /* endzustand */
  .animate-on-scroll.active {
    opacity: 1;
    transform: var(--_translate-zero) var(--_scale-one);
  }
}