/*
 * Egpay India - Advanced Animations and Effects
 * Author: Egpay India Development Team
 * Description: Advanced CSS animations, transitions, and interactive effects
 */

/* ==========================================================================
   Advanced Animation Variables
   ========================================================================== */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-duration-extra-slow: 1s;
  
  --easing-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   Loading Animations
   ========================================================================== */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-dots {
  display: inline-block;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* ==========================================================================
   Button Hover Effects
   ========================================================================== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover:before {
  width: 300px;
  height: 300px;
}

.btn-glow {
  position: relative;
  overflow: visible;
}

.btn-glow:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-gradient);
  border-radius: inherit;
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.1);
  transition: opacity var(--animation-duration-normal);
  z-index: -1;
}

.btn-glow:hover:before {
  opacity: 0.7;
}

.btn-morph {
  transition: all var(--animation-duration-normal) var(--easing-bounce);
}

.btn-morph:hover {
  border-radius: var(--rounded-full);
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* ==========================================================================
   Card Animations
   ========================================================================== */
.card-tilt {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
  transform-style: preserve-3d;
}

.card-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-10deg) translateY(-10px);
}

.card-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--animation-duration-slow);
}

.card-flip:hover {
  transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: inherit;
}

.card-flip-back {
  transform: rotateY(180deg);
}

.card-slide-up {
  overflow: hidden;
  position: relative;
}

.card-slide-up::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--primary-gradient);
  transition: top var(--animation-duration-normal) var(--easing-ease-out);
  z-index: -1;
}

.card-slide-up:hover::before {
  top: 0;
}

.card-slide-up:hover {
  color: white;
}

/* ==========================================================================
   Text Animation Effects
   ========================================================================== */
.text-reveal {
  position: relative;
  overflow: hidden;
}

.text-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-color);
  transform: translateX(-100%);
  animation: textReveal 1s var(--easing-ease-out) forwards;
  animation-delay: 0.2s;
}

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

.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--primary-color);
  white-space: nowrap;
  margin: 0 auto;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--primary-color); }
}

.gradient-animation {
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* ==========================================================================
   Icon Animations
   ========================================================================== */
.icon-bounce {
  animation: iconBounce 2s infinite;
}

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

.icon-rotate {
  transition: transform var(--animation-duration-normal);
}

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

.icon-pulse {
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.icon-shake {
  animation: iconShake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes iconShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ==========================================================================
   Background Animations
   ========================================================================== */
.animated-background {
  position: relative;
  overflow: hidden;
}

.animated-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1), rgba(240, 147, 251, 0.1), rgba(245, 87, 108, 0.1));
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: -1;
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.floating-shape {
  position: absolute;
  background: var(--primary-gradient);
  border-radius: 50%;
  opacity: 0.1;
  animation: floatShape 20s linear infinite;
}

.floating-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  left: 10%;
  animation-delay: 0s;
}

.floating-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  left: 85%;
  animation-delay: -5s;
}

.floating-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  left: 70%;
  animation-delay: -10s;
}

.floating-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  left: 40%;
  animation-delay: -15s;
}

@keyframes floatShape {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}

/* ==========================================================================
   Page Transition Animations
   ========================================================================== */
.page-fade-in {
  animation: pageFadeIn 0.8s ease-out;
}

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

.page-slide-in-right {
  animation: pageSlideInRight 0.8s ease-out;
}

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

.page-scale-in {
  animation: pageScaleIn 0.8s ease-out;
}

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

/* ==========================================================================
   Scroll Animations
   ========================================================================== */
.scroll-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.scroll-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease-out;
}

.scroll-fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease-out;
}

.scroll-fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

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

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

/* ==========================================================================
   Interactive Hover States
   ========================================================================== */
.hover-lift {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
}

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

.hover-grow {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
}

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

.hover-shrink {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
}

.hover-shrink:hover {
  transform: scale(0.95);
}

.hover-rotate {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
}

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

.hover-tilt {
  transition: transform var(--animation-duration-normal) var(--easing-ease-out);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(10deg);
}

/* ==========================================================================
   Progress Animations
   ========================================================================== */
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--gray-200);
  border-radius: var(--rounded-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: inherit;
  transform: translateX(-100%);
  animation: progressFill 2s ease-out forwards;
}

@keyframes progressFill {
  to {
    transform: translateX(0);
  }
}

.circular-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) 0deg, var(--gray-200) 0deg);
  position: relative;
  animation: circularProgress 2s ease-out forwards;
}

@keyframes circularProgress {
  to {
    background: conic-gradient(var(--primary-color) 270deg, var(--gray-200) 270deg);
  }
}

/* ==========================================================================
   Special Effects
   ========================================================================== */
.glitch-effect {
  position: relative;
  animation: glitch 2s infinite;
}

.glitch-effect::before,
.glitch-effect::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-effect::before {
  animation: glitchTop 1s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  background: var(--primary-color);
  color: transparent;
}

.glitch-effect::after {
  animation: glitchBottom 1.5s infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  background: var(--secondary-color);
  color: transparent;
}

@keyframes glitch {
  2%, 64% { transform: translate(2px, 0) skew(0deg); }
  4%, 60% { transform: translate(-2px, 0) skew(0deg); }
  62% { transform: translate(0, 0) skew(5deg); }
}

@keyframes glitchTop {
  2%, 64% { transform: translate(2px, -2px); }
  4%, 60% { transform: translate(-2px, 2px); }
  62% { transform: translate(13px, -1px) skew(-13deg); }
}

@keyframes glitchBottom {
  2%, 64% { transform: translate(-2px, 0); }
  4%, 60% { transform: translate(-2px, 0); }
  62% { transform: translate(-22px, 5px) skew(21deg); }
}

.neon-glow {
  position: relative;
  color: var(--primary-color);
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
  animation: neonFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes neonFlicker {
  from {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px currentColor;
  }
  to {
    text-shadow: 
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 8px currentColor,
      0 0 12px currentColor;
  }
}

.holographic {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holographicShift 3s ease-in-out infinite;
}

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

/* ==========================================================================
   Particle System
   ========================================================================== */
.particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.particle {
  position: absolute;
  background: var(--primary-color);
  border-radius: 50%;
  opacity: 0.6;
  animation: particleFloat 15s linear infinite;
}

.particle:nth-child(odd) {
  animation-duration: 20s;
}

.particle:nth-child(3n) {
  animation-duration: 25s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-10vh) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================================================
   Mobile-Specific Animations
   ========================================================================== */
@media (max-width: 768px) {
  /* Reduce motion for mobile devices */
  .card-tilt:hover {
    transform: translateY(-5px);
  }
  
  .hover-lift:hover {
    transform: translateY(-5px);
  }
  
  /* Simplify animations on mobile */
  .floating-shape {
    animation-duration: 30s;
  }
  
  .particles-container .particle {
    animation-duration: 20s;
  }
  
  /* Disable complex animations on mobile for performance */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ==========================================================================
   Accessibility Considerations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .floating-cards .floating-card,
  .floating-shapes .floating-shape,
  .particles-container .particle,
  .gradient-animation,
  .neon-glow {
    animation: none !important;
  }
  
  .typewriter {
    border-right: none;
    animation: none;
    width: auto;
  }
}