/* page-motion.css
   Calm motion and line icons for Features, FAQ, Troubleshooting, Research and Legal.
   Built from the approved mock-up (spec, 11 Oct 2026, decision sheet 29a).

   The rules, from the Ken calm rule: nothing bounces, spins, loops or overshoots;
   every move is short (the gold underline on Legal takes 1.8s to settle and never
   repeats); and "reduce motion" turns the lot off.

   How it hides things safely: /page-motion.js adds "m-ready" to <html> ONLY when
   the visitor has not asked for reduced motion and the browser can watch the
   scroll. Nothing below hides anything without that class, so with scripts off, or
   with reduce motion on, every word and every icon is simply there. */

:root { --m-ease: cubic-bezier(.2,.7,.2,1); }

/* 1. Things rise gently into place as they come into view, once, in reading order. */
@media screen {
html.m-ready[data-m-page="features"] :is(.jstep-card, #hcps .acc-card, #hcps .mock, .pillar, .pricing-card, .pricing-card .check, .section-intro, figure):not(.m-in),
html.m-ready[data-m-page="faq"] :is(.group, .q, .still-stuck):not(.m-in),
html.m-ready[data-m-page="troubleshooting"] :is(.toc-inner a, .group, .q, .still-stuck):not(.m-in),
html.m-ready[data-m-page="research"] :is(.section, .ref-list > *):not(.m-in),
html.m-ready[data-m-page="legal"] :is(.in-short, .legal-body > p, .legal-body > ul, .contact-block):not(.m-in) {
  opacity: 0;
  transform: translateY(12px);
}
}
html.m-ready .m-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--m-ease), transform .5s var(--m-ease);
  transition-delay: calc(var(--m-i, 0) * 80ms);
}

/* 2. Features, Compare: the Ken's ticks appear one after another. */
@media screen { html.m-ready table.compare td.ken svg:not(.m-in) { opacity: 0; transform: scale(.6); } }
html.m-ready table.compare td.ken svg.m-in {
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--m-ease), transform .35s var(--m-ease);
  transition-delay: calc(var(--m-i, 0) * 90ms);
}

