/* D-Broft Technologies - Animations CSS */
/* Advanced animations and micro-interactions with 1-space indentation */

/* Animation Utilities */
 .animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease-out forwards;
 }

 .animate-fade-down {
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDown 0.8s ease-out forwards;
 }

 .animate-fade-left {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeLeft 0.8s ease-out forwards;
 }

 .animate-fade-right {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeRight 0.8s ease-out forwards;
 }

 .animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
 }

 .animate-scale-up {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleUp 0.8s ease-out forwards;
 }

/* Animation Delays */
 .delay-1 { animation-delay: 0.1s; }
 .delay-2 { animation-delay: 0.2s; }
 .delay-3 { animation-delay: 0.3s; }
 .delay-4 { animation-delay: 0.4s; }
 .delay-5 { animation-delay: 0.5s; }

/* Scroll-triggered Animations */
 .animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
 }

/* Hover Animations */
 .hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
 }

 .hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
 }

 .hover-scale {
  transition: transform var(--transition-normal);
 }

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

 .hover-rotate {
  transition: transform var(--transition-normal);
 }

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

 .hover-glow {
  position: relative;
  transition: all var(--transition-normal);
 }

 .hover-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary));
  border-radius: inherit;
  opacity: 0;
  filter: blur(10px);
  transition: opacity var(--transition-normal);
  z-index: -1;
 }

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

/* Pulse Animations */
 .pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

 .pulse-on-hover {
  transition: all var(--transition-normal);
 }

 .pulse-on-hover:hover {
  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

/* Bounce Animations */
 .bounce {
  animation: bounce 1s infinite;
 }

 .bounce-on-hover {
  transition: all var(--transition-normal);
 }

 .bounce-on-hover:hover {
  animation: bounce 0.6s ease-in-out;
 }

/* Shake Animation */
 .shake {
  animation: shake 0.5s ease-in-out;
 }

/* Wobble Animation */
 .wobble {
  animation: wobble 1s ease-in-out;
 }

/* Flip Animations */
 .flip-horizontal {
  animation: flipHorizontal 0.6s ease-in-out;
 }

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

/* Slide Animations */
 .slide-in-left {
  animation: slideInLeft 0.8s ease-out;
 }

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

 .slide-in-up {
  animation: slideInUp 0.8s ease-out;
 }

 .slide-in-down {
  animation: slideInDown 0.8s ease-out;
 }

/* Zoom Animations */
 .zoom-in {
  animation: zoomIn 0.6s ease-out;
 }

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

/* Rotate Animations */
 .rotate-in {
  animation: rotateIn 0.8s ease-out;
 }

 .rotate-out {
  animation: rotateOut 0.8s ease-out;
 }

/* Text Animations */
 .text-reveal {
  overflow: hidden;
 }

 .text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: textReveal 0.8s ease-out forwards;
 }

 .typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
 }

/* Gradient Animations */
 .gradient-shift {
  background: linear-gradient(-45deg, var(--primary), var(--accent), var(--primary-dark), var(--accent-dark));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
 }

/* Floating Animations */
 .float {
  animation: float 3s ease-in-out infinite;
 }

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

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

/* Morphing Animations */
 .morph {
  animation: morph 2s ease-in-out infinite;
 }

/* Loading Animations */
 .loading-dots {
  display: inline-flex;
  gap: 4px;
 }

 .loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
 }

 .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
 .loading-dots span:nth-child(2) { animation-delay: -0.16s; }

 .loading-wave {
  display: inline-flex;
  gap: 2px;
 }

 .loading-wave span {
  width: 4px;
  height: 20px;
  background: var(--primary);
  animation: loadingWave 1.2s ease-in-out infinite;
 }

 .loading-wave span:nth-child(1) { animation-delay: -1.2s; }
 .loading-wave span:nth-child(2) { animation-delay: -1.1s; }
 .loading-wave span:nth-child(3) { animation-delay: -1.0s; }
 .loading-wave span:nth-child(4) { animation-delay: -0.9s; }
 .loading-wave span:nth-child(5) { animation-delay: -0.8s; }

/* Particle Animations */
 .particles {
  position: relative;
  overflow: hidden;
 }

 .particles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
   radial-gradient(2px 2px at 20px 30px, var(--primary), transparent),
   radial-gradient(2px 2px at 40px 70px, var(--accent), transparent),
   radial-gradient(1px 1px at 90px 40px, var(--primary-light), transparent),
   radial-gradient(1px 1px at 130px 80px, var(--accent-light), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particles 20s linear infinite;
  opacity: 0.3;
 }

