/* Topic pages (business/corporate/expat/insurance/student/relocation/services):
   scroll-in reveals, drawn icons + checks, step line, soft FAQ — same language as glance.css.
   Every hidden start state is scoped under html.tm-on (set by topic-motion.js) — without JS all content shows. */

:root { --tm-spring: cubic-bezier(.34,1.35,.64,1); --tm-ease: cubic-bezier(.22,1,.36,1); }

/* ── reveal: cards, list rows, headings ─────────────────────────── */
html.tm-on .tm-rv {
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .6s ease var(--tm-d, 0s), transform .7s var(--tm-ease) var(--tm-d, 0s),
              translate .45s var(--tm-spring), box-shadow .3s ease, background-color .3s ease;
}
html.tm-on .tm-rv.in { opacity: 1; transform: none; }
html.tm-on .tm-h { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s var(--tm-ease); }
html.tm-on .tm-h.in { opacity: 1; transform: none; }
html.tm-on li.tm-rv, html.tm-on .amenity-item.tm-rv { transform: translateY(10px); }
html.tm-on li.tm-rv.in, html.tm-on .amenity-item.tm-rv.in { transform: none; }

/* cards get a hairline ring that turns sage on hover (no layout shift, no glow) */
html.tm-on .feature-card, html.tm-on .service-card, html.tm-on .who-card,
html.tm-on .neighborhood-card, html.tm-on .testimonial-card, html.tm-on .resource-link {
  box-shadow: 0 0 0 1px transparent, 0 1px 4px rgba(0,0,0,.06);
}
html.tm-on .feature-card, html.tm-on .service-card, html.tm-on .resource-link { box-shadow: 0 0 0 1px transparent; }

/* ── icons draw themselves (stroke SVGs, --tm-len = measured length, set by JS) ─── */
html.tm-on .tm-draw * { stroke-dasharray: var(--tm-len); stroke-dashoffset: var(--tm-len); transition: stroke-dashoffset 1s var(--tm-ease) calc(var(--tm-d, 0s) + .2s); }
html.tm-on .in .tm-draw * { stroke-dashoffset: 0; }
html.tm-on .feature-icon, html.tm-on .service-icon { transition: translate .45s var(--tm-spring), color .3s ease; }

/* ── filled check marks wipe in left→right, one after another ───── */
html.tm-on .glance-check, html.tm-on .benefits-check, html.tm-on .amenity-check,
html.tm-on .testimonial-stars {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s var(--tm-ease) calc(var(--tm-d, 0s) + .2s);
}
html.tm-on .in .glance-check, html.tm-on .in .benefits-check, html.tm-on .in .amenity-check,
html.tm-on .in .testimonial-stars { clip-path: inset(0 0 0 0); }
html.tm-on .testimonial-stars { transition-duration: .9s; }

/* ── counters ───────────────────────────────────────────────────── */
.tm-num { font-variant-numeric: tabular-nums; }

/* ── how it works: line draws through the circles, circles light up ─ */
html.tm-on .steps { position: relative; }
.tm-line { position: absolute; left: var(--tm-l, 0); top: var(--tm-t, 0); width: var(--tm-w, 0); height: 2px;
  background: #d5dbd7; border-radius: 1px; pointer-events: none; display: none; }
.tm-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--sage); border-radius: 1px;
  transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--tm-ease) .15s; }
.steps.tm-row .tm-line { display: block; }
.steps.in .tm-line i { transform: none; }
html.tm-on .step { position: relative; z-index: 1; }
html.tm-on .step-number {
  box-sizing: border-box; border: 2px solid var(--sage); background: var(--white); color: var(--sage-dark);
  transition: background .35s ease var(--tm-d, 0s), color .35s ease var(--tm-d, 0s), transform .45s var(--tm-spring);
}
html.tm-on .steps.in .step-number { background: var(--sage); color: var(--white); }

