/* Animation Styles */

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

/* Stagger Children Animation */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-children.animate > *:nth-child(1) {
  animation: fadeIn 0.5s ease forwards 0.1s;
}

.stagger-children.animate > *:nth-child(2) {
  animation: fadeIn 0.5s ease forwards 0.2s;
}

.stagger-children.animate > *:nth-child(3) {
  animation: fadeIn 0.5s ease forwards 0.3s;
}

.stagger-children.animate > *:nth-child(4) {
  animation: fadeIn 0.5s ease forwards 0.4s;
}

.stagger-children.animate > *:nth-child(5) {
  animation: fadeIn 0.5s ease forwards 0.5s;
}

.stagger-children.animate > *:nth-child(6) {
  animation: fadeIn 0.5s ease forwards 0.6s;
}

/* Crystal Shimmer */
.crystal-shimmer {
  position: relative;
  overflow: hidden;
}

.crystal-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.75s ease;
}

.crystal-shimmer:hover::before {
  left: 125%;
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

.pulse-animation:hover {
  animation: pulse 1.5s infinite;
}

/* Floating Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

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

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

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

.glow-effect:hover {
  box-shadow: 0 0 15px var(--color-crystal-blue), 0 0 30px rgba(160, 210, 235, 0.2);
}

/* Spin Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 20s linear infinite;
}

/* Crystal Background Animation */
@keyframes crystalBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.crystal-bg-animation {
  background: linear-gradient(-45deg, #e8f4f8, #d6e9f3, #e2d6ff, #f0e6ff);
  background-size: 400% 400%;
  animation: crystalBg 15s ease infinite;
}

/* Zoom In Animation */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 0.5s ease forwards;
}

/* Sparkle Effect */
.sparkle {
  position: relative;
}

.sparkle::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 10px white, 0 0 20px white;
  opacity: 0;
}

.sparkle:hover::after {
  animation: sparkleEffect 1.5s ease-in-out;
}

@keyframes sparkleEffect {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  20% {
    opacity: 1;
    transform: translate(10px, -10px) scale(1.2);
  }
  40% {
    opacity: 0.8;
    transform: translate(20px, -20px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translate(10px, -30px) scale(1.2);
  }
  80% {
    opacity: 0.6;
    transform: translate(0, -40px) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -50px) scale(0.1);
  }
}