/* ============================================================
   LOANS N STUFF — Animations & Scroll Reveal
   ============================================================ */

/* ── Scroll Reveal Base ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for child elements */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }

/* Slide in from left/right */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal (for the AI card) */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-spring);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Hero Entrance (runs on page load) ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-animate-1 {
  animation: fadeUp var(--duration-reveal) var(--ease-out) 0ms both;
}
.hero-animate-2 {
  animation: fadeUp var(--duration-reveal) var(--ease-out) 100ms both;
}
.hero-animate-3 {
  animation: fadeUp var(--duration-reveal) var(--ease-out) 200ms both;
}
.hero-animate-4 {
  animation: fadeUp var(--duration-reveal) var(--ease-out) 350ms both;
}
.hero-animate-5 {
  animation: fadeUp var(--duration-slow) var(--ease-out) 500ms both;
}

/* ── Glow Pulse (decorative accent) ── */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 40px 0px rgba(116,68,245,0.15);
  }
  50% {
    box-shadow: 0 0 70px 10px rgba(116,68,245,0.28);
  }
}

.glow-pulse {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ── Float (subtle logo or hero decoration) ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

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

/* ── Shimmer (loading skeleton-like, on placeholders) ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(116,68,245,0.06) 40%,
    transparent 80%
  );
  background-size: 400px 100%;
  animation: shimmer 2.5s infinite linear;
  border-radius: inherit;
}

/* ── Connector Arrow (workflow section) ── */
@keyframes arrowSlide {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3,
  .hero-animate-4,
  .hero-animate-5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .glow-pulse { animation: none; }
  .float { animation: none; }
  .shimmer::after { animation: none; }
}