/* Precursor Signal — micro-interactions
   Motion is quick and mechanical, per the design system: 120ms press,
   180ms colour/shadow, 280ms for larger moves. No bounce, no elastic.
   The Signal Green glow is the one flourish. Every rule below is tied to a
   state change the user caused — nothing animates for decoration alone. */

/* ---------- controls: a small mechanical nudge, never a bounce ---------- */
.btn, button, .rt-more, .sa-card, .az-panel, .tier, .feature, .r-card {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.btn:active, button:active { transform: translateY(0.5px) scale(0.995); }
.btn-primary:hover { box-shadow: var(--glow-signal); }
.btn-primary:active { box-shadow: var(--glow-signal-strong); }

/* CTA arrow slides on hover — signals "this goes somewhere" */
.hero-cta .cta-ic, .btn svg { transition: transform var(--dur-base) var(--ease-out); }
.hero-cta:hover .cta-ic { transform: translateX(3px); }

/* ---------- nav: underline sweeps in from the left ---------- */
nav.primary a {
  background-image: linear-gradient(var(--signal-dark), var(--signal-dark));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-standard);
  padding-bottom: 3px;
}
nav.primary a:hover, nav.primary a:focus-visible { background-size: 100% 2px; color: var(--ink); }

/* ---------- header: condenses and gains a seam once you scroll ---------- */
header.site { transition: box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard); }
header.site.is-scrolled { box-shadow: 0 10px 30px -18px rgba(27,34,56,0.40), 0 1px 0 rgba(27,34,56,0.06); }

/* ---------- cards: lift toward the reader ---------- */
.az-panel:hover, .feature:hover, .r-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong); }
.tier:hover { transform: translateY(-3px); box-shadow: var(--glow-signal); }

/* ---------- links: underline grows rather than blinking on ---------- */
.newsletter-content a, .legal-page a, .az-note a, .footer-legal a {
  text-decoration: none; background-image: linear-gradient(var(--signal-dark), var(--signal-dark));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base);
}
.newsletter-content a:hover, .legal-page a:hover, .az-note a:hover, .footer-legal a:hover { background-size: 100% 1px; }

/* ---------- FAQ: the marker rotates instead of swapping glyphs ---------- */
.faq-list summary { transition: color var(--dur-base) var(--ease-standard); cursor: pointer; }
.faq-list summary::after { transition: transform var(--dur-base) var(--ease-out); display: inline-block; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details { transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.faq-list details[open] { background: rgba(124,217,107,0.05); }
.faq-list details > *:not(summary) { animation: faqOpen var(--dur-slow) var(--ease-out); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- marquee: pauses so you can actually read a signal type ---------- */
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { transition: opacity var(--dur-base) var(--ease-standard), color var(--dur-base); }
.marquee:hover .marquee-track span:not(.dim) { color: var(--signal-dark); }

/* ---------- tables: row tracking ---------- */
.az-table tbody tr, .signals-table tbody tr { transition: background var(--dur-base) var(--ease-standard); }

/* ---------- inputs: green focus ring, no jump ---------- */
input, textarea, select {
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base);
}
input:focus, textarea:focus, select:focus { box-shadow: var(--glow-focus); }

/* ---------- focus: visible, green, consistent ---------- */
:focus-visible { outline: 2px solid var(--signal-dark); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- route change: the incoming page settles in ----------
   Transform only, with fill both. An earlier version animated opacity from 0;
   when the element was still display:none as the class landed, the animation
   never started and the whole routed page stayed stranded at opacity 0. A
   decorative transition must never be able to hide content. */
.route-enter { animation: routeIn var(--dur-slow) var(--ease-out) both; }
@keyframes routeIn { from { transform: translateY(8px); } to { transform: none; } }
/* belt and braces: routed page containers are always fully opaque */
[id^="page-"] { opacity: 1 !important; }

/* ---------- sourced numbers: tick up once, when they scroll into view ---------- */
.counting { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .btn, button, .sa-card, .az-panel, .tier, .feature, .r-card,
  nav.primary a::after, .hero-cta .cta-ic, header.site,
  .faq-list details > *:not(summary), .route-enter { transition: none !important; animation: none !important; }
  .az-panel:hover, .feature:hover, .r-card:hover, .tier:hover { transform: none; }
}