/* ==================================================
   GOSMOOTH Global Entry Animation
   高級、輕量、無外部依賴
================================================== */

@keyframes gsEntrySlideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes gsEntrySlideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes gsEntrySlideInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.gs-entry-enabled .gs-entry-animate {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  will-change: opacity, transform;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry="left"] {
  transform: translate3d(-30px, 0, 0);
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry="right"] {
  transform: translate3d(30px, 0, 0);
}

.gs-entry-enabled .gs-entry-animate.is-visible {
  animation-name: gsEntrySlideInUp;
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry="left"].is-visible {
  animation-name: gsEntrySlideInLeft;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry="right"].is-visible {
  animation-name: gsEntrySlideInRight;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="1"].is-visible {
  animation-delay: 90ms;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="2"].is-visible {
  animation-delay: 160ms;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="3"].is-visible {
  animation-delay: 230ms;
}

.gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="4"].is-visible {
  animation-delay: 300ms;
}

@media (max-width: 1024px) {
  @keyframes gsEntrySlideInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes gsEntrySlideInLeft {
    from {
      opacity: 0;
      transform: translate3d(-24px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes gsEntrySlideInRight {
    from {
      opacity: 0;
      transform: translate3d(24px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .gs-entry-enabled .gs-entry-animate {
    transform: translate3d(0, 20px, 0);
  }

  .gs-entry-enabled .gs-entry-animate[data-gs-entry="left"] {
    transform: translate3d(-24px, 0, 0);
  }

  .gs-entry-enabled .gs-entry-animate[data-gs-entry="right"] {
    transform: translate3d(24px, 0, 0);
  }

  .gs-entry-enabled .gs-entry-animate.is-visible {
    animation-duration: 580ms;
  }
}

@media (max-width: 768px) {
  @keyframes gsEntrySlideInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes gsEntrySlideInLeft {
    from {
      opacity: 0;
      transform: translate3d(-16px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes gsEntrySlideInRight {
    from {
      opacity: 0;
      transform: translate3d(16px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .gs-entry-enabled .gs-entry-animate {
    transform: translate3d(0, 14px, 0);
  }

  .gs-entry-enabled .gs-entry-animate[data-gs-entry="left"] {
    transform: translate3d(-16px, 0, 0);
  }

  .gs-entry-enabled .gs-entry-animate[data-gs-entry="right"] {
    transform: translate3d(16px, 0, 0);
  }

  .gs-entry-enabled .gs-entry-animate.is-visible {
    animation-duration: 420ms;
  }

  .gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="1"].is-visible,
  .gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="2"].is-visible,
  .gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="3"].is-visible,
  .gs-entry-enabled .gs-entry-animate[data-gs-entry-delay="4"].is-visible {
    animation-delay: 55ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-entry-enabled .gs-entry-animate,
  .gs-entry-enabled .gs-entry-animate.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}