@layer utilities {
  /* Animation classes */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
  }

  /* Different animation types */
  .fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in;
  }

  .fade-in.animated {
    opacity: 1;
  }

  .slide-left {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease-out;
  }

  .slide-left.animated {
    opacity: 1;
    transform: translateX(0);
  }

  .slide-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease-out;
  }

  .slide-right.animated {
    opacity: 1;
    transform: translateX(0);
  }

  .scale-up {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-out;
  }

  .scale-up.animated {
    opacity: 1;
    transform: scale(1);
  }

  /* Delay classes */
  .delay-1 {
    transition-delay: 0.1s;
  }

  .delay-2 {
    transition-delay: 0.2s;
  }

  .delay-3 {
    transition-delay: 0.3s;
  }

  .delay-4 {
    transition-delay: 0.4s;
  }

  .delay-5 {
    transition-delay: 0.5s;
  }

  .delay-6 {
    transition-delay: 0.6s;
  }

  .delay-7 {
    transition-delay: 0.7s;
  }

  /* Bounce animations */
  @keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }

    40% {
      transform: translateY(-20px);
    }

    60% {
      transform: translateY(-10px);
    }
  }

  .bounce-in {
    opacity: 0;
    animation: bounce 1s ease 0.5s forwards;
  }

  /* Flip animations */
  .flip-in-x {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .flip-in-x.animated {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }

  .flip-in-y {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .flip-in-y.animated {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }

  /* Rotating entrances */
  .rotate-in {
    opacity: 0;
    transform: rotate(-180deg);
    transition: all 0.6s ease-out;
  }

  .rotate-in.animated {
    opacity: 1;
    transform: rotate(0);
  }

  /* Special effects */
  .pulse-once {
    opacity: 0;
    animation: pulse 1s ease 0.2s forwards;
  }

  @keyframes pulse {
    0% {
      transform: scale(0.9);
      opacity: 0;
    }

    50% {
      transform: scale(1.05);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Glow effect */
  .glow-on-hover {
    transition: all 0.3s ease;
  }

  .glow-on-hover:hover {
    box-shadow: 0 0 15px rgb(139 159 170 / 80%);
  }

  /* Typewriter effect */
  .typewriter {
    overflow: hidden;
    border-right: 3px solid #000;
    white-space: nowrap;
    animation: typing 1s steps(10, end), blink-caret 0.75s step-end infinite;
  }

  @keyframes typing {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  @keyframes blink-caret {
    0%,
    100% {
      border-color: transparent;
    }

    50% {
      border-color: #ccc;
    }
  }

  /* Gradient background animation */
  .animated-gradient-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }

  /* Floating animation */
  @keyframes floating {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-15px);
    }

    100% {
      transform: translateY(0);
    }
  }

  .floating {
    animation: floating 3s ease-in-out infinite;
  }

  /* Shake animation */
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
      transform: translateX(5px);
    }
  }

  .shake-on-hover:hover {
    animation: shake 0.5s;
  }

  .burger-transition {
    animation: 500ms burger-menu;
  }

  @keyframes burger-menu {
    0% {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }

    100% {
      transform: translateZ(0);
    }
  }
}