/* =====================================================
   Project Card Animations
   ===================================================== */

/* Ghost Animation (ML Playground) */
.ghost-card #ghost {
  position: relative;
  margin: auto;
  margin-top: 30px;
  width: 60px;
  height: 40px;
  animation: float 3s ease-in-out infinite;
}

.ghost-card #red {
  position: relative;
  width: 60px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 60px 60px 0 0;
  z-index: 2;
}

.ghost-card #pupil,
.ghost-card #pupil1 {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: blink 4s infinite;
}

.ghost-card #pupil {
  top: 12px;
  left: 18px;
}

.ghost-card #pupil1 {
  top: 12px;
  left: 38px;
}

.ghost-card #eye,
.ghost-card #eye1 {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1a1a1a;
  border-radius: 50%;
}

.ghost-card #eye {
  top: 10px;
  left: 16px;
}

.ghost-card #eye1 {
  top: 10px;
  left: 36px;
}

/* Ghost body segments */
.ghost-card #st0, .ghost-card #st1, .ghost-card #st2, 
.ghost-card #st3, .ghost-card #st4, .ghost-card #st5 {
  position: absolute;
  width: 10px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  bottom: -20px;
}

.ghost-card #st0 { left: 0; animation: wave 1s infinite; }
.ghost-card #st1 { left: 10px; animation: wave 1s 0.1s infinite; }
.ghost-card #st2 { left: 20px; animation: wave 1s 0.2s infinite; }
.ghost-card #st3 { left: 30px; animation: wave 1s 0.3s infinite; }
.ghost-card #st4 { left: 40px; animation: wave 1s 0.4s infinite; }
.ghost-card #st5 { left: 50px; animation: wave 1s 0.5s infinite; }

/* Pixel art elements */
.ghost-card #top0, .ghost-card #top1, .ghost-card #top2, 
.ghost-card #top3, .ghost-card #top4 {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  top: 5px;
}

.ghost-card #top0 { left: 10px; animation: twinkle 2s infinite; }
.ghost-card #top1 { left: 20px; animation: twinkle 2s 0.5s infinite; }
.ghost-card #top2 { left: 30px; animation: twinkle 2s 1s infinite; }
.ghost-card #top3 { left: 40px; animation: twinkle 2s 1.5s infinite; }
.ghost-card #top4 { left: 50px; animation: twinkle 2s 2s infinite; }

/* Additional decorative elements */
.ghost-card #an1, .ghost-card #an2, .ghost-card #an3, .ghost-card #an4, .ghost-card #an5, 
.ghost-card #an6, .ghost-card #an7, .ghost-card #an8, .ghost-card #an9, .ghost-card #an10,
.ghost-card #an11, .ghost-card #an12, .ghost-card #an13, .ghost-card #an14, .ghost-card #an15,
.ghost-card #an16, .ghost-card #an17, .ghost-card #an18 {
  position: absolute;
  width: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  animation: float 3s ease-in-out infinite;
}

.ghost-card #an1 { top: 8px; left: 12px; animation-delay: 0s; }
.ghost-card #an2 { top: 15px; left: 25px; animation-delay: 0.2s; }
.ghost-card #an3 { top: 12px; left: 45px; animation-delay: 0.4s; }
.ghost-card #an4 { top: 20px; left: 8px; animation-delay: 0.6s; }
.ghost-card #an5 { top: 18px; left: 52px; animation-delay: 0.8s; }
.ghost-card #an6 { top: 25px; left: 15px; animation-delay: 1s; }
.ghost-card #an7 { top: 22px; left: 35px; animation-delay: 1.2s; }
.ghost-card #an8 { top: 28px; left: 48px; animation-delay: 1.4s; }
.ghost-card #an9 { top: 30px; left: 20px; animation-delay: 1.6s; }
.ghost-card #an10 { top: 32px; left: 40px; animation-delay: 1.8s; }
.ghost-card #an11 { top: 35px; left: 10px; animation-delay: 2s; }
.ghost-card #an12 { top: 33px; left: 55px; animation-delay: 2.2s; }
.ghost-card #an13 { top: 38px; left: 25px; animation-delay: 2.4s; }
.ghost-card #an14 { top: 40px; left: 45px; animation-delay: 2.6s; }
.ghost-card #an15 { top: 42px; left: 15px; animation-delay: 2.8s; }
.ghost-card #an16 { top: 45px; left: 35px; animation-delay: 3s; }
.ghost-card #an17 { top: 48px; left: 50px; animation-delay: 3.2s; }
.ghost-card #an18 { top: 50px; left: 30px; animation-delay: 3.4s; }

.ghost-card #shadow {
  position: absolute;
  width: 80px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  bottom: -30px;
  left: -10px;
  animation: shadowPulse 3s ease-in-out infinite;
}

/* Credit Card Breaking Animation */
.credit-card .card-container {
  display: flex;
  align-items: center;
  scale: 0.7;
  z-index: 1;
  position: relative;
}

