/* ============================================================
   LAYER 6 — MOTION
   Restrained by design. Everything here is decorative and
   fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered children */
.reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.reveal-group.is-visible > *        { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

/* ── Hero: very slow drift on the background ── */
.hero-bg { animation: heroDrift 32s ease-in-out infinite alternate; }
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
}

/* ── Numbers that count up ── */
.stat-value { font-variant-numeric: tabular-nums; }

/* ── Process: the spine draws itself as you scroll ── */
.process-list { position: relative; }
.process-spine {
  position: absolute;
  left: 44px; top: 0;
  width: 1px;
  background: var(--gold);
  height: 0;
  opacity: 0.5;
  transition: height 0.15s linear;
}
.process-step-num { position: relative; z-index: 1; }
.process-step-dot {
  position: absolute; left: 40px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--cream);
  border: 1px solid var(--gold);
  transform: translateY(20px);
  transition: background 0.4s ease;
}
.process-step.is-reached .process-step-dot { background: var(--gold); }

/* ── Mindset diagram ── */
.chaos-dot { opacity: 0.3; }
.order-dot {
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1),
              opacity 0.7s ease;
}
.diagram.is-visible .order-dot { opacity: 1; }
.diagram-connector {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.4s ease 0.4s;
}
.diagram.is-visible .diagram-connector { stroke-dashoffset: 0; }
.diagram-label { opacity: 0; transition: opacity 0.6s ease 0.9s; }
.diagram.is-visible .diagram-label { opacity: 1; }

/* ── FAQ: animated open/close ── */
.faq-answer {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding-top: 0; padding-bottom: 0;
  transition: max-height 0.45s cubic-bezier(0.22,0.61,0.36,1),
              padding-bottom 0.45s ease, opacity 0.3s ease;
  opacity: 0;
}
.faq-item.open .faq-answer {
  max-height: 460px;
  padding-bottom: 28px;
  opacity: 1;
}

/* ── Link underline sweep ── */
.svc-link, .service-cta-link { position: relative; }

/* ── Card lift on the CTA panel only (it IS clickable) ── */
.service-cta { transition: background 0.35s ease; }
.service-cta:hover { background: var(--navy-mid); }

/* ── Respect the user ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-bg { animation: none !important; }
  .diagram .order-dot, .diagram-label { opacity: 1 !important; transform: none !important; }
  .diagram-connector { stroke-dashoffset: 0 !important; }
  .faq-answer { transition: none !important; }
  .process-spine { transition: none !important; }
}