/* ================ Animations ================ */

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

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

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

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

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

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

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

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

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

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

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px var(--accent-primary);
  }
  50% {
    box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary);
  }
}

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

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes swing {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

@keyframes tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes jello {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31%, 100% { transform: rotate(0deg); }
}

/* ================ Gradient Animations ================ */

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

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes borderRainbow {
  0% { border-color: #ff0000; }
  16% { border-color: #ff8800; }
  33% { border-color: #ffff00; }
  50% { border-color: #00ff00; }
  66% { border-color: #0088ff; }
  83% { border-color: #8800ff; }
  100% { border-color: #ff0000; }
}

/* ================ Text Animations ================ */

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 5px var(--accent-primary);
  }
  50% {
    text-shadow: 0 0 20px var(--accent-primary), 0 0 30px var(--accent-primary);
  }
}

@keyframes textReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

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

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

/* ================ Loading Animations ================ */

@keyframes loadingDots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

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

@keyframes loadingBars {
  0%, 40% { transform: scaleY(0.6); }
  20% { transform: scaleY(1); }
}

/* ================ Hover Animations ================ */

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

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

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

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

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

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

.hover-shake:hover {
  animation: shake 0.5s ease;
}

.hover-wiggle:hover {
  animation: wiggle 0.5s ease;
}

.hover-glow {
  transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}

/* ================ Scroll Animations ================ */

.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

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

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

/* ================ Parallax Effects ================ */

.parallax {
  transition: transform 0.1s ease-out;
}

/* ================ Special Effects ================ */

/* Glitch Effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  color: #ff0000;
}

.glitch::after {
  animation: glitch-2 0.3s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  color: #00ffff;
}

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

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

/* Neon Effect */
.neon {
  animation: neon 1.5s ease-in-out infinite alternate;
}

@keyframes neon {
  0% {
    text-shadow: 
      0 0 5px var(--accent-primary),
      0 0 10px var(--accent-primary),
      0 0 15px var(--accent-primary);
  }
  100% {
    text-shadow: 
      0 0 10px var(--accent-primary),
      0 0 20px var(--accent-primary),
      0 0 30px var(--accent-primary),
      0 0 40px var(--accent-primary);
  }
}

/* Vaporwave Effect */
.vaporwave {
  font-family: 'JetBrains Mono', monospace;
  background: linear-gradient(180deg, #ff6ec7 0%, #787bff 50%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
  background-size: 200% 200%;
}

/* Matrix Rain Effect */
.matrix-rain {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-green);
  animation: matrix 0.5s linear infinite;
}

@keyframes matrix {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Fire Effect */
.fire {
  background: linear-gradient(to top, #ff0000, #ff7f00, #ffff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: flame 1s ease-in-out infinite alternate;
}

@keyframes flame {
  0% {
    filter: blur(0);
    transform: scale(1);
  }
  100% {
    filter: blur(2px);
    transform: scale(1.05);
  }
}

/* Wave Effect */
.wave {
  animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-20deg); }
}

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

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Shimmer Effect */
.shimmer {
  position: relative;
  overflow: hidden;
}

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

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Marquee Effect */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

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

/* Reveal Animation Classes */
.animate-fadeIn { animation: fadeIn 0.6s ease forwards; }
.animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
.animate-fadeInRight { animation: fadeInRight 0.6s ease forwards; }
.animate-scaleIn { animation: scaleIn 0.6s ease forwards; }
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-pulse { animation: pulse 2s ease infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-rotate { animation: rotate 2s linear infinite; }
.animate-shake { animation: shake 0.5s ease; }
.animate-wiggle { animation: wiggle 0.5s ease; }

/* Delay Classes */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* Duration Classes */
.duration-fast { animation-duration: 150ms; }
.duration-normal { animation-duration: 300ms; }
.duration-slow { animation-duration: 500ms; }
.duration-slower { animation-duration: 800ms; }
.duration-slowest { animation-duration: 1s; }

/* ================ 3D Card Effect ================ */

.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

/* ================ Morph Effect ================ */

.morph {
  animation: morph 8s ease-in-out infinite;
}

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

/* ================ Liquid Effect ================ */

.liquid {
  animation: liquid 10s ease-in-out infinite;
}

@keyframes liquid {
  0%, 100% { border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; }
  25% { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
  50% { border-radius: 45% 55% 60% 40% / 40% 60% 55% 45%; }
  75% { border-radius: 50% 50% 45% 55% / 50% 45% 55% 50%; }
}

/* ================ Cursor Trail Effect ================ */

.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 10px;
  height: 10px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: trail 1s ease-out forwards;
}

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

/* ================ Particle Burst ================ */

.particle-burst {
  position: relative;
}

.particle-burst::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--accent-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: burst 0.6s ease-out forwards;
}

@keyframes burst {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
  }
}

/* ================ Anime Animations ================ */

/* Sakura Fall */
@keyframes sakura-fall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) translateX(15px) rotate(90deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) translateX(-15px) rotate(180deg);
    opacity: 0.8;
  }
  75% {
    transform: translateY(75vh) translateX(10px) rotate(270deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(105vh) translateX(-5px) rotate(360deg);
    opacity: 0;
  }
}

/* Pulse Glow */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--accent-primary),
                0 0 10px var(--accent-primary),
                0 0 20px var(--accent-primary);
  }
  50% {
    box-shadow: 0 0 10px var(--accent-primary),
                0 0 20px var(--accent-primary),
                0 0 40px var(--accent-primary),
                0 0 80px var(--accent-cyan);
  }
}

/* Floating Orb */
@keyframes float-orb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(10px, -10px) scale(1.1);
  }
  50% {
    transform: translate(-5px, 15px) scale(0.9);
  }
  75% {
    transform: translate(15px, 5px) scale(1.05);
  }
}

/* Neon Text */
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px var(--accent-primary),
      0 0 10px var(--accent-primary),
      0 0 20px var(--accent-primary),
      0 0 40px var(--accent-secondary),
      0 0 80px var(--accent-cyan);
  }
  20%, 24%, 55% {
    text-shadow: 
      0 0 2px var(--accent-primary),
      0 0 5px var(--accent-primary),
      0 0 10px var(--accent-secondary);
  }
}

/* Cyber Scan */
@keyframes cyber-scan {
  0% {
    top: -2px;
    left: -100%;
  }
  100% {
    top: -2px;
    left: 100%;
  }
}

/* Gradient Shift */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Energy Pulse */
@keyframes energy-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Hologram Flicker */
@keyframes hologram-flicker {
  0%, 100% {
    opacity: 1;
    filter: hue-rotate(0deg);
  }
  5% {
    opacity: 0.8;
    filter: hue-rotate(10deg);
  }
  10% {
    opacity: 1;
    filter: hue-rotate(0deg);
  }
  55% {
    opacity: 0.9;
    filter: hue-rotate(-5deg);
  }
  60% {
    opacity: 1;
    filter: hue-rotate(0deg);
  }
}

/* Star Trail */
@keyframes star-trail {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100px) translateY(-100px);
    opacity: 0;
  }
}