/* ==========================================================================
   AINOX — Animations & Motion System (Section 9, 40, 41)
   Lenis & GSAP support + CSS keyframes & scroll triggers
   Multi-axis organic float system for Hero Social Signal Field
   ========================================================================== */

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

/* Scroll reveal helper classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  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;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure all cards are visible by default */
.numbered-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Sequential Stagger Delays (80ms - 120ms intervals) */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }
.reveal-delay-5 { transition-delay: 0.48s; }
.reveal-delay-6 { transition-delay: 0.58s; }

/* ==========================================================================
   ORGANIC FLOAT MOTION SYSTEM (5 Distinct Speeds & Multi-Axis Curves)
   For Hero Social Signal Field and CTA Ambient Particles
   ========================================================================== */
.float-anim-1 {
  animation: floatOrganic1 9s ease-in-out infinite alternate;
}
.float-anim-2 {
  animation: floatOrganic2 12s ease-in-out infinite alternate;
}
.float-anim-3 {
  animation: floatOrganic3 15s ease-in-out infinite alternate;
}
.float-anim-4 {
  animation: floatOrganic4 18s ease-in-out infinite alternate;
}
.float-anim-5 {
  animation: floatOrganic5 21s ease-in-out infinite alternate;
}

@keyframes floatOrganic1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(7px, -14px, 0) rotate(1.2deg) scale(1.02);
  }
  100% {
    transform: translate3d(-9px, -22px, 0) rotate(-1deg) scale(0.99);
  }
}

@keyframes floatOrganic2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(-11px, 14px, 0) rotate(-1.5deg) scale(0.98);
  }
  100% {
    transform: translate3d(8px, 24px, 0) rotate(1deg) scale(1.01);
  }
}

@keyframes floatOrganic3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(14px, 9px, 0) rotate(1.8deg) scale(1.02);
  }
  100% {
    transform: translate3d(-6px, -16px, 0) rotate(-1.2deg) scale(0.98);
  }
}

@keyframes floatOrganic4 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(-8px, -18px, 0) rotate(-1.4deg) scale(1.01);
  }
  100% {
    transform: translate3d(11px, -9px, 0) rotate(1.4deg) scale(0.99);
  }
}

@keyframes floatOrganic5 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(10px, 16px, 0) rotate(1.2deg) scale(0.99);
  }
  100% {
    transform: translate3d(-12px, 9px, 0) rotate(-1deg) scale(1.02);
  }
}

/* Subtle glow background element */
.bg-ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, rgba(217, 70, 239, 0.04) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Card hover glow */
.card-glow-effect {
  position: relative;
}

.card-glow-effect::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(217, 70, 239, 0.1), transparent 60%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card-glow-effect:hover::before {
  opacity: 1;
}

/* Image reveal mask */
.image-reveal-wrapper {
  overflow: hidden;
  position: relative;
}

.image-reveal-wrapper img {
  transform: scale(1.08);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal-wrapper.is-visible img {
  transform: scale(1);
}

/* Counter animation styling */
.counter-value {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}