/*
==============================================
================================================

[Quantum Animations Framework]
Project:    QUANTAMCRYPTO Animation Enhancement
Phase:      2 - Advanced Animation System
Version:    2.0
Create:     Modern Animation Framework
Developer:  AI Assistant

================================================
================================================
*/

/* ========================================
   ANIMATION SYSTEM CONFIGURATION
   ======================================== */

:root {
  /* Animation Performance Settings */
  --quantum-animation-performance: "optimized";
  
  /* Custom Duration Variables */
  --quantum-duration-flash: 75ms;
  --quantum-duration-fast: 150ms;
  --quantum-duration-normal: 300ms;
  --quantum-duration-slow: 500ms;
  --quantum-duration-slower: 750ms;
  --quantum-duration-slowest: 1000ms;
  
  /* Advanced Easing Functions */
  --quantum-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --quantum-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --quantum-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --quantum-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --quantum-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --quantum-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --quantum-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --quantum-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --quantum-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 3D Transform Settings */
  --quantum-perspective: 1000px;
  --quantum-transform-origin: center;
}

/* ========================================
   CORE ANIMATION UTILITIES
   ======================================== */

/* GPU Acceleration Base */
.quantum-animate {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Performance Classes */
.quantum-gpu {
  transform: translateZ(0);
  will-change: transform;
}

.quantum-smooth {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: var(--quantum-perspective);
}

/* ========================================
   MICRO-INTERACTIONS
   ======================================== */

/* Hover Lift Effect */
.quantum-lift {
  transition: transform var(--quantum-duration-fast) var(--quantum-ease-out-cubic);
}

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

.quantum-lift-sm:hover {
  transform: translateY(-2px);
}

.quantum-lift-lg:hover {
  transform: translateY(-8px);
}

.quantum-lift-xl:hover {
  transform: translateY(-12px);
}

/* Hover Scale Effects */
.quantum-scale {
  transition: transform var(--quantum-duration-fast) var(--quantum-ease-out-cubic);
}

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

.quantum-scale-sm:hover {
  transform: scale(1.02);
}

.quantum-scale-lg:hover {
  transform: scale(1.1);
}

/* Hover Rotate Effects */
.quantum-rotate:hover {
  transform: rotate(5deg);
  transition: transform var(--quantum-duration-normal) var(--quantum-ease-out-back);
}

.quantum-rotate-reverse:hover {
  transform: rotate(-5deg);
  transition: transform var(--quantum-duration-normal) var(--quantum-ease-out-back);
}

/* Glow Effects */
.quantum-glow {
  transition: box-shadow var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.quantum-glow:hover {
  box-shadow: 0 0 20px rgba(var(--quantum-primary-rgb), 0.4);
}

.quantum-glow-accent:hover {
  box-shadow: 0 0 20px rgba(var(--quantum-accent-rgb), 0.4);
}

.quantum-glow-secondary:hover {
  box-shadow: 0 0 20px rgba(var(--quantum-secondary-rgb), 0.4);
}

/* ========================================
   3D TRANSFORM EFFECTS
   ======================================== */

/* 3D Card Flip */
.quantum-card-3d {
  perspective: var(--quantum-perspective);
  transform-style: preserve-3d;
}

.quantum-flip {
  transition: transform var(--quantum-duration-slow) var(--quantum-ease-in-out-cubic);
  transform-style: preserve-3d;
}

.quantum-flip:hover {
  transform: rotateY(10deg) rotateX(5deg);
}

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

/* 3D Tilt Effects */
.quantum-tilt {
  transition: transform var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.quantum-tilt:hover {
  transform: perspective(var(--quantum-perspective)) rotateX(5deg) rotateY(5deg);
}

.quantum-tilt-reverse:hover {
  transform: perspective(var(--quantum-perspective)) rotateX(-5deg) rotateY(-5deg);
}

/* 3D Push Effect */
.quantum-push {
  transition: transform var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.quantum-push:hover {
  transform: perspective(var(--quantum-perspective)) translateZ(20px);
}

/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

/* Fade In Animations */
.quantum-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

.quantum-fade-in.quantum-visible {
  opacity: 1;
  transform: translateY(0);
}

.quantum-fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

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

.quantum-fade-in-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

.quantum-fade-in-down.quantum-visible {
  opacity: 1;
  transform: translateY(0);
}

.quantum-fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

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

.quantum-fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

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

/* Scale In Animations */
.quantum-scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--quantum-duration-slow) var(--quantum-ease-out-back),
              transform var(--quantum-duration-slow) var(--quantum-ease-out-back);
}

.quantum-scale-in.quantum-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide In Animations */
.quantum-slide-in-up {
  transform: translateY(100%);
  transition: transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

.quantum-slide-in-up.quantum-visible {
  transform: translateY(0);
}

/* ========================================
   STAGGERED ANIMATIONS
   ======================================== */

.quantum-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--quantum-duration-normal) var(--quantum-ease-out-cubic),
              transform var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.quantum-stagger-children.quantum-visible > *:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: translateY(0);
}

.quantum-stagger-children.quantum-visible > *:nth-child(2) {
  transition-delay: 100ms;
  opacity: 1;
  transform: translateY(0);
}

.quantum-stagger-children.quantum-visible > *:nth-child(3) {
  transition-delay: 200ms;
  opacity: 1;
  transform: translateY(0);
}

.quantum-stagger-children.quantum-visible > *:nth-child(4) {
  transition-delay: 300ms;
  opacity: 1;
  transform: translateY(0);
}

.quantum-stagger-children.quantum-visible > *:nth-child(5) {
  transition-delay: 400ms;
  opacity: 1;
  transform: translateY(0);
}

.quantum-stagger-children.quantum-visible > *:nth-child(6) {
  transition-delay: 500ms;
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/* Shimmer Loading Effect */
.quantum-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: quantum-shimmer-anim 2s infinite linear;
}

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

/* Pulse Loading */
.quantum-pulse {
  animation: quantum-pulse-anim 2s infinite;
}

@keyframes quantum-pulse-anim {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Skeleton Loading */
.quantum-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  background-color: #e2e8f0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  animation: quantum-skeleton-anim 1.2s ease-in-out infinite;
}

@keyframes quantum-skeleton-anim {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* ========================================
   PARTICLE EFFECTS (CSS-ONLY)
   ======================================== */

/* Floating Particles */
.quantum-particles {
  position: relative;
  overflow: hidden;
}

.quantum-particles::before,
.quantum-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--quantum-accent);
  border-radius: 50%;
  animation: quantum-float 6s ease-in-out infinite;
  opacity: 0.6;
}

