/* Findr v3 — animation + responsive fixes layered on top of mobile.css */

/* ---- Marvin hero responsive fix ---- */
@media (max-width: 860px) {
  /* Marvin hero grid: stack and shrink demo card */
  .marvin-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .marvin-hero-grid h1 {
    font-size: clamp(38px, 9vw, 52px) !important;
  }
  .marvin-hero-demo-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
  .marvin-hero-demo-wrap .marvin-live-demo {
    padding: 14px !important;
  }
  /* Marvin module grids: stack */
  .marvin-module-grid {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 32px !important;
  }
  /* Scoring viz: shrink padding & header */
  .scoring-viz .scoring-header {
    padding: 16px 16px 14px !important;
    gap: 12px !important;
  }
  .scoring-viz .scoring-body {
    padding: 16px 16px 4px !important;
  }
  .scoring-viz .scoring-rubric-grid {
    gap: 14px 16px !important;
  }
  .scoring-viz .scoring-footer {
    margin: 14px 12px 12px !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Sourcing/scheduling/handoff/guardrails/integrations on Marvin: smaller padding */
  .marvin-viz {
    padding: 18px !important;
  }
  /* Live demo cells */
  .marvin-live-demo .marvin-stage {
    padding: 10px !important;
  }
}

/* ---- Reveal animation utility ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Integration constellation lines ---- */
.intg-line {
  stroke: #5356FF;
  stroke-width: 1.5;
  fill: none;
  opacity: 0.35;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.intg-svg.in .intg-line {
  stroke-dashoffset: 0;
}
.intg-pulse {
  fill: #5356FF;
  opacity: 0;
}
.intg-svg.in .intg-pulse {
  animation: intgPulse 2.4s ease-in-out infinite;
}
@keyframes intgPulse {
  0% { opacity: 0; r: 2; }
  20% { opacity: 0.9; }
  100% { opacity: 0; r: 4; }
}

/* ---- Scoring bar fill on view ---- */
.score-bar-fill {
  width: 0 !important;
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scoring-viz.in .score-bar-fill {
  width: var(--target, 0%) !important;
}

/* ---- Counter ---- */
.counter-num {
  display: inline-block;
}

/* ---- Across-our-customers tile reveal stagger ---- */
.metric-tile {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.metrics-band.in .metric-tile {
  opacity: 1;
  transform: translateY(0);
}
.metrics-band.in .metric-tile:nth-child(1) { transition-delay: 0ms; }
.metrics-band.in .metric-tile:nth-child(2) { transition-delay: 110ms; }
.metrics-band.in .metric-tile:nth-child(3) { transition-delay: 220ms; }
.metrics-band.in .metric-tile:nth-child(4) { transition-delay: 330ms; }

.metrics-headline {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.metrics-band.in .metrics-headline {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Subtle ambient glow for metrics band ---- */
.metrics-band {
  position: relative;
  overflow: hidden;
}
.metrics-band::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(83,86,255,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.metrics-band.in::before {
  opacity: 1;
}

/* ---- Integration tiles staggered fade-in (driven by parent .intg-svg.in) ---- */
.intg-tile {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.intg-card.in .intg-tile {
  opacity: 1;
  transform: scale(1);
}
.intg-card.in .intg-tile:nth-child(1) { transition-delay: 0ms; }
.intg-card.in .intg-tile:nth-child(2) { transition-delay: 80ms; }
.intg-card.in .intg-tile:nth-child(3) { transition-delay: 160ms; }
.intg-card.in .intg-tile:nth-child(4) { transition-delay: 240ms; }
.intg-card.in .intg-tile:nth-child(5) { transition-delay: 320ms; }
.intg-card.in .intg-tile:nth-child(6) { transition-delay: 400ms; }
.intg-card.in .intg-tile:nth-child(7) { transition-delay: 480ms; }
.intg-card.in .intg-tile:nth-child(8) { transition-delay: 560ms; }

/* ---- Brand logo box (svg fits) ---- */
.brand-logo-box svg,
.brand-logo-box img {
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
}