/* RFP Blitz "wow" moments: hero background, headline reveal, pipeline
   funnel, governance celebration. All final content renders immediately and
   correctly under prefers-reduced-motion -- only the reveal animation is
   skipped, per shared/motion.js's design rule. */

/* ---------- Landing hero ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.hero-bg {
  position: absolute; inset: -20%; z-index: 0; opacity: .5;
  background:
    radial-gradient(circle at 20% 30%, var(--color-primary) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, var(--color-primary-2) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, var(--color-primary) 0%, transparent 45%);
  filter: blur(60px);
  animation: hero-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 3%) scale(1.08); }
}
.hero-content { position: relative; z-index: 1; }
.hero-title { font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 var(--space-3); }
.hero-title .word { display: inline-block; opacity: 0; transform: translateY(10px); animation: word-in var(--dur-3) var(--ease-out) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero-sub { font-size: 15px; color: var(--color-muted); max-width: 60ch; margin-bottom: var(--space-5); }
.stat-strip { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.stat-strip .stat-strip__item { }
.stat-strip .stat-strip__value { font-size: 26px; font-weight: 800; font-family: var(--font-mono); color: var(--color-primary); }
.stat-strip .stat-strip__label { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Pipeline funnel diagram ---------- */
.funnel { width: 100%; overflow-x: auto; }
.funnel svg { display: block; min-width: 640px; }
.funnel-stage-label { font-size: 11px; fill: var(--color-muted); font-family: var(--font-sans); }
.funnel-stage-count { font-size: 18px; font-weight: 800; fill: var(--color-text); font-family: var(--font-mono); }
.funnel-node { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; }
.funnel-node--active { stroke: var(--color-primary); }
.funnel-flow {
  fill: none; stroke: var(--color-primary); stroke-width: 2; opacity: .55;
  stroke-dasharray: 6 6;
  animation: funnel-dash 1.4s linear infinite;
}
@keyframes funnel-dash { to { stroke-dashoffset: -24; } }

/* ---------- Governance celebration ---------- */
.celebrate-check { width: 56px; height: 56px; }
.celebrate-check circle { fill: none; stroke: var(--color-ok); stroke-width: 3; stroke-dasharray: 166; stroke-dashoffset: 166; animation: check-circle 500ms var(--ease-out) forwards; }
.celebrate-check path { fill: none; stroke: var(--color-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: check-mark 350ms var(--ease-out) 450ms forwards; }
@keyframes check-circle { to { stroke-dashoffset: 0; } }
@keyframes check-mark { to { stroke-dashoffset: 0; } }

.confetti-piece {
  position: absolute; width: 6px; height: 10px; top: 0; opacity: 0;
  animation: confetti-fall 900ms ease-out forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(90px) rotate(280deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none !important; }
  .hero-title .word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .funnel-flow { animation: none !important; stroke-dasharray: none !important; }
  .celebrate-check circle, .celebrate-check path { stroke-dashoffset: 0 !important; animation: none !important; }
  .confetti-piece { display: none !important; }
}