/* ==============================================
   ANIMATIONS - Advanced Animation Effects
   ============================================== */

/* ENTRANCE ANIMATIONS */

/* Fade In - Basic entrance */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide animations */
@keyframes slideInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-40px);
    opacity: 0;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(40px);
    opacity: 0;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-40px);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

/* Scale animations */
@keyframes scaleUp {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleDown {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Rotation animations */
@keyframes rotateIn {
  from {
    transform: rotate(-10deg);
    opacity: 0;
  }
  to {
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateOut {
  from {
    transform: rotate(0);
    opacity: 1;
  }
  to {
    transform: rotate(10deg);
    opacity: 0;
  }
}

/* Flip animations */
@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}

/* CONTINUOUS ANIMATIONS */

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

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

/* Rotating animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shimmer/loading animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

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

/* Glow animation */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
  }
}

/* HOVER ANIMATIONS */

/* Lift effect */
.animate-lift:hover {
  animation: liftHover 0.3s ease-out forwards;
}

@keyframes liftHover {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

/* Scale effect */
.animate-scale:hover {
  animation: scaleHover 0.3s ease-out forwards;
}

@keyframes scaleHover {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Color shift */
@keyframes colorShift {
  0% {
    color: #6366f1;
  }
  50% {
    color: #ec4899;
  }
  100% {
    color: #6366f1;
  }
}

/* STAGGER ANIMATIONS */

.stagger-animation {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.stagger-animation:nth-child(1) { animation-delay: 0ms; }
.stagger-animation:nth-child(2) { animation-delay: 100ms; }
.stagger-animation:nth-child(3) { animation-delay: 200ms; }
.stagger-animation:nth-child(4) { animation-delay: 300ms; }
.stagger-animation:nth-child(5) { animation-delay: 400ms; }
.stagger-animation:nth-child(6) { animation-delay: 500ms; }

/* SCROLL ANIMATIONS */

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* BORDER ANIMATIONS */

@keyframes borderGlow {
  0% {
    border-color: #6366f1;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }
  100% {
    border-color: #6366f1;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

/* BACKGROUND ANIMATIONS */

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

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

/* TEXT ANIMATIONS */

@keyframes textShadow {
  0% {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
  }
  100% {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  }
}

/* ANIMATION UTILITY CLASSES */

.animate-fade {
  animation: fadeIn 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-fade-out {
  animation: fadeOut 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.animate-slide-up {
  animation: slideInUp 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-slide-down {
  animation: slideInDown 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-slide-right {
  animation: slideInRight 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.animate-rotate-in {
  animation: rotateIn 0.6s ease-out forwards;
}

.animate-flip-x {
  animation: flipInX 0.6s ease-out forwards;
}

.animate-flip-y {
  animation: flipInY 0.6s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.animate-rotate {
  animation: rotate 3s linear infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-shine {
  animation: shine 3s infinite;
}

/* Animation Delays */
.animation-delay-1 { animation-delay: 100ms; }
.animation-delay-2 { animation-delay: 200ms; }
.animation-delay-3 { animation-delay: 300ms; }
.animation-delay-4 { animation-delay: 400ms; }
.animation-delay-5 { animation-delay: 500ms; }

/* Animation Duration Modifiers */
.animation-fast { animation-duration: 0.3s; }
.animation-normal { animation-duration: 0.6s; }
.animation-slow { animation-duration: 1s; }
.animation-slower { animation-slow: 1.5s; }

/* Easing functions */
.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.ease-smooth { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Scroll animation triggers */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
}

.scroll-animate.in-view {
  animation: slideInUp 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}
/* ADVANCED ANIMATIONS */

/* Parallax effect */
@keyframes parallax {
  0% { transform: translateZ(0); }
  100% { transform: translateZ(-100px); }
}

/* Floating animation */
@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Pulse animation */
@keyframes pulsing {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Gradient shift animation */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Text shimmer effect */
@keyframes textShimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* Rotate animation */
@keyframes rotating {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Wiggle animation */
@keyframes wiggle {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

/* Bounce animation */
@keyframes bouncing {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(-20px); }
  75% { transform: translateY(-10px); }
}

/* Flip animation */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Slide and fade animation */
@keyframes slideAndFade {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Zoom in animation */
@keyframes zoomIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Zoom out animation */
@keyframes zoomOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* Elastic bounce */
@keyframes elasticBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-15px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
}

/* Fade slide left */
@keyframes fadeSlideLeft {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Fade slide right */
@keyframes fadeSlideRight {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ANIMATION UTILITY CLASSES */

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

.pulse {
  animation: pulsing 2s ease-in-out infinite;
}

.rotate {
  animation: rotating 20s linear infinite;
}

.wiggle {
  animation: wiggle 0.2s ease-in-out;
}

.bounce {
  animation: bouncing 1s ease-in-out;
}

.flip {
  animation: flip 0.6s ease-in-out;
}

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: textShimmer 2s infinite;
}

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

.zoom-out {
  animation: zoomOut 0.5s ease-out;
}

.elastic {
  animation: elasticBounce 0.8s ease-out;
}

.slide-left {
  animation: fadeSlideLeft 0.5s ease-out;
}

.slide-right {
  animation: fadeSlideRight 0.5s ease-out;
}

/* STAGGER ANIMATIONS */

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* HOVER ANIMATIONS */

.hover-lift {
  transition: transform 0.3s ease-out;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-scale {
  transition: transform 0.3s ease-out;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-rotate {
  transition: transform 0.3s ease-out;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-color {
  transition: color 0.3s ease-out;
}

/* SCROLL REVEAL ANIMATIONS */

.reveal {
  opacity: 0;
}

.reveal.active {
  opacity: 1;
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.reveal-left.active {
  animation: fadeSlideLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.reveal-right.active {
  animation: fadeSlideRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* PARALLAX EFFECT */

.parallax-element {
  perspective: 1000px;
}

/* FADE ANIMATIONS */

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

.fade-out {
  animation: fadeOut 0.6s ease-out forwards;
}

/* GROUP ANIMATIONS */

.group-animate > * {
  opacity: 0;
  animation: slideInUp 0.6s ease-out forwards;
}

.group-animate > *:nth-child(1) { animation-delay: 0s; }
.group-animate > *:nth-child(2) { animation-delay: 0.1s; }
.group-animate > *:nth-child(3) { animation-delay: 0.2s; }
.group-animate > *:nth-child(4) { animation-delay: 0.3s; }
.group-animate > *:nth-child(5) { animation-delay: 0.4s; }
.group-animate > *:nth-child(6) { animation-delay: 0.5s; }