.quantum-particles::before {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.quantum-particles::after {
  top: 80%;
  right: 20%;
  animation-delay: 3s;
}

@keyframes quantum-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

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

.quantum-sparkle::before {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 20px;
  animation: quantum-sparkle-anim 2s ease-in-out infinite;
  opacity: 0;
}

@keyframes quantum-sparkle-anim {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* ========================================
   TRANSITION SYSTEMS
   ======================================== */

/* Smooth Page Transitions */
.quantum-page-transition {
  animation: quantum-page-enter var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

@keyframes quantum-page-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Transitions */
.quantum-modal-enter {
  animation: quantum-modal-enter-anim var(--quantum-duration-normal) var(--quantum-ease-out-back);
}

.quantum-modal-exit {
  animation: quantum-modal-exit-anim var(--quantum-duration-fast) var(--quantum-ease-in-cubic);
}

@keyframes quantum-modal-enter-anim {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes quantum-modal-exit-anim {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
}

/* ========================================
   ENHANCED HOVER STATES
   ======================================== */

/* Enhanced Service Block Hover */
.service-block.quantum-enhanced {
  transition: all var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.service-block.quantum-enhanced:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Enhanced Team Block Hover */
.team-block.quantum-enhanced {
  transition: all var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
}

.team-block.quantum-enhanced:hover {
  transform: perspective(var(--quantum-perspective)) rotateY(8deg) translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Enhanced Portfolio Item Hover */
.default-portfolio-item.quantum-enhanced {
  transition: all var(--quantum-duration-normal) var(--quantum-ease-out-cubic);
  overflow: hidden;
}

.default-portfolio-item.quantum-enhanced:hover {
  transform: scale(1.03);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.default-portfolio-item.quantum-enhanced:hover .image-box img {
  transform: scale(1.1);
  transition: transform var(--quantum-duration-slow) var(--quantum-ease-out-cubic);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .quantum-animate,
  .quantum-lift,
  .quantum-scale,
  .quantum-rotate,
  .quantum-glow,
  .quantum-flip,
  .quantum-tilt,
  .quantum-push,
  .quantum-fade-in,
  .quantum-fade-in-up,
  .quantum-fade-in-down,
  .quantum-fade-in-left,
  .quantum-fade-in-right,
  .quantum-scale-in,
  .quantum-slide-in-up,
  .quantum-stagger-children > *,
  .quantum-shimmer,
  .quantum-pulse,
  .quantum-skeleton,
  .quantum-particles::before,
  .quantum-particles::after,
  .quantum-sparkle::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .quantum-fade-in,
  .quantum-fade-in-up,
  .quantum-fade-in-down,
  .quantum-fade-in-left,
  .quantum-fade-in-right,
  .quantum-scale-in,
  .quantum-stagger-children > * {
    opacity: 1 !important;
  }
}

/* Battery Saving Mode */
@media (prefers-reduced-motion: reduce) {
  .quantum-gpu,
  .quantum-smooth {
    will-change: auto;
    transform: none;
    backface-visibility: visible;
  }
}

/* Performance Classes for Low-End Devices */
.quantum-performance-mode .quantum-animate {
  will-change: auto;
}

.quantum-performance-mode .quantum-3d {
  transform: none !important;
  perspective: none !important;
}

/* ========================================
   FRAMEWORK INTEGRATION
   ======================================== */

/* WOW.js Enhanced Integration */
.wow.quantum-enhanced {
  visibility: hidden;
}

.wow.quantum-enhanced.animated {
  visibility: visible;
}

/* Framework Status Indicator */
/*body.quantum-animations-loaded::after {
/*  content: "Quantum Animations 2.0";
  position: fixed;
  top: 40px;
  right: 10px;
  background: var(--quantum-accent);
  color: var(--quantum-white);
  padding: var(--quantum-space-xs) var(--quantum-space-sm);
  border-radius: var(--quantum-radius-base);
  font-size: var(--quantum-text-xs);
  font-weight: var(--quantum-font-medium);
  z-index: var(--quantum-z-toast);
  opacity: 0.9;
  pointer-events: none;
  box-shadow: var(--quantum-shadow-lg);
  animation: quantum-fade-in 0.5s ease-out 0.5s both;
} */