/* Keyframe Definitions */
 @keyframes fadeUp {
  to {
   opacity: 1;
   transform: translateY(0);
  }
 }

 @keyframes fadeDown {
  to {
   opacity: 1;
   transform: translateY(0);
  }
 }

 @keyframes fadeLeft {
  to {
   opacity: 1;
   transform: translateX(0);
  }
 }

 @keyframes fadeRight {
  to {
   opacity: 1;
   transform: translateX(0);
  }
 }

 @keyframes fadeIn {
  to {
   opacity: 1;
  }
 }

 @keyframes scaleUp {
  to {
   opacity: 1;
   transform: scale(1);
  }
 }

 @keyframes pulse {
  0%, 100% {
   transform: scale(1);
  }
  50% {
   transform: scale(1.05);
  }
 }

 @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
   transform: translate3d(0, 0, 0);
  }
  40%, 43% {
   transform: translate3d(0, -30px, 0);
  }
  70% {
   transform: translate3d(0, -15px, 0);
  }
  90% {
   transform: translate3d(0, -4px, 0);
  }
 }

 @keyframes shake {
  0%, 100% {
   transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
   transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
   transform: translateX(10px);
  }
 }

 @keyframes wobble {
  0% {
   transform: translateX(0%);
  }
  15% {
   transform: translateX(-25%) rotate(-5deg);
  }
  30% {
   transform: translateX(20%) rotate(3deg);
  }
  45% {
   transform: translateX(-15%) rotate(-3deg);
  }
  60% {
   transform: translateX(10%) rotate(2deg);
  }
  75% {
   transform: translateX(-5%) rotate(-1deg);
  }
  100% {
   transform: translateX(0%);
  }
 }

 @keyframes flipHorizontal {
  0% {
   transform: perspective(400px) rotateY(0);
  }
  40% {
   transform: perspective(400px) rotateY(-90deg);
  }
  100% {
   transform: perspective(400px) rotateY(0);
  }
 }

 @keyframes flipVertical {
  0% {
   transform: perspective(400px) rotateX(0);
  }
  40% {
   transform: perspective(400px) rotateX(-90deg);
  }
  100% {
   transform: perspective(400px) rotateX(0);
  }
 }

 @keyframes slideInLeft {
  0% {
   transform: translateX(-100%);
   opacity: 0;
  }
  100% {
   transform: translateX(0);
   opacity: 1;
  }
 }

 @keyframes slideInRight {
  0% {
   transform: translateX(100%);
   opacity: 0;
  }
  100% {
   transform: translateX(0);
   opacity: 1;
  }
 }

 @keyframes slideInUp {
  0% {
   transform: translateY(100%);
   opacity: 0;
  }
  100% {
   transform: translateY(0);
   opacity: 1;
  }
 }

 @keyframes slideInDown {
  0% {
   transform: translateY(-100%);
   opacity: 0;
  }
  100% {
   transform: translateY(0);
   opacity: 1;
  }
 }

 @keyframes zoomIn {
  0% {
   transform: scale(0);
   opacity: 0;
  }
  100% {
   transform: scale(1);
   opacity: 1;
  }
 }

 @keyframes zoomOut {
  0% {
   transform: scale(1);
   opacity: 1;
  }
  100% {
   transform: scale(0);
   opacity: 0;
  }
 }

 @keyframes rotateIn {
  0% {
   transform: rotate(-360deg) scale(0);
   opacity: 0;
  }
  100% {
   transform: rotate(0) scale(1);
   opacity: 1;
  }
 }

 @keyframes rotateOut {
  0% {
   transform: rotate(0) scale(1);
   opacity: 1;
  }
  100% {
   transform: rotate(360deg) scale(0);
   opacity: 0;
  }
 }

 @keyframes textReveal {
  to {
   opacity: 1;
   transform: translateY(0);
  }
 }

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

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

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

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

 @keyframes morph {
  0%, 100% {
   border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
   border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
   border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
 }

 @keyframes loadingDots {
  0%, 80%, 100% {
   transform: scale(0);
  }
  40% {
   transform: scale(1);
  }
 }

 @keyframes loadingWave {
  0%, 40%, 100% {
   transform: scaleY(0.4);
  }
  20% {
   transform: scaleY(1);
  }
 }

 @keyframes particles {
  0% {
   transform: translateX(0);
  }
  100% {
   transform: translateX(-200px);
  }
 }

/* Intersection Observer Animations */
 .reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

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

 .reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .reveal-left.active {
  opacity: 1;
  transform: translateX(0);
 }

 .reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .reveal-right.active {
  opacity: 1;
  transform: translateX(0);
 }

 .reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .reveal-scale.active {
  opacity: 1;
  transform: scale(1);
 }

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

/* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
   animation-duration: 0.01ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
  }
  
  .animate-on-scroll {
   opacity: 1;
   transform: none;
  }
  
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
   opacity: 1;
   transform: none;
  }
 }

/* Dark Mode Animations */
 @media (prefers-color-scheme: dark) {
  .particles::before {
   background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(14, 165, 233, 0.5), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(56, 189, 248, 0.5), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 229, 92, 0.5), transparent);
  }
 }