/*
 * SNSYS funnel shared chrome — components present on every funnel page.
 *
 * Required: import shared/tokens.css before this file.
 *
 * Components:
 *   - body::before          paper-grain noise overlay
 *   - .lp-sales-phone       fixed top-right sales phone link
 *   - .flow-strip           3-stop Build/Activate/Done indicator
 *   - .lp-footer-min        minimal footer (legal links + copyright)
 *
 * Last touched: 2026-04-28 (Voice funnel cohesive redesign).
 */

/* ---------- Paper-grain noise overlay ---------- */

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--z-noise);
}

/* ---------- Fixed sales phone (top-right) ---------- */

.lp-sales-phone {
  position: fixed;
  top: 0;
  right: 3rem;
  z-index: var(--z-sales-phone);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: calc(72px + 3rem);
  padding: 0;
  color: var(--spoke-1);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.lp-sales-phone:hover { opacity: 0.8; }
.lp-sales-phone svg {
  width: 20px; height: 20px;
  stroke: var(--spoke-1);
  stroke-width: 2;
  fill: none;
}
.lp-sales-phone-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.3rem;
}

@media (max-width: 480px) {
  .lp-sales-phone {
    right: 1.5rem;
    font-size: 0.9rem;
    height: calc(56px + 2rem);
  }
  .lp-sales-phone-label { display: none; }
}

/* ---------- 3-stop flow strip ---------- */

.flow-strip-mount { position: relative; z-index: var(--z-flow-strip); }

.flow-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1rem 1.5rem 0.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.flow-strip-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 90px;
}

.flow-strip-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}

.flow-strip-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
}

.flow-strip-track {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-strong);
  margin: 0 0.5rem;
  position: relative;
  top: -10px;  /* center on the dots */
  min-width: 24px;
  max-width: 80px;
  transition: background 0.4s;
}

/* Stage state: completed — solid cyan fill with the number kept visible
   in white so the strip reads as "this stage is done" at a glance. */
.flow-strip-stop.completed .flow-strip-dot {
  background: var(--spoke-1);
  border-color: var(--spoke-1);
  color: #fff;
}
.flow-strip-stop.completed .flow-strip-label { color: var(--text); }
.flow-strip-stop.completed + .flow-strip-track { background: var(--spoke-1); }

/* Stage state: current */
.flow-strip-stop.current .flow-strip-dot {
  background: var(--spoke-1-glow);
  border-color: var(--spoke-1);
  color: var(--spoke-1);
  box-shadow: 0 0 0 4px rgba(0,180,216,0.10);
  animation: flow-pulse 2s ease-in-out infinite;
}
.flow-strip-stop.current .flow-strip-label { color: var(--spoke-1); }

@keyframes flow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,180,216,0.10); }
  50%      { box-shadow: 0 0 0 8px rgba(0,180,216,0.04); }
}

/* Stage state: future (default) — already styled above by base rules */

@media (max-width: 480px) {
  .flow-strip { padding: 0.75rem 1rem 0.25rem; gap: 0; }
  .flow-strip-stop { min-width: 60px; }
  .flow-strip-dot { width: 24px; height: 24px; font-size: 0.62rem; }
  .flow-strip-label { font-size: 0.55rem; letter-spacing: 0.12em; }
  .flow-strip-track { max-width: 40px; min-width: 16px; }
}

/* ---------- Minimal footer ---------- */

.lp-footer-min {
  text-align: center;
  padding: 2rem 1.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.lp-footer-min a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.lp-footer-min a:hover { color: var(--spoke-1); }

.lp-footer-min .sep {
  margin: 0 0.55rem;
  opacity: 0.5;
}

/* ---------- Step eyebrows (Step 01 / Step 02 framing) ---------- */

.step-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}
.step-eyebrow .step-num {
  color: var(--spoke-1);
  font-weight: 700;
  font-feature-settings: "tnum";
}
.step-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: var(--spoke-1);
  align-self: center;
  opacity: 0.6;
}

/* ---------- Stagger reveal (used by /activate/ when content loads) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
}

.state-content.active .reveal,
.reveal.is-revealed,
.reveal-now {
  animation: funnel-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes funnel-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Scroll-triggered reveals ---------- */
/*
 * Observed by /shared/funnel.js (IntersectionObserver). Elements stay in
 * the pre-reveal state (opacity 0, translateY 16px) until scrolled into
 * the viewport, at which point .is-visible flips on and the rise animation
 * runs once. Honors prefers-reduced-motion: in that case, elements render
 * visible immediately with no animation.
 *
 * Mark sections you want to scroll-reveal with `class="scroll-reveal"`.
 * funnel.js also auto-targets common funnel-page section classes so the
 * 22 vertical try-ai clones get this behavior without per-file markup.
 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--scroll-i, 0) * 80ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ---------- Hero entrance stagger (above-the-fold motion on page load) ---------- */
/*
 * Animates the hero content in immediately when the page loads. Selector-based
 * so the canonical /lp/try-ai/ + 22 vertical clones all get this without
 * per-file class additions. The form widget on the right slides in slightly
 * later as a punctuation. Honors prefers-reduced-motion.
 */
.lp-hero-content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.lp-hero-content > *:nth-child(1) { animation-delay: 0ms; }
.lp-hero-content > *:nth-child(2) { animation-delay: 90ms; }
.lp-hero-content > *:nth-child(3) { animation-delay: 180ms; }
.lp-hero-content > *:nth-child(4) { animation-delay: 270ms; }
.lp-hero-content > *:nth-child(5) { animation-delay: 360ms; }
.lp-hero-content > *:nth-child(n+6) { animation-delay: 420ms; }

.lp-hero-widget {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 250ms forwards;
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-content > *,
  .lp-hero-widget {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* In instant/sample modes the hero swaps content; suppress the hero stagger
   so the mode-specific entrance animations (already defined per-page) win. */
.instant-mode .lp-hero-content > *,
.instant-mode .lp-hero-widget,
.sample-mode .lp-hero-content > *,
.sample-mode .lp-hero-widget {
  opacity: 1;
  transform: none;
  animation: none;
}