/* ==========================================
   ANIMATIONS: Scroll Reveals, Keyframes
   ========================================== */

/* ---- SCROLL REVEAL BASE ---- */

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

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Directional variants */
.reveal--left {
  transform: translateX(-30px) translateY(0);
}

.reveal--left.revealed {
  transform: none;
}

.reveal--right {
  transform: translateX(30px) translateY(0);
}

.reveal--right.revealed {
  transform: none;
}

.reveal--scale {
  transform: scale(0.95);
  opacity: 0;
}

.reveal--scale.revealed {
  transform: scale(1);
  opacity: 1;
}

/* Stagger delays */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }
.reveal--delay-6 { transition-delay: 600ms; }


/* ---- HERO ENTRANCE (CSS-only, on page load) ---- */

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

.hero-animate {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
}

.hero-animate--delay-1 { animation-delay: 100ms; }
.hero-animate--delay-2 { animation-delay: 200ms; }
.hero-animate--delay-3 { animation-delay: 300ms; }
.hero-animate--delay-4 { animation-delay: 400ms; }


/* ---- FLOAT ANIMATION (Hero screenshot) ---- */

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

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


/* ---- GOLD LINE GROW (Value pillars) ---- */

@keyframes lineGrow {
  from { width: 0; }
  to { width: 40px; }
}

.line-grow {
  width: 0;
}

.line-grow.revealed {
  animation: lineGrow 0.5s ease forwards;
}


/* ---- CHART BAR ENTRANCE ---- */

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.hero-animate.hero-animate--delay-2 .chart-bar {
  transform-origin: bottom;
  animation: barGrow 0.6s ease forwards;
  animation-delay: calc(0.8s + var(--bar-delay, 0s));
  transform: scaleY(0);
}

.chart-bar--1 { --bar-delay: 0s; }
.chart-bar--2 { --bar-delay: 0.08s; }
.chart-bar--3 { --bar-delay: 0.16s; }
.chart-bar--4 { --bar-delay: 0.24s; }
.chart-bar--5 { --bar-delay: 0.32s; }
.chart-bar--6 { --bar-delay: 0.4s; }
.chart-bar--7 { --bar-delay: 0.48s; }


/* ---- METRIC CARD FADE IN ---- */

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

.screenshot-metric-card {
  opacity: 0;
  animation: metricFadeIn 0.5s ease forwards;
}

.screenshot-metric-card:nth-child(1) { animation-delay: 0.6s; }
.screenshot-metric-card:nth-child(2) { animation-delay: 0.75s; }
.screenshot-metric-card:nth-child(3) { animation-delay: 0.9s; }


/* ---- SHIMMER EFFECT (for premium elements) ---- */

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


/* ---- REDUCED MOTION ---- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

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

  .hero-animate {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .float-animation {
    animation: none;
  }

  .line-grow {
    width: 40px;
    animation: none;
  }

  .hero::before,
  .hero::after,
  .section--dark-testimonials::before,
  .section--dark-testimonials::after,
  .section--cta::before {
    animation: none;
  }

  .hero-glow {
    animation: none;
  }

  .chart-bar {
    transform: scaleY(1) !important;
    animation: none !important;
  }

  .screenshot-metric-card {
    opacity: 1;
    animation: none;
  }

  .logo-marquee-row {
    animation: none;
  }

  .hero-canvas {
    display: none;
  }
}