/* ── FAQ: height + opacity instead of a jump; plus turns into minus ─ */
html.tm-on .faq-answer { max-height: none !important; height: 0; opacity: 0;
  transition: height .42s var(--tm-ease), opacity .3s ease !important; }
html.tm-on .faq-item.open .faq-answer { height: auto; opacity: 1; }
html.tm-on .faq-answer.tm-anim { overflow: hidden; padding-bottom: 0 !important; }  /* open padding is part of the measured target height */
html.tm-on .faq-item.open .faq-toggle { transform: none; }  /* pages that rotated the + by 45° */
/* the "+" glyph stays in the DOM (same box, same text) but is painted by two bars */
html.tm-on .faq-toggle { position: relative; display: inline-block; flex-shrink: 0; color: transparent; transition: none; }
html.tm-on .faq-toggle::before, html.tm-on .faq-toggle::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: .5em; height: 2px; margin: -1px 0 0 -.25em; border-radius: 1px; background: var(--sage-dark);
  transition: transform .4s var(--tm-spring), opacity .3s ease; }
html.tm-on .faq-toggle::after { transform: rotate(90deg); }
html.tm-on .faq-item.open .faq-toggle::after { transform: rotate(180deg); opacity: 0; }
html.tm-on .faq-item.open .faq-toggle::before { transform: rotate(180deg); }
html.tm-on .faq-item { transition: border-color .3s ease; }
html.tm-on .faq-item.open { border-color: var(--sage); }

/* ── hover (mouse only) ─────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  html.tm-on .feature-card:hover, html.tm-on .service-card:hover, html.tm-on .resource-link:hover {
    translate: 0 -4px; box-shadow: 0 0 0 1px var(--sage); }
  html.tm-on .who-card:hover, html.tm-on .neighborhood-card:hover, html.tm-on .testimonial-card:hover {
    translate: 0 -4px; box-shadow: 0 0 0 1px var(--sage), 0 1px 4px rgba(0,0,0,.06); }
  html.tm-on .feature-card:hover .feature-icon, html.tm-on .service-card:hover .service-icon { translate: 0 -4px; color: var(--sage); }
  html.tm-on .resource-arrow { transition: translate .45s var(--tm-spring); }
  html.tm-on .resource-link:hover .resource-arrow { translate: 4px 0; }
  html.tm-on .step:hover .step-number { transform: scale(1.12); }
  html.tm-on .faq-question:hover .faq-toggle::before, html.tm-on .faq-question:hover .faq-toggle::after { background: var(--sage); }
}

/* ── reduced motion / print: everything static and visible ──────── */
@media (prefers-reduced-motion: reduce) {
  html.tm-on .tm-rv, html.tm-on .tm-h { opacity: 1 !important; transform: none !important; }
  html.tm-on .tm-rv, html.tm-on .tm-h, html.tm-on .tm-draw, html.tm-on .tm-draw *, html.tm-on .faq-answer, html.tm-on .faq-toggle::before,
  html.tm-on .faq-toggle::after, html.tm-on .step-number, html.tm-on .tm-line i, html.tm-on .glance-check, html.tm-on .benefits-check,
  html.tm-on .amenity-check, html.tm-on .testimonial-stars, html.tm-on .feature-icon, html.tm-on .service-icon,
  html.tm-on .resource-arrow, html.tm-on .faq-item { transition: none !important; }
  html.tm-on .tm-draw * { stroke-dashoffset: 0; }
  html.tm-on .glance-check, html.tm-on .benefits-check, html.tm-on .amenity-check, html.tm-on .testimonial-stars { clip-path: none; }
  html.tm-on .step-number { background: var(--sage); color: var(--white); }
  html.tm-on .tm-line i { transform: none; }
}
@media print {
  html.tm-on .tm-rv, html.tm-on .tm-h { opacity: 1 !important; transform: none !important; }
  html.tm-on .tm-draw * { stroke-dashoffset: 0; }
  html.tm-on .glance-check, html.tm-on .benefits-check, html.tm-on .amenity-check, html.tm-on .testimonial-stars { clip-path: none; }
}