/* 3. Features, How it works: a thin gold line joins 01, 02 and 03 as you read down. */
html.m-ready .jsteps { position: relative; }
html.m-ready .jsteps::before {
  content: ""; position: absolute; left: 1.05rem; top: 2.6rem; bottom: 2.2rem; width: 1px;
  background: var(--gold-line, #9A7B4F); transform-origin: top; transform: scaleY(var(--m-p, 0)); opacity: .55;
}
@media screen { html.m-ready .jstep-card .n { opacity: .35; }}
html.m-ready .jstep-card .n { transition: opacity .4s var(--m-ease); position: relative; background: var(--cream); }
html.m-ready .jstep-card.m-lit .n { opacity: 1; }

/* 4. Legal: the heading you jumped to is underlined in gold for a moment. */
html.m-ready .m-flash {
  background-image: linear-gradient(var(--gold-line, #9A7B4F), var(--gold-line, #9A7B4F));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  animation: m-sweep 1.8s var(--m-ease) forwards;
}
@keyframes m-sweep {
  0% { background-size: 0 2px; }
  35% { background-size: 100% 2px; }
  75% { background-size: 100% 2px; opacity: 1; }
  100% { background-size: 100% 2px; background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  html .m-in, html .m-ic, html .jstep-card .n { opacity: 1 !important; transform: none !important; transition: none !important; }
  html .jsteps::before { display: none; }
  html .m-flash { animation: none !important; background-image: none !important; }
  /* These pages switch their own fade-ins off for reduce motion but leave the
     starting state at invisible, so the words never appear. Show them. */
  html[data-m-page="faq"] :is(.hero-headline, .hero-divider, .hero-sub),
  html[data-m-page="troubleshooting"] :is(.hero-headline, .hero-divider, .hero-sub),
  html[data-m-page="research"] .section { opacity: 1; transform: none; }
}

/* Line icons: the homepage's own pattern (a gold line icon in a soft gold circle,
   as on Simplicity, Dignity and Autonomy), carried onto the five pages. They are
   in the page's own markup, so nothing shifts when they appear. */
.m-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(154,123,79,0.12); color: #7A5F38; vertical-align: middle; }
.m-ic svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.m-ic.sm { width: 30px; height: 30px; }
.m-ic.sm svg { width: 16px; height: 16px; }
.m-ic.lg { width: 52px; height: 52px; }
.m-ic.lg svg { width: 26px; height: 26px; }
.m-ic.flat { background: none; width: auto; height: auto; }
.m-row { display: flex !important; align-items: center; gap: 14px; }
@media screen { html.m-ready .m-ic:not(.m-on) { opacity: 0; transform: scale(0.82); } }
html.m-ready .m-ic.m-on { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(0.16,1,0.3,1); }
@media (max-width: 480px) {
  .m-ic { width: 32px; height: 32px; }
  .m-ic svg { width: 17px; height: 17px; }
  .m-ic.lg { width: 40px; height: 40px; }
  .m-ic.lg svg { width: 20px; height: 20px; }
  details.fsec > summary .m-ic { margin-right: 10px; }
  .m-row { gap: 10px; }
}
/* Features: icon left of each section title */
details.fsec > summary .m-ic { margin-right: 16px; }
/* Steps in How it works: icon beside the step title */
.m-step-ic { margin-right: 10px; }
/* FAQ and Troubleshooting contact rows */
.contact-rows .row .label.m-row { gap: 6px; }
.m-ic.flat.tiny { width: 16px; height: 16px; }
.m-ic.flat.tiny svg { width: 15px; height: 15px; }
.group-label.m-row { gap: 10px; }
/* Troubleshooting contents chips */
.toc-inner a .m-ic { margin-right: 8px; background: none; width: 18px; height: 18px; }
.toc-inner a .m-ic svg { width: 18px; height: 18px; }
.toc-inner a { display: inline-flex !important; align-items: center; }
/* Research: the build line gets a small tool mark */
.m-ic.m-inline { display: inline-flex; width: 24px; height: 24px; margin-right: 8px; vertical-align: -6px; }
.m-ic.m-inline svg { width: 14px; height: 14px; }
/* Legal: contents chips and In short ticks */
.legal-toc a { display: inline-flex !important; align-items: center; gap: 8px; }
.legal-toc a .m-ic { width: 20px; height: 20px; background: none; }
.legal-toc a .m-ic svg { width: 18px; height: 18px; }
.in-short li > a { display: flex !important; gap: 10px; align-items: flex-start; }
/* A tick marks only what the reader gets; an obligation or exclusion carries a neutral arrow into its section (design review 4 Nov 2026, finding 25). */
.in-short li .m-ic { width: 22px; height: 22px; margin-top: 2px; background: rgba(154,123,79,0.14); color: var(--ink); }
.in-short li .m-ic svg { width: 14px; height: 14px; stroke-width: 2.4; }
.in-short ul { list-style: none; padding-left: 0; }

/* Design review (4 Nov 2026, finding 22, U-069): a section title outweighs the step titles (22px) under it at every width, and keeps its icon. On a phone the icon plate is 32px and the title is 26px, 24px under 360px. */
@media (max-width: 480px) {
  details.fsec > summary { gap: 12px; }
  details.fsec > summary .m-ic { margin-right: 0; }
  details.fsec > summary .fsec-title { font-size: 26px !important; }
}
@media (max-width: 359px) {
  details.fsec > summary .fsec-title { font-size: 24px !important; }
}
/* Legal "in short" lists: the link icon lines up with the first line of its text, and the list sits flush with the panel edge. */
.legal-panel .in-short li > a { align-items: flex-start; }
.legal-panel .in-short ul { padding-left: 0; }
/* A heading with an icon beside it breaks into balanced lines. */
h2.m-row { text-wrap: balance; }

/* Re-check (11 Oct 2026): every h3 and accordion title breaks into balanced lines. */
h3, details.fsec .fsec-title { text-wrap: balance; }