/* ============================================
   MIKON — Animations & Scroll Reveal
   ============================================ */

/* --- Logo Draw Animation --- */
@keyframes draw-path {
  from {
    stroke-dashoffset: var(--path-length, 600);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shimmer {
  0%, 100% {
    stop-color: #7A8A9A;
  }
  50% {
    stop-color: #C8D8E8;
  }
}

@keyframes shimmer-alt {
  0%, 100% {
    stop-color: #4A5A6A;
  }
  50% {
    stop-color: #8A9AAA;
  }
}

.logo-path-draw {
  stroke-dasharray: var(--path-length, 600);
  stroke-dashoffset: var(--path-length, 600);
  animation: draw-path 2s ease-out forwards;
}

.logo-fill-fade {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.5s forwards;
}

.logo-text-fade {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 1.8s forwards;
}

.logo-tagline-fade {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 2.1s forwards;
}

/* --- CTA Button Glow --- */
@keyframes btn-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.25),
                0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(33, 150, 243, 0.5),
                0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

.hero__cta {
  animation: btn-glow 3s ease-in-out infinite;
}

/* --- Background Hex Grid Pulse --- */
@keyframes hex-pulse {
  0%, 100% {
    opacity: 0.03;
  }
  50% {
    opacity: 0.12;
  }
}

@keyframes node-pulse {
  0%, 100% {
    r: 2;
    opacity: 0.2;
  }
  50% {
    r: 3.5;
    opacity: 0.6;
  }
}

@keyframes traveling-dot {
  0% {
    stroke-dashoffset: 200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.hex-node {
  animation: node-pulse 4s ease-in-out infinite;
}

.hex-node:nth-child(2n) {
  animation-delay: -1s;
}

.hex-node:nth-child(3n) {
  animation-delay: -2s;
}

.hex-node:nth-child(5n) {
  animation-delay: -0.5s;
}

/* --- Fade In --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* --- Scroll Reveal System --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 40px));
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered reveal for children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 40px));
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 150ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 300ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 450ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 600ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 750ms; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 900ms; }

[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- SVG Icon Draw on Reveal --- */
.icon-draw path,
.icon-draw circle,
.icon-draw rect,
.icon-draw line,
.icon-draw polyline {
  stroke-dasharray: var(--path-length, 200);
  stroke-dashoffset: var(--path-length, 200);
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.revealed .icon-draw path,
.revealed .icon-draw circle,
.revealed .icon-draw rect,
.revealed .icon-draw line,
.revealed .icon-draw polyline {
  stroke-dashoffset: 0;
}

/* Staggered icon draw */
.revealed .icon-draw path:nth-child(2),
.revealed .icon-draw circle:nth-child(2),
.revealed .icon-draw line:nth-child(2) {
  transition-delay: 200ms;
}

.revealed .icon-draw path:nth-child(3),
.revealed .icon-draw circle:nth-child(3),
.revealed .icon-draw line:nth-child(3) {
  transition-delay: 400ms;
}

/* --- Steps Connector Pulse --- */
@keyframes pulse-travel {
  0% {
    stroke-dashoffset: 28;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.steps__connector line {
  animation: pulse-travel 1.5s linear infinite;
}

/* --- Step Icon Continuous Pulse --- */
@keyframes icon-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(33, 150, 243, 0.08);
  }
}

.step.revealed .step__icon {
  animation: icon-breathe 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* --- Advantage Card Hover Glow --- */
.advantage::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: -1;
}

.advantage {
  position: relative;
}

.advantage:hover::before {
  opacity: 1;
}

/* --- FAQ Accordion Slide --- */
.faq-item__body {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Form Input Focus Animation --- */
@keyframes input-focus-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.3);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
  }
}

/* --- Hero Shield Float --- */
@keyframes shield-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero__visual {
  animation: shield-float 5s ease-in-out infinite;
}

/* --- Stats Counter Animation --- */
@keyframes count-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__stat {
  animation: count-in 0.6s ease-out both;
}

.hero__stat:nth-child(1) { animation-delay: 2s; }
.hero__stat:nth-child(2) { animation-delay: 2.2s; }
.hero__stat:nth-child(3) { animation-delay: 2.4s; }

/* --- Particle / Dot Effect for Hero Background --- */
@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-5px) translateX(-5px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) translateX(15px);
    opacity: 0.5;
  }
}

/* --- Problem Card Icon Animations --- */
@keyframes icon-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-3deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(2deg); }
  75% { transform: rotate(0deg); }
}

.problem__card:hover .icon-animated {
  animation: icon-shake 0.6s ease-in-out;
}

/* Problem card icon color pulse */
@keyframes icon-color-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.problem__card .svg-anim-line-1,
.problem__card .svg-anim-line-2 {
  animation: icon-color-pulse 2.5s ease-in-out infinite;
}

/* Advantage icon hover grow */
@keyframes icon-grow {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.advantage:hover .icon-animated {
  animation: icon-grow 0.5s ease-in-out;
}

/* Badge subtle float */
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.badge--usdt {
  animation: badge-float 3s ease-in-out infinite;
}

.badge--usdc {
  animation: badge-float 3s ease-in-out infinite;
  animation-delay: -1.5s;
}

/* Teal step icon breathe */
@keyframes icon-breathe-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 191, 165, 0); }
  50% { box-shadow: 0 0 0 8px rgba(0, 191, 165, 0.08); }
}

@keyframes icon-breathe-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
  50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.08); }
}

.step.revealed .step__icon--teal {
  animation: icon-breathe-teal 3s ease-in-out infinite;
  animation-delay: 1s;
}

.step.revealed .step__icon--green {
  animation: icon-breathe-green 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* Advantage accent card glow */
.advantage--accent::before {
  background: linear-gradient(135deg, rgba(0, 191, 165, 0.2), transparent 50%);
}

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

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }

  .hero__visual {
    animation: none;
  }

  .hero__cta {
    animation: none;
  }
}