/* Custom animations */
@keyframes gradient-text {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

@keyframes gradient-x {
  0% {
    background-position: 0% 50%;
    background-size: 200% 200%;
  }
  50% {
    background-position: 100% 50%;
    background-size: 200% 200%;
  }
  100% {
    background-position: 0% 50%;
    background-size: 200% 200%;
  }
}

.animate-gradient-text {
  animation: gradient-text 6s ease infinite;
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 3s ease infinite;
  background-image: linear-gradient(to right, #3f3f46, #52525b, #71717a, #52525b, #3f3f46);
}

/* Button animation override to ensure it works */
a.animate-gradient-x, button.animate-gradient-x {
  background-image: linear-gradient(to right, #3f3f46, #52525b, #71717a, #52525b, #3f3f46) !important;
  position: relative;
  overflow: hidden;
}

/* Lightning bolt effect */
a.animate-gradient-x::before, button.animate-gradient-x::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.0), 
    rgba(255,255,255,0.07), 
    rgba(255,255,255,0.15), 
    rgba(255,255,255,0.07), 
    rgba(255,255,255,0.0)
  );
  transform: skewX(-25deg);
  animation: lightning 6s ease-in-out infinite;
}

a.animate-gradient-x::after, button.animate-gradient-x::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.0), 
    rgba(255,255,255,0.05), 
    rgba(255,255,255,0.2), 
    rgba(255,255,255,0.05), 
    rgba(255,255,255,0.0)
  );
  transform: skewX(-15deg);
  animation: lightning 6s ease-in-out infinite 1s;
}

@keyframes lightning {
  0% {
    left: -150%;
  }
  20%, 80% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Add more custom styles below */

/* 3D Perspective and Transformation Classes */
.perspective {
  perspective: 1000px;
  perspective-origin: center;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.rotate-y-\[-8deg\] {
  transform: rotateY(-8deg);
}

.rotate-z-\[5deg\] {
  transform: rotateZ(5deg);
}

.rotate-y-\[-12deg\] {
  transform: rotateY(-12deg);
}

.rotate-z-\[8deg\] {
  transform: rotateZ(8deg);
}

.translate-z-\[20px\] {
  transform: translateZ(20px);
}

/* Subtle animation for managed emails */
.pulse-bg {
  animation: pulse-animation 4s infinite;
}

@keyframes pulse-animation {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

/* Change transform attribute smoothly */
.transition-transform {
  transition-property: transform;
}