/* ============================================
   ANIMATIONS - Keyframes & Animation Classes
   Cyberpunk Portfolio
   ============================================ */

/* ---- GLITCH EFFECTS ---- */
@keyframes glitch-1 {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3px, 3px); }
  40%  { transform: translate(-3px, -3px); }
  60%  { transform: translate(3px, 3px); }
  80%  { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { transform: translate(0); }
  20%  { transform: translate(3px, -3px); }
  40%  { transform: translate(3px, 3px); }
  60%  { transform: translate(-3px, -3px); }
  80%  { transform: translate(-3px, 3px); }
  100% { transform: translate(0); }
}

@keyframes glitch-skew {
  0%   { transform: skew(0deg); }
  5%   { transform: skew(2deg); }
  10%  { transform: skew(-1deg); }
  15%  { transform: skew(3deg); }
  20%  { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

/* ---- GLOW & PULSE ---- */
@keyframes neon-pulse {
  0%   { text-shadow: 0 0 10px rgba(0, 255, 200, 0.5), 0 0 20px rgba(0, 255, 200, 0.3); }
  50%  { text-shadow: 0 0 20px rgba(0, 255, 200, 0.8), 0 0 40px rgba(0, 255, 200, 0.5), 0 0 60px rgba(0, 255, 200, 0.2); }
  100% { text-shadow: 0 0 10px rgba(0, 255, 200, 0.5), 0 0 20px rgba(0, 255, 200, 0.3); }
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 5px var(--cyber-primary), 0 0 10px var(--cyber-primary);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 15px var(--cyber-primary), 0 0 30px var(--cyber-primary);
    transform: scale(1.2);
  }
}

@keyframes glow-border {
  0%   { box-shadow: 0 0 5px rgba(0, 255, 200, 0.2); border-color: rgba(0, 255, 200, 0.2); }
  50%  { box-shadow: 0 0 20px rgba(0, 255, 200, 0.4), 0 0 40px rgba(0, 255, 200, 0.1); border-color: rgba(0, 255, 200, 0.5); }
  100% { box-shadow: 0 0 5px rgba(0, 255, 200, 0.2); border-color: rgba(0, 255, 200, 0.2); }
}

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

/* ---- FADE ANIMATIONS ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

/* ---- SLIDE ANIMATIONS ---- */
@keyframes slideInFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromBottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- SPECIAL EFFECTS ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes scanline-move {
  0%   { top: -10%; }
  100% { top: 110%; }
}

@keyframes typing-cursor {
  0%, 100% { border-right-color: var(--cyber-primary); }
  50%      { border-right-color: transparent; }
}

@keyframes data-stream {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes border-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

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

@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0); opacity: 1; }
  50%  { transform: translateY(-20px) translateX(10px); opacity: 0.5; }
  100% { transform: translateY(-40px) translateX(-10px); opacity: 0; }
}

/* ---- SCROLL-TRIGGERED ANIMATION CLASSES ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Stagger delays for children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ---- UTILITY ANIMATION CLASSES ---- */
.anim-fade-in       { animation: fadeIn 1s ease forwards; }
.anim-fade-in-up    { animation: fadeInUp 0.8s ease forwards; }
.anim-fade-in-down  { animation: fadeInDown 0.8s ease forwards; }
.anim-fade-in-left  { animation: fadeInLeft 0.8s ease forwards; }
.anim-fade-in-right { animation: fadeInRight 0.8s ease forwards; }
.anim-float          { animation: float 3s ease-in-out infinite; }
.anim-neon-pulse     { animation: neon-pulse 2s ease-in-out infinite; }
.anim-glow-border    { animation: glow-border 3s ease-in-out infinite; }
.anim-rotate-slow    { animation: rotate-slow 20s linear infinite; }
.anim-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 200, 0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Delay helpers */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-800 { animation-delay: 0.8s; }
.delay-1000 { animation-delay: 1s; }

/* ---- HOVER EFFECT CLASSES ---- */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.3), 0 0 40px rgba(0, 255, 200, 0.1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

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

.hover-neon-border:hover {
  border-color: var(--cyber-primary);
  box-shadow: 0 0 15px rgba(0, 255, 200, 0.3);
}