/* ============================================================
   LINXLI ANIMATIONS - Scroll reveal + micro-interactions
   ============================================================ */

/* ── Reduced motion override ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Scroll Reveal ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.65s ease, transform 0.65s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.19s; }
.stagger > *:nth-child(4) { transition-delay: 0.26s; }
.stagger > *:nth-child(5) { transition-delay: 0.33s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }
.stagger > *:nth-child(7) { transition-delay: 0.47s; }
.stagger > *:nth-child(8) { transition-delay: 0.54s; }

/* ── Page Load Animations ────────────────────────────────── */

@keyframes lnx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lnx-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lnx-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lnx-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes lnx-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--brand-primary-glow); }
  50%       { box-shadow: 0 0 40px var(--brand-primary-glow), 0 0 60px var(--brand-secondary-glow); }
}

@keyframes lnx-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes lnx-counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Animation utility classes */
.animate-fade-in  { animation: lnx-fade-in  0.8s ease forwards; }
.animate-slide-up { animation: lnx-slide-up 0.85s cubic-bezier(0.16, 0.8, 0.31, 1) forwards; }
.animate-float    { animation: lnx-float 4s ease-in-out infinite; }
.animate-pulse-glow { animation: lnx-pulse-glow 3s ease-in-out infinite; }

/* Delay helpers */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ── Hover Micro-interactions ────────────────────────────── */

.hover-lift {
  transition: transform var(--duration-normal, 340ms) var(--ease-smooth, cubic-bezier(0.4,0,0.2,1));
}
.hover-lift:hover { transform: translateY(-4px); }

.hover-glow {
  transition: box-shadow var(--duration-normal, 340ms) ease;
}
.hover-glow:hover {
  box-shadow: 0 0 32px var(--brand-primary-glow, rgba(147,51,204,0.22));
}

/* ── Gradient Mesh Background ────────────────────────────── */

.bg-mesh {
  background-color: var(--surface-page, #F8F7FF);
  background-image:
    radial-gradient(ellipse 70% 50% at 12% 28%, rgba(75, 110, 245, 0.10) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 88% 12%, rgba(147, 51, 204, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 55% 88%, rgba(107, 94, 232, 0.07) 0%, transparent 50%);
  /* fixed = gradient stays pinned to viewport as you scroll,
     so every section sees the same ambient light - not just the top */
  background-attachment: fixed;
}

/* ── Progress Bar Shimmer ────────────────────────────────── */

.bar-fill {
  height: 6px;
  border-radius: 999px;
  background: var(--brand-gradient);
  background-size: 200% auto;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}