/* ===== ADVANCED ANIMATIONS ===== */

/* AOS (Animate On Scroll) Custom Animations */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="fade-left"] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-left"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="fade-right"] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-right"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

/* Cyberpunk Loading Animation */
.cyber-loading {
  position: relative;
  overflow: hidden;
}

.cyber-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 128, 255, 0.4), transparent);
  animation: cyber-scan 2s infinite;
}

@keyframes cyber-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Matrix Rain Effect Keyframes */
@keyframes matrix-fall {
  0% {
    transform: translateY(-100vh);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

.matrix-char {
  position: absolute;
  color: var(--cyber-green);
  font-family: var(--font-code);
  font-size: 14px;
  animation: matrix-fall linear infinite;
  text-shadow: 0 0 5px var(--cyber-green);
}

/* Particle Animation */
@keyframes particle-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.5;
  }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--electric-blue);
  border-radius: 50%;
  animation: particle-float 4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--electric-blue);
}

/* Neon Glow Pulse */
@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px currentColor;
  }
  50% {
    text-shadow: 
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 8px currentColor,
      0 0 12px currentColor;
  }
}

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

/* Typing Animation */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

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

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

/* Glitch Effect Variations */
.glitch-hover:hover {
  animation: glitch-effect 0.3s ease-in-out;
}

@keyframes glitch-effect {
  0%, 100% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  20% {
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg);
  }
  40% {
    transform: translate(-2px, -2px);
    filter: hue-rotate(180deg);
  }
  60% {
    transform: translate(2px, 2px);
    filter: hue-rotate(270deg);
  }
  80% {
    transform: translate(2px, -2px);
    filter: hue-rotate(360deg);
  }
}

/* RGB Split Effect */
.rgb-split {
  position: relative;
}

.rgb-split::before,
.rgb-split::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
}

.rgb-split::before {
  color: #ff0000;
  animation: rgb-split-red 2s infinite;
}

.rgb-split::after {
  color: #00ffff;
  animation: rgb-split-cyan 2s infinite;
}

@keyframes rgb-split-red {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 0); }
  50% { transform: translate(1px, 0); }
  75% { transform: translate(0, -1px); }
}

@keyframes rgb-split-cyan {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, 0); }
  50% { transform: translate(-1px, 0); }
  75% { transform: translate(0, 1px); }
}

/* Hologram Effect */
.hologram {
  position: relative;
  background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.1) 50%, transparent 70%);
  background-size: 20px 20px;
  animation: hologram-scan 3s linear infinite;
}

@keyframes hologram-scan {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}

/* Circuit Board Animation */
.circuit-line {
  position: absolute;
  background: var(--electric-blue);
  opacity: 0.3;
  animation: circuit-pulse 2s ease-in-out infinite;
}

@keyframes circuit-pulse {
  0%, 100% {
    opacity: 0.3;
    box-shadow: 0 0 5px var(--electric-blue);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--electric-blue);
  }
}

/* Data Stream Animation */
.data-stream {
  position: relative;
  overflow: hidden;
}

.data-stream::before {
  content: '01001001 01001010 01000001 01000011 01001111 01000010';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cyber-green), transparent);
  color: var(--cyber-green);
  font-family: var(--font-code);
  font-size: 10px;
  display: flex;
  align-items: center;
  animation: data-flow 5s linear infinite;
  opacity: 0.3;
}

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

/* Scan Line Effect */
.scan-lines {
  position: relative;
}

.scan-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 2px,
    rgba(0, 255, 0, 0.03) 4px
  );
  pointer-events: none;
  animation: scan-lines-move 0.1s linear infinite;
}

@keyframes scan-lines-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* Terminal Cursor Blink */
.terminal-cursor {
  display: inline-block;
  background: var(--cyber-green);
  width: 8px;
  height: 16px;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Skill Bar Animation */
.skill-progress {
  position: relative;
  overflow: hidden;
}

.skill-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: skill-shine 2s ease-in-out infinite;
}

@keyframes skill-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Card Hover Effects */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(5deg);
}

/* Button Ripple Effect */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::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;
}

.ripple-effect:active::before {
  width: 300px;
  height: 300px;
}

/* Loading Spinner */
.cyber-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--medium-gray);
  border-top: 3px solid var(--neon-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Progress Bar Animation */
.progress-bar {
  position: relative;
  background: var(--medium-gray);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-red), var(--electric-blue));
  border-radius: 10px;
  position: relative;
  animation: progress-glow 2s ease-in-out infinite;
}

@keyframes progress-glow {
  0%, 100% {
    box-shadow: 0 0 10px var(--neon-red);
  }
  50% {
    box-shadow: 0 0 20px var(--electric-blue);
  }
}

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

.text-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--neon-red);
  transform: translateX(-100%);
  animation: text-reveal-slide 1.5s ease-out forwards;
}

@keyframes text-reveal-slide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

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

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

/* Zoom In Animation */
.zoom-in {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.zoom-in.animate {
  transform: scale(1);
  opacity: 1;
}

/* Slide In Animations */
.slide-in-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.slide-in-left.animate {
  transform: translateX(0);
  opacity: 1;
}

.slide-in-right {
  transform: translateX(100px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.slide-in-right.animate {
  transform: translateX(0);
  opacity: 1;
}

/* Stagger Animation for Lists */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.stagger-item.animate {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }

/* Morphing Background */
.morphing-bg {
  background: linear-gradient(45deg, var(--neon-red), var(--electric-blue), var(--hot-pink));
  background-size: 400% 400%;
  animation: morphing-gradient 8s ease infinite;
}

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

/* Cyberpunk Border Animation */
.cyber-border {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(45deg, var(--neon-red), var(--electric-blue)) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.cyber-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--neon-red), var(--electric-blue));
  border-radius: inherit;
  z-index: -1;
  animation: border-rotate 3s linear infinite;
}

@keyframes border-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Performance Optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .glitch-text::before,
  .glitch-text::after,
  .matrix-char,
  .particle,
  .cyber-spinner,
  .float-animation,
  .morphing-bg,
  .cyber-border::before {
    animation: none;
  }
  
  .card-3d:hover {
    transform: none;
  }
  
  .ripple-effect::before {
    transition: none;
  }
}