/* Animation Definitions */

/* Reveals on Scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

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

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

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

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

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

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

/* Text Animations */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

.typing-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary-color);
  width: 0;
  animation: typing 3.5s steps(40, end) forwards,
             blink 1s step-end infinite;
}

/* Technology Effect */
.tech-effect {
  position: relative;
  overflow: hidden;
}

.tech-effect::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 1px,
    rgba(108, 99, 255, 0.05) 1px,
    rgba(108, 99, 255, 0.05) 2px
  ),
  repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 1px,
    rgba(108, 99, 255, 0.05) 1px,
    rgba(108, 99, 255, 0.05) 2px
  );
  transform: rotate(45deg);
  animation: tech-bg-move 20s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes tech-bg-move {
  0% {
    transform: rotate(45deg) translate(0, 0);
  }
  100% {
    transform: rotate(45deg) translate(100px, 100px);
  }
}

/* Data Stream Effect */
.data-stream {
  position: absolute;
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);
  opacity: 0.6;
  animation: data-fall 8s linear infinite;
}

@keyframes data-fall {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(1000%);
    opacity: 0;
  }
}

/* Glow Effect */
.glow {
  position: relative;
  z-index: 1;
}

.glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  filter: blur(30px);
  opacity: 0.3;
  z-index: -1;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.glow:hover::after {
  opacity: 0.5;
  filter: blur(20px);
}

/* Floating Animation */
@keyframes float-slow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(15px) rotate(-2deg);
  }
}

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

/* Space Background */
.space-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(10, 17, 64, 0.8) 0%, rgba(5, 10, 48, 1) 70%);
  z-index: -1;
}

.space-bg::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 
    10vw 10vh 1px rgba(255, 255, 255, 0.8),
    20vw 20vh 1px rgba(255, 255, 255, 0.6),
    30vw 30vh 1px rgba(255, 255, 255, 0.7),
    40vw 40vh 1px rgba(255, 255, 255, 0.8),
    50vw 50vh 1px rgba(255, 255, 255, 0.6),
    60vw 60vh 1px rgba(255, 255, 255, 0.7),
    70vw 70vh 1px rgba(255, 255, 255, 0.8),
    80vw 80vh 1px rgba(255, 255, 255, 0.6),
    90vw 90vh 1px rgba(255, 255, 255, 0.7),
    15vw 25vh 1px rgba(255, 255, 255, 0.8),
    25vw 35vh 1px rgba(255, 255, 255, 0.6),
    35vw 45vh 1px rgba(255, 255, 255, 0.7),
    45vw 55vh 1px rgba(255, 255, 255, 0.8),
    55vw 65vh 1px rgba(255, 255, 255, 0.6),
    65vw 75vh 1px rgba(255, 255, 255, 0.7),
    75vw 85vh 1px rgba(255, 255, 255, 0.8),
    85vw 95vh 1px rgba(255, 255, 255, 0.6),
    5vw 15vh 1px rgba(255, 255, 255, 0.7);
  animation: stars-move 100s linear infinite;
}

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

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease-out;
}

.hover-lift:hover {
  transform: translateY(-10px);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 15px rgba(108, 99, 255, 0.5);
}

.hover-scale {
  transition: transform 0.3s ease;
}

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

/* Button Animations */
.btn-pulse {
  position: relative;
  overflow: hidden;
}

.btn-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn-pulse:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  color: var(--light-color);
}

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

.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 var(--secondary-color);
  clip: rect(0, 900px, 0, 0);
  animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -1px 0 var(--primary-color);
  clip: rect(0, 900px, 0, 0);
  animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(25px, 900px, 36px, 0);
  }
  20% {
    clip: rect(48px, 900px, 31px, 0);
  }
  40% {
    clip: rect(12px, 900px, 6px, 0);
  }
  60% {
    clip: rect(86px, 900px, 98px, 0);
  }
  80% {
    clip: rect(63px, 900px, 91px, 0);
  }
  100% {
    clip: rect(40px, 900px, 16px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(63px, 900px, 52px, 0);
  }
  20% {
    clip: rect(11px, 900px, 78px, 0);
  }
  40% {
    clip: rect(36px, 900px, 5px, 0);
  }
  60% {
    clip: rect(67px, 900px, 12px, 0);
  }
  80% {
    clip: rect(93px, 900px, 62px, 0);
  }
  100% {
    clip: rect(45px, 900px, 26px, 0);
  }
}

