/* ============================================================
   codx.solutions — Animations
   Subtle, professional motion only
   ============================================================ */

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

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

@keyframes float-node {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate(4px, -8px);
    opacity: 1;
  }
}

@keyframes particle-drift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(40px, -50px);
    opacity: 0;
  }
}

@keyframes line-draw {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(25, 211, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(25, 211, 255, 0.55));
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* Hero visual motion */
.hero__svg .node {
  animation: float-node 4s ease-in-out infinite;
}

.hero__svg .node:nth-child(odd) {
  animation-delay: 0.5s;
  animation-duration: 5s;
}

.hero__svg .node:nth-child(3n) {
  animation-delay: 1.2s;
  animation-duration: 3.5s;
}

.hero__svg .particle {
  animation: particle-drift 5s ease-in-out infinite;
}

.hero__svg .particle-2 {
  animation-delay: 1.5s;
  animation-duration: 6s;
}

.hero__svg .particle-3 {
  animation-delay: 2.8s;
  animation-duration: 4.5s;
}

.hero__svg .path-line {
  stroke-dasharray: 200;
  animation: line-draw 2.5s ease forwards;
}

.hero__svg .core-shape {
  animation: glow-pulse 4s ease-in-out infinite;
}

.hero__visual {
  animation: float-y 7s ease-in-out infinite;
}

/* ========== About visual ========== */
@keyframes about-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes about-core-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.92;
  }
}

@keyframes about-core-breathe {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.08);
  }
}

@keyframes about-pixel-float {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.55;
  }
  50% {
    transform: translate(6px, -10px);
    opacity: 1;
  }
}

@keyframes about-node-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

@keyframes about-link-dash {
  to {
    stroke-dashoffset: -40;
  }
}

.about__visual-svg .about-orbit {
  transform-box: view-box;
  transform-origin: center;
}

.about__visual-svg .about-orbit--outer {
  animation: about-spin 36s linear infinite;
}

.about__visual-svg .about-orbit--inner {
  animation: about-spin-reverse 22s linear infinite;
}

.about__visual-svg .about-core {
  transform-box: view-box;
  transform-origin: center;
  animation: about-core-pulse 5s ease-in-out infinite;
}

.about__visual-svg .about-core__inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: about-core-breathe 4s ease-in-out infinite;
}

.about__visual-svg .about-pixel {
  animation: about-pixel-float 3.8s ease-in-out infinite;
}

.about__visual-svg .about-pixel--2 {
  animation-delay: 0.6s;
  animation-duration: 4.4s;
}

.about__visual-svg .about-pixel--3 {
  animation-delay: 1.2s;
  animation-duration: 5s;
}

.about__visual-svg .about-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: about-node-pulse 2.8s ease-in-out infinite;
}

.about__visual-svg .about-node--2 {
  animation-delay: 0.7s;
  animation-duration: 3.2s;
}

.about__visual-svg .about-node--3 {
  animation-delay: 1.4s;
  animation-duration: 3.6s;
}

.about__visual-svg .about-link {
  stroke-dasharray: 6 8;
  animation: about-link-dash 4s linear infinite;
}

.about__visual-svg .about-link--2 {
  animation-duration: 5.5s;
  animation-direction: reverse;
}

.about__visual {
  animation: float-y 8s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__visual,
  .about__visual {
    animation: none;
  }

  .about__visual-svg .about-orbit,
  .about__visual-svg .about-core,
  .about__visual-svg .about-core__inner,
  .about__visual-svg .about-pixel,
  .about__visual-svg .about-node,
  .about__visual-svg .about-link {
    animation: none !important;
  }
}