/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — Dubai Flea Market Intelligence v2
   All keyframes and scroll-triggered animation utilities.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════ */

/* Live pulse ring on green dot */
@keyframes radialPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  60%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Hero aurora drift */
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(2%, 1%) scale(1.03); }
  66%  { transform: translate(-1%, 2%) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Fade + slide up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade + slide left (from right) */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade + slide right (from left) */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Simple fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Toast cross-fade */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Terminal cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Shimmer sweep for btn-primary */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Slow spin for scanning state */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Counter number tick */
@keyframes countUp {
  from { transform: translateY(4px); opacity: 0.4; }
  to   { transform: translateY(0);   opacity: 1; }
}


/* ══════════════════════════════════════════════
   ENTRANCE ANIMATION UTILITIES
   Triggered by IntersectionObserver adding .visible
   ══════════════════════════════════════════════ */

/* Base state: hidden */
.anim-up,
.anim-left,
.anim-right,
.anim-scale,
.anim-fade {
  opacity: 0;
  will-change: opacity, transform;
}

.anim-up    { transform: translateY(24px); }
.anim-left  { transform: translateX(30px); }
.anim-right { transform: translateX(-30px); }
.anim-scale { transform: scale(0.93); }
.anim-fade  { /* opacity only */ }

/* Revealed state */
.anim-up.visible,
.anim-left.visible,
.anim-right.visible,
.anim-scale.visible,
.anim-fade.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger delays for groups */
.stagger > *:nth-child(1)  { --i: 0; }
.stagger > *:nth-child(2)  { --i: 1; }
.stagger > *:nth-child(3)  { --i: 2; }
.stagger > *:nth-child(4)  { --i: 3; }
.stagger > *:nth-child(5)  { --i: 4; }
.stagger > *:nth-child(6)  { --i: 5; }

.stagger > *.visible {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Inline delay helpers (used on individual elements) */
.delay-1 { transition-delay: 70ms !important; }
.delay-2 { transition-delay: 140ms !important; }
.delay-3 { transition-delay: 210ms !important; }
.delay-4 { transition-delay: 280ms !important; }
.delay-5 { transition-delay: 350ms !important; }
.delay-6 { transition-delay: 420ms !important; }

/* Legacy reveal classes (used in the render loop / JS) */
.reveal        { opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.reveal-left   { opacity: 0; transform: translateX(-28px); transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.reveal-right  { opacity: 0; transform: translateX(28px);  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale  { opacity: 0; transform: scale(0.94);       transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }

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

/* Stagger for legacy .reveal pattern */
.stagger-1 { transition-delay: 70ms; }
.stagger-2 { transition-delay: 140ms; }
.stagger-3 { transition-delay: 210ms; }
.stagger-4 { transition-delay: 280ms; }
.stagger-5 { transition-delay: 350ms; }

/* Feature reveal (JS adds .feature-reveal-active) */
.feature-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--feature-reveal-delay, 0ms);
}

.feature-reveal.feature-reveal-active {
  opacity: 1;
  transform: none;
}


/* ══════════════════════════════════════════════
   HERO LOAD ANIMATIONS (auto-play on page load)
   ══════════════════════════════════════════════ */

.animate-fade-up {
  animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger delays for hero */
.animate-fade-up.stagger-1 { animation-delay: 80ms; }
.animate-fade-up.stagger-2 { animation-delay: 160ms; }
.animate-fade-up.stagger-3 { animation-delay: 240ms; }
.animate-fade-up.stagger-4 { animation-delay: 320ms; }
.animate-fade-up.stagger-5 { animation-delay: 400ms; }


/* ══════════════════════════════════════════════
   TERMINAL LINE ANIMATIONS
   JS adds .tl-visible per line via setTimeout
   ══════════════════════════════════════════════ */

.terminal-line {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.terminal-line.tl-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Terminal cursor blink */
.terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #4ade80;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: blink 1s step-end infinite;
}


/* ══════════════════════════════════════════════
   HERO TOAST STATES
   JS toggles .active between the 3 states
   ══════════════════════════════════════════════ */

.hero-toast-state {
  display: none;
  animation: toastIn 0.25s ease both;
}

.hero-toast-state.active {
  display: flex;
}


/* ══════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════ */

@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;
  }

  .anim-up, .anim-left, .anim-right, .anim-scale, .anim-fade,
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .feature-reveal, .animate-fade-up, .terminal-line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-toast-state { display: none; }
  .hero-toast-state.active { display: flex; }
}

@keyframes body-reveal {
  to { opacity: 1; }
}