.credit-card .flip-card_1 {
  display: inline-block;
  width: 150px;
  height: 154px;
  perspective: 1000px;
  color: white;
  margin-right: -12px;
  animation: moveLeft 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  border-radius: 1rem 0 0 1rem;
  --m: conic-gradient(from -135deg at right, #0000,#000 1deg 89deg,#0000 90deg) right/100% 20px repeat-y;
  -webkit-mask: var(--m);
  mask: var(--m);
}

.credit-card .flip-card_2 {
  display: inline-block;
  width: 130px;
  height: 154px;
  perspective: 1000px;
  color: white;
  margin-left: -12px;
  animation: moveRight 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  border-radius: 0 1rem 1rem 0;
  --m: conic-gradient(from 45deg at left, #0000,#000 1deg 89deg,#0000 90deg) left/100% 20px repeat-y;
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-position: 0 -2px;
  mask-position: 0 -2px;
}

/* Security Animation (Blockchain) */
.security-animation {
  position: relative;
  width: 120px;
  height: 80px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-lock {
  position: relative;
  z-index: 2;
}

.lock-body {
  width: 30px;
  height: 25px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  animation: lockPulse 2s ease-in-out infinite;
}

.lock-shackle {
  width: 20px;
  height: 15px;
  border: 3px solid #2563eb;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  animation: shackleSway 3s ease-in-out infinite;
}

.security-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wave {
  position: absolute;
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-radius: 50%;
  animation: waveExpand 2s ease-out infinite;
}

.wave-1 {
  width: 40px;
  height: 40px;
  margin: -20px;
  animation-delay: 0s;
}

.wave-2 {
  width: 60px;
  height: 60px;
  margin: -30px;
  animation-delay: 0.5s;
}

.wave-3 {
  width: 80px;
  height: 80px;
  margin: -40px;
  animation-delay: 1s;
}

.blockchain-nodes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  animation: nodePulse 2s ease-in-out infinite;
}

.node-1 {
  top: 10px;
  left: 10px;
  animation-delay: 0s;
}

.node-2 {
  top: 10px;
  right: 10px;
  animation-delay: 0.7s;
}

.node-3 {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.4s;
}

.connection {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  animation: connectionFlow 3s ease-in-out infinite;
}

.connection-1 {
  top: 14px;
  left: 18px;
  right: 18px;
  width: calc(100% - 36px);
}

.connection-2 {
  top: 14px;
  left: 50%;
  width: 1px;
  height: calc(100% - 28px);
  background: linear-gradient(180deg, transparent, #10b981, transparent);
  transform: translateX(-50%);
  animation-delay: 1s;
}

/* AI Animation */
.ai-animation {
  position: relative;
  width: 100px;
  height: 80px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-brain {
  position: relative;
  z-index: 2;
}

.brain-core {
  width: 40px;
  height: 30px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  animation: brainPulse 2s ease-in-out infinite;
}

.neural-network {
  position: absolute;
  width: 80px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.neuron {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #8b5cf6;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
  animation: neuronFire 1.5s ease-in-out infinite;
}

.neuron-1 {
  top: 5px;
  left: 10px;
  animation-delay: 0s;
}

.neuron-2 {
  top: 5px;
  right: 10px;
  animation-delay: 0.3s;
}

.neuron-3 {
  bottom: 5px;
  left: 15px;
  animation-delay: 0.6s;
}

.neuron-4 {
  bottom: 5px;
  right: 15px;
  animation-delay: 0.9s;
}

.synapse {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  animation: synapseFlow 2s ease-in-out infinite;
}

.synapse-1 {
  top: 8px;
  left: 16px;
  right: 16px;
  width: calc(100% - 32px);
}

.synapse-2 {
  bottom: 8px;
  left: 21px;
  right: 21px;
  width: calc(100% - 42px);
  animation-delay: 0.7s;
}

.synapse-3 {
  top: 8px;
  left: 40px;
  width: 1px;
  height: calc(100% - 16px);
  background: linear-gradient(180deg, transparent, #8b5cf6, transparent);
  transform: translateX(-50%);
  animation-delay: 1.4s;
}

.code-particles {
  position: absolute;
  width: 120px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.particle {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  color: #8b5cf6;
  opacity: 0.7;
  animation: particleFloat 3s ease-in-out infinite;
}

.particle-1 {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.particle-2 {
  top: 0;
  right: 0;
  animation-delay: 0.8s;
}

.particle-3 {
  bottom: 0;
  left: 20px;
  animation-delay: 1.6s;
}

.particle-4 {
  bottom: 0;
  right: 20px;
  animation-delay: 2.4s;
}

/* =====================================================
   Animation Keyframes
   ===================================================== */

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

@keyframes blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.3); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.1; }
  50% { transform: scaleX(1.2); opacity: 0.2; }
}

@keyframes moveLeft {
  0%, 20%, 80%, 100% {
    margin-right: -12px;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    margin-right: 25px;
    transform: translateX(-25px) rotate(-3deg);
  }
}

@keyframes moveRight {
  0%, 20%, 80%, 100% {
    margin-left: -12px;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    margin-left: 25px;
    transform: translateX(25px) rotate(3deg);
  }
}

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

@keyframes shackleSway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-2deg); }
  75% { transform: translateX(-50%) rotate(2deg); }
}

@keyframes waveExpand {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes nodePulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }
  50% { 
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
  }
}

@keyframes connectionFlow {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes brainPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
  }
}

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

@keyframes synapseFlow {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

@keyframes particleFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0.5;
  }
  33% { 
    transform: translateY(-10px) rotate(120deg);
    opacity: 1;
  }
  66% { 
    transform: translateY(-5px) rotate(240deg);
    opacity: 0.8;
  }
}