/* Scanner Effect */
.scan-effect {
  position: relative;
  overflow: hidden;
}

.scan-effect::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
  top: -100%;
  left: 0;
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    top: -20%;
  }
  100% {
    top: 120%;
  }
}

/* Liquid Button Effect */
.btn-liquid {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-liquid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
  background-size: 50% 100%;
  z-index: -1;
  transition: transform 0.5s ease;
}

.btn-liquid:hover::before {
  transform: translateX(-25%);
}

/* Loading Animation */
.loading-circle {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(108, 99, 255, 0.2);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

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

/* Data Visualization Effect */
.data-viz {
  display: flex;
  align-items: flex-end;
  height: 150px;
  gap: 5px;
}

.data-bar {
  width: 12px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 2px 2px 0 0;
  animation: data-rise 1.5s ease-out forwards;
}

@keyframes data-rise {
  0% {
    height: 10px;
  }
  100% {
    height: var(--bar-height, 100px);
  }
}

/* Circuit Animation */
.circuit {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.circuit-line {
  position: absolute;
  background: var(--primary-light);
  opacity: 0.2;
}

.circuit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
  opacity: 0;
}

.circuit-dot.active {
  animation: circuit-pulse 2s linear forwards;
}

@keyframes circuit-pulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

/* Parallax Effect */
.parallax {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
}

/* 3D Tilt Effect */
.tilt-effect {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

/* Neon Text Effect */
.neon-text {
  text-shadow: 
    0 0 5px rgba(108, 99, 255, 0.7),
    0 0 10px rgba(108, 99, 255, 0.5),
    0 0 20px rgba(108, 99, 255, 0.3);
  animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
  from {
    text-shadow: 
      0 0 5px rgba(108, 99, 255, 0.7),
      0 0 10px rgba(108, 99, 255, 0.5),
      0 0 20px rgba(108, 99, 255, 0.3);
  }
  to {
    text-shadow: 
      0 0 10px rgba(108, 99, 255, 0.9),
      0 0 20px rgba(108, 99, 255, 0.7),
      0 0 30px rgba(108, 99, 255, 0.5),
      0 0 40px rgba(108, 99, 255, 0.3);
  }
}

/* Hologram Effect */
.hologram {
  position: relative;
  opacity: 0.8;
}

.hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(108, 99, 255, 0.05) 0px,
    rgba(108, 99, 255, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

.hologram::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(108, 99, 255, 0.2) 0%,
    transparent 50%,
    rgba(0, 245, 255, 0.2) 100%
  );
  animation: hologram-shift 3s ease infinite;
  pointer-events: none;
}

@keyframes hologram-shift {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.3;
  }
}

/* Matrix Effect */
.matrix-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.matrix-column {
  position: absolute;
  top: -100px;
  font-family: monospace;
  font-size: 16px;
  color: var(--secondary-color);
  opacity: 0.7;
  text-shadow: 0 0 5px var(--secondary-light);
  animation: matrix-fall linear infinite;
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000%);
  }
}

/* Digital Noise Effect */
.digital-noise {
  position: relative;
  overflow: hidden;
}

.digital-noise::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,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');
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
  animation: noise-shift 0.5s steps(2) infinite;
}

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

/* Digital Particles */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 50%;
  opacity: 0.5;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(var(--move-y)) translateX(var(--move-x));
    opacity: 0;
  }
}

/* Text Scramble Effect */
.scramble-text {
  display: inline-block;
}

@keyframes scramble {
  0% {
    content: attr(data-scramble-0);
  }
  10% {
    content: attr(data-scramble-1);
  }
  20% {
    content: attr(data-scramble-2);
  }
  30% {
    content: attr(data-scramble-3);
  }
  40% {
    content: attr(data-scramble-4);
  }
  50% {
    content: attr(data-scramble-5);
  }
  60% {
    content: attr(data-scramble-6);
  }
  70% {
    content: attr(data-scramble-7);
  }
  80% {
    content: attr(data-scramble-8);
  }
  90% {
    content: attr(data-scramble-9);
  }
  100% {
    content: attr(data-final);
  }
}

/* Counting Animation */
.counting {
  display: inline-block;
  position: relative;
}

@keyframes counting {
  0% {
    content: "0";
  }
  10% {
    content: attr(data-count-10);
  }
  20% {
    content: attr(data-count-20);
  }
  30% {
    content: attr(data-count-30);
  }
  40% {
    content: attr(data-count-40);
  }
  50% {
    content: attr(data-count-50);
  }
  60% {
    content: attr(data-count-60);
  }
  70% {
    content: attr(data-count-70);
  }
  80% {
    content: attr(data-count-80);
  }
  90% {
    content: attr(data-count-90);
  }
  100% {
    content: attr(data-count);
  }
}

/* Cybernetic Pulse Effect */
.cyber-pulse {
  position: relative;
  overflow: hidden;
}

.cyber-pulse::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color);
  opacity: 0;
  z-index: -1;
  animation: cyber-pulse 2s ease-out infinite;
}

@keyframes cyber-pulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Data Flow Effect */
.data-flow {
  position: relative;
  overflow: hidden;
}

.data-flow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary-color) 50%,
    transparent 100%
  );
  opacity: 0.2;
  z-index: -1;
  animation: data-flow 3s linear infinite;
}

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

/* Staggered Animation for Lists */
.stagger-anim > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-anim.active > *:nth-child(1) {
  animation: stagger-fade-in 0.5s 0.1s forwards;
}

.stagger-anim.active > *:nth-child(2) {
  animation: stagger-fade-in 0.5s 0.2s forwards;
}

.stagger-anim.active > *:nth-child(3) {
  animation: stagger-fade-in 0.5s 0.3s forwards;
}

.stagger-anim.active > *:nth-child(4) {
  animation: stagger-fade-in 0.5s 0.4s forwards;
}

.stagger-anim.active > *:nth-child(5) {
  animation: stagger-fade-in 0.5s 0.5s forwards;
}

.stagger-anim.active > *:nth-child(6) {
  animation: stagger-fade-in 0.5s 0.6s forwards;
}

@keyframes stagger-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Transition Effects */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark-color);
  z-index: 9999;
  transform: translateY(100%);
}

.page-transition.active {
  animation: page-transition-in 0.6s ease forwards;
}

.page-transition.exit {
  transform: translateY(0);
  animation: page-transition-out 0.6s ease forwards;
}

@keyframes page-transition-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes page-transition-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

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

.reveal-text-container .reveal-text {
  display: inline-block;
}

.reveal-text-container .reveal-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  transform: translateX(-100%);
  z-index: 1;
}

.reveal-text-container.active .reveal-text {
  animation: reveal-text 0.8s ease forwards;
}

.reveal-text-container.active .reveal-cover {
  animation: reveal-cover 1.2s ease forwards;
}

@keyframes reveal-text {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes reveal-cover {
  0% {
    transform: translateX(-100%);
  }
  40% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Futuristic Loading Bar */
.loading-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}

.loading-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  animation: loading-progress 3s ease-in-out infinite;
}

@keyframes loading-progress {
  0% {
    width: 0;
    background-position: 0% 50%;
  }
  50% {
    width: 70%;
    background-position: 100% 50%;
  }
  100% {
    width: 100%;
    background-position: 0% 50%;
  }
}

/* AI Processing Effect */
.ai-processing {
  position: relative;
  overflow: hidden;
}

.ai-processing::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
    repeating-linear-gradient(
      90deg, 
      rgba(108, 99, 255, 0.1), 
      rgba(108, 99, 255, 0.1) 1px, 
      transparent 1px, 
      transparent 10px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(108, 99, 255, 0.1),
      rgba(108, 99, 255, 0.1) 1px,
      transparent 1px,
      transparent 10px
    );
  animation: ai-process 1s linear infinite;
  pointer-events: none;
}

@keyframes ai-process {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10px 10px;
  }
}

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

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