/* Advanced animations and effects for premium look */

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

.animated-gradient-subtle {
  background: linear-gradient(-45deg, rgba(238, 119, 82, 0.05), rgba(231, 60, 126, 0.05), rgba(35, 166, 213, 0.05), rgba(35, 213, 171, 0.05));
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.animated-gradient-dark {
  background: linear-gradient(-45deg, #0f172a, #1e293b, #0f172a, #1e293b);
  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 */
.float {
  animation: float 6s ease-in-out infinite;
}

.float-slow {
  animation: float 8s ease-in-out infinite;
}

.float-fast {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Shimmer effect */
.shimmer {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.2) 25%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Parallax scroll effect */
.parallax {
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* Scroll-triggered animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

.blur-load {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.8s ease-out, filter 0.8s ease-out;
}

.blur-load.active {
  opacity: 1;
  filter: blur(0);
}

/* Card hover effects */
.premium-card {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
}

.premium-card::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.premium-card:hover::before {
  transform: translateX(100%);
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3D button effect */
.button-3d {
  transition: all 0.2s;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.button-3d:hover {
  transform: perspective(1000px) rotateX(10deg) translateY(-3px);
}

.button-3d:active {
  transform: perspective(1000px) rotateX(10deg) translateY(1px);
}

/* Glowing button */
.glow-button {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.glow-button::after {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.glow-button:hover::after {
  opacity: 1;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* Neon text effect */
.neon-text {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 
               0 0 10px rgba(255, 255, 255, 0.5), 
               0 0 15px rgba(255, 255, 255, 0.3);
}

.neon-blue {
  color: #355fff;
  text-shadow: 0 0 5px rgba(53, 95, 255, 0.7), 
               0 0 10px rgba(53, 95, 255, 0.5), 
               0 0 15px rgba(53, 95, 255, 0.3);
}

.neon-purple {
  color: #9333ea;
  text-shadow: 0 0 5px rgba(147, 51, 234, 0.7), 
               0 0 10px rgba(147, 51, 234, 0.5), 
               0 0 15px rgba(147, 51, 234, 0.3);
}

/* Dot pattern background */
.dot-pattern {
  background-image: radial-gradient(circle, #64748b 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Moving waves */
.wave-animation {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 15vh;
  min-height: 100px;
  max-height: 150px;
}

.wave {
  background: url('/wave.svg');
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 25s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.3;
}

@keyframes wave {
  0% {transform: translateX(0);}
  50% {transform: translateX(-25%);}
  100% {transform: translateX(-50%);}
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}