/* ==========================================================================
   site-motion.css — Shared motion layer for non-homepage marketing pages.

   Pairs with website/js/site-motion.js (GSAP + ScrollTrigger driven).

   Design rules followed (see DESIGN.md):
   - transform / opacity / clip-path / mask only — no layout-driving props
   - ease-out-expo / -quart curves; no bounce, no elastic
   - One colored shadow — brand-blue CTA glow stays the only one
   - Default state is VISIBLE; hidden state gated on html.is-animating
   - prefers-reduced-motion: instant transitions, default visible
   ========================================================================== */

:root {
  --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-duration-fast: 160ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 700ms;
  --motion-blue: #3D4BCA;
  --motion-blue-soft: rgba(61, 75, 202, 0.18);
}

/* ===== REVEAL — visible by default, hidden only when JS opts in ===== */

[data-reveal] {
  opacity: 1;
  transform: none;
}

html.is-animating [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--motion-ease-out-expo),
    transform 0.7s var(--motion-ease-out-expo);
}

html.is-animating [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--motion-ease-out-expo),
    transform 0.7s var(--motion-ease-out-expo);
}

/* ===== STAGGER — child items animate in with a small delay ramp ===== */

[data-stagger] > * {
  opacity: 1;
  transform: none;
}

html.is-animating [data-stagger]:not(.is-visible) > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s var(--motion-ease-out-expo),
    transform 0.55s var(--motion-ease-out-expo);
}

html.is-animating [data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s var(--motion-ease-out-expo),
    transform 0.55s var(--motion-ease-out-expo);
}

html.is-animating [data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0s; }
html.is-animating [data-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.06s; }
html.is-animating [data-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.12s; }
html.is-animating [data-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.18s; }
html.is-animating [data-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.24s; }
html.is-animating [data-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.30s; }
html.is-animating [data-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.36s; }
html.is-animating [data-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.42s; }
html.is-animating [data-stagger].is-visible > *:nth-child(9)  { transition-delay: 0.48s; }
html.is-animating [data-stagger].is-visible > *:nth-child(10) { transition-delay: 0.54s; }

/* ===== MARQUEE — logo cloud / integration strip =====
   CSS-only, infinite linear scroll. JS doubles the track for seamless loop.
   Pauses on hover; fades edges via mask so the loop point isn't visible.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap, 28px);
  padding-right: var(--marquee-gap, 28px);
  will-change: transform;
  animation: marquee-scroll var(--marquee-duration, 42s) linear infinite;
}

.marquee[data-direction="right"] .marquee-track {
  animation-direction: reverse;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-row {
  display: flex;
  gap: var(--marquee-gap, 28px);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reusable pill used inside the marquee.
   Adopts the existing pricing/integration look. */
.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--bg-2, #FFFFFF);
  border: 1px solid var(--line, rgba(18, 27, 72, 0.08));
  color: var(--ink, #121B48);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out-quart),
              border-color var(--motion-duration-base) var(--motion-ease-out-quart);
}

.marquee-pill:hover {
  transform: translateY(-1px);
  border-color: var(--line-2, rgba(18, 27, 72, 0.14));
}

.marquee-pill img,
.marquee-pill svg {
  height: 20px;
  width: auto;
}

/* ===== WORKFLOW BEAM — SVG path drawing through a step sequence =====
   Used inline by JS via stroke-dasharray / stroke-dashoffset on scroll.
   ========================================================================== */

.workflow-beam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.workflow-beam-path {
  fill: none;
  stroke: var(--motion-blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.workflow-beam-glow {
  fill: none;
  stroke: var(--motion-blue);
  stroke-width: 6;
  stroke-linecap: round;
  filter: blur(8px);
  opacity: 0.18;
}

/* Node dot that the beam connects */
.workflow-node {
  position: relative;
  z-index: 1;
}

/* ===== FAQ ACCORDION POLISH =====
   <details> stays native (no JS height animation), but we polish:
   - chevron rotation
   - content fade-in
   - hover state on summary
   ========================================================================== */

.faq-item summary {
  cursor: pointer;
  list-style: none;
  transition: color var(--motion-duration-base) var(--motion-ease-out-quart);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--blue, #3D4BCA); }

.faq-item .faq-chevron {
  display: inline-block;
  transition: transform var(--motion-duration-base) var(--motion-ease-out-quart);
  will-change: transform;
}

.faq-item[open] .faq-chevron {
  transform: rotate(45deg);
}

.faq-item[open] .faq-answer {
  animation: faqAnswerIn 320ms var(--motion-ease-out-expo) both;
}

@keyframes faqAnswerIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== CARD / TIER HOVER LIFT =====
   Applied via .motion-lift class on any card-like surface that
   should respond to hover. Single source of truth for the lift effect.
   ========================================================================== */

.motion-lift {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-out-quart),
    box-shadow var(--motion-duration-base) var(--motion-ease-out-quart),
    border-color var(--motion-duration-base) var(--motion-ease-out-quart);
  will-change: transform;
}

.motion-lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(18, 27, 72, 0.04),
    0 18px 44px rgba(18, 27, 72, 0.09);
}

/* ===== CTA — primary button arrow nudge on hover =====
   Adds a subtle right-slide to a trailing arrow inside a primary CTA.
   The brand-blue glow shadow on .btn-primary stays the only colored shadow.
   ========================================================================== */

.motion-cta .arrow,
.motion-cta::after {
  display: inline-block;
  transition: transform var(--motion-duration-base) var(--motion-ease-out-quart);
}

.motion-cta:hover .arrow,
.motion-cta:hover::after {
  transform: translateX(3px);
}

/* ===== COMPARE ROW — staggered slide-in (matches homepage pattern) ===== */

.compare-row,
[data-compare-row] {
  opacity: 1;
  transform: none;
}

html.is-animating .compare-row:not(.is-visible),
html.is-animating [data-compare-row]:not(.is-visible) {
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 0.5s var(--motion-ease-out-expo),
    transform 0.5s var(--motion-ease-out-expo);
}

html.is-animating .compare-row.is-visible,
html.is-animating [data-compare-row].is-visible {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.5s var(--motion-ease-out-expo),
    transform 0.5s var(--motion-ease-out-expo);
}

/* ===== NUMBER TICKER — tabular alignment so width doesn't jitter ===== */

.motion-ticker {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ===== REDUCED MOTION — instant transitions, visible default ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .workflow-beam-path,
  .workflow-beam-glow {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  [data-reveal],
  [data-stagger] > *,
  .compare-row,
  [data-compare-row] {
    opacity: 1 !important;
    transform: none !important;
  }
}