/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/swa.css ***!
  \*******************************************************************/
/* SenangWebs Animations CSS */

[data-swa], [data-swa-group] > * {
    opacity: 0;
    transition-property: transform, opacity;
  }
  
  /* Fade animations */
  @keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-up-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-up-right {
    from {
      opacity: 0;
      transform: translate3d(100%, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fade-down {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-down-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-down-right { 
    from {
      opacity: 0;
      transform: translate3d(100%, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fade-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fade-right {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  /* Flip animations */
  @keyframes flip-up {
    from {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      animation-timing-function: ease-in;
    }
    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
      transform: perspective(400px);
      opacity: 1;
    }
  }

  @keyframes flip-down {
    from {
      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
      animation-timing-function: ease-in;
    }
    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
      opacity: 1;
    }
    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
    }
    to {
      transform: perspective(400px);
      opacity: 1;
    }
  }

  @keyframes flip-left {
    from {
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      animation-timing-function: ease-in;
    }
    60% {
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;
    }
    80% {
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
      transform: perspective(400px);
      opacity: 1;
    }
  }

  @keyframes flip-right {
    from {
      transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
      animation-timing-function: ease-in;
    }
    60% {
      transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
      opacity: 1;
    }
    80% {
      transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
    }
    to {
      transform: perspective(400px);
      opacity: 1;
    }
  }
  
  /* Add more flip animations (down, left, right) here */
  
  /* Zoom animations */
  @keyframes zoom-in {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes zoom-out {
    from {
      opacity: 0;
      transform: scale3d(1.7, 1.7, 1.7);
    }
    50% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  /* Bounce animations */
  @keyframes bounce-in {
    from, 20%, 40%, 60%, 80%, to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes bounce-out {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
      opacity: 0;
      transform: scale3d(1, 1, 1);
    }
    20% {
      transform: scale3d(1.03, 1.03, 1.03);
    }
    40% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
    60% {
      opacity: 1;
      transform: scale3d(1.1, 1.1, 1.1);
    }
    80% {
      transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }


  /* Slide animations */
  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-up-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-up-right {
    from {
      opacity: 0;
      transform: translate3d(100%, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-down-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-down-right {
    from {
      opacity: 0;
      transform: translate3d(100%, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-left {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slide-right {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

/* Ensure elements are visible after animation */
[data-swa-animated="true"], [data-swa-group] > [data-swa-animated="true"] {
  opacity: 1;
}