/* Precursor Signal — motion for everything after the hero
   The hero carried the page and the rest sat still. Each section below gets
   motion drawn from what that section *means*, not a generic effect repeated:
   a bar chart should grow, a line chart should draw, a ledger should fill row
   by row, a locked gate should feel locked.
   Timings stay on the design system (120/180/280ms, no bounce); the Signal
   Green glow is the only flourish. Everything is off under reduced-motion. */

/* ============================================ ANALYTICS · bars grow from zero */
.az-bar-fill {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.85s var(--ease-out), filter var(--dur-base), box-shadow var(--dur-base);
}
.az-panel.cine-in .az-bar-fill, .az-panel.bars-in .az-bar-fill { transform: scaleX(1); }
/* each bar starts a beat after the one above, so the list reads top-down */
.az-barlist .az-bar-row:nth-child(1) .az-bar-fill { transition-delay: 0.04s; }
.az-barlist .az-bar-row:nth-child(2) .az-bar-fill { transition-delay: 0.09s; }
.az-barlist .az-bar-row:nth-child(3) .az-bar-fill { transition-delay: 0.14s; }
.az-barlist .az-bar-row:nth-child(4) .az-bar-fill { transition-delay: 0.19s; }
.az-barlist .az-bar-row:nth-child(5) .az-bar-fill { transition-delay: 0.24s; }
.az-barlist .az-bar-row:nth-child(6) .az-bar-fill { transition-delay: 0.29s; }
.az-barlist .az-bar-row:nth-child(7) .az-bar-fill { transition-delay: 0.34s; }
.az-barlist .az-bar-row:nth-child(8) .az-bar-fill { transition-delay: 0.39s; }
.az-barlist .az-bar-row:nth-child(n+9) .az-bar-fill { transition-delay: 0.44s; }
/* the value counts alongside its bar */
.az-bar-value { transition: color var(--dur-base) var(--ease-standard); }
.az-bar-row:hover .az-bar-value { color: var(--signal-dark); }

/* ==================================== ANALYTICS · line charts draw themselves */
.az-cadence-line, .az-eq-line {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.5s var(--ease-out);
}
.az-panel.cine-in .az-cadence-line, .az-panel.cine-in .az-eq-line,
.az-panel.chart-in .az-cadence-line, .az-panel.chart-in .az-eq-line { stroke-dashoffset: 0; }
.az-cadence-area { opacity: 0; transition: opacity 0.9s var(--ease-standard) 0.5s; }
.az-panel.cine-in .az-cadence-area, .az-panel.chart-in .az-cadence-area { opacity: 0.10; }
/* the end marker lands once the line reaches it */
.az-cadence-dot, .az-eq-dot { opacity: 0; transform: scale(0.4); transform-origin: center; transition: opacity 0.3s var(--ease-out) 1.25s, transform 0.4s var(--ease-out) 1.25s; }
.az-panel.cine-in .az-cadence-dot, .az-panel.cine-in .az-eq-dot,
.az-panel.chart-in .az-cadence-dot, .az-panel.chart-in .az-eq-dot { opacity: 1; transform: scale(1); }
.az-cadence-end-label { opacity: 0; transition: opacity 0.4s var(--ease-standard) 1.4s; }
.az-panel.cine-in .az-cadence-end-label, .az-panel.chart-in .az-cadence-end-label { opacity: 1; }

/* ================================== ANALYTICS + tables · the ledger fills in */
.recur-table tbody tr, .az-table tbody tr, .signals-table tbody tr {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), background var(--dur-base);
}
.recur-card.cine-in .recur-table tbody tr,
.az-panel.cine-in .az-table tbody tr,
.rows-in tbody tr { opacity: 1; transform: none; }
.recur-table tbody tr:nth-child(1) { transition-delay: 0.03s; }
.recur-table tbody tr:nth-child(2) { transition-delay: 0.06s; }
.recur-table tbody tr:nth-child(3) { transition-delay: 0.09s; }
.recur-table tbody tr:nth-child(4) { transition-delay: 0.12s; }
.recur-table tbody tr:nth-child(5) { transition-delay: 0.15s; }
.recur-table tbody tr:nth-child(6) { transition-delay: 0.18s; }
.recur-table tbody tr:nth-child(7) { transition-delay: 0.21s; }
.recur-table tbody tr:nth-child(n+8) { transition-delay: 0.24s; }
/* a green rule marks the row under the cursor */
.recur-table tbody tr td:first-child, .az-table tbody tr td:first-child { position: relative; }
.recur-table tbody tr:hover td:first-child::before,
.az-table tbody tr:hover td:first-child::before {
  content: ""; position: absolute; left: -0.55rem; top: 12%; bottom: 12%; width: 2px;
  background: var(--signal-dark); border-radius: 1px;
}

/* ============================================ ANALYTICS · KPI tiles land */
.trust-item { transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.trust-item:hover .num { color: var(--signal-dark); }
.trust-item .num { transition: color var(--dur-base) var(--ease-standard); }

/* ================================================== NEWSLETTER · the issue */
.newsletter-content h3 {
  position: relative; padding-left: 0.9rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.newsletter-content h3::before {
  content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px;
  background: var(--signal-dark); border-radius: 1px;
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.45s var(--ease-out) 0.15s;
}
.newsletter-content p { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.cine-in .newsletter-content h3, .newsletter-content.cine-in h3, .prose-in h3 { opacity: 1; transform: none; }
.cine-in .newsletter-content h3::before, .newsletter-content.cine-in h3::before, .prose-in h3::before { transform: scaleY(1); }
.cine-in .newsletter-content p, .newsletter-content.cine-in p, .prose-in p { opacity: 1; transform: none; }
.nl-rule { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--ease-out); }
.cine-in .nl-rule, .newsletter-content.cine-in .nl-rule, .prose-in .nl-rule { transform: scaleX(1); }

/* ============================================== LOGIN · the card assembles */
#page-login .login-card > * { opacity: 0; transform: translateY(10px); animation: loginRise 0.5s var(--ease-out) forwards; }
#page-login .login-card > *:nth-child(1) { animation-delay: 0.05s; }
#page-login .login-card > *:nth-child(2) { animation-delay: 0.11s; }
#page-login .login-card > *:nth-child(3) { animation-delay: 0.17s; }
#page-login .login-card > *:nth-child(4) { animation-delay: 0.23s; }
#page-login .login-card > *:nth-child(5) { animation-delay: 0.29s; }
#page-login .login-card > *:nth-child(6) { animation-delay: 0.35s; }
@keyframes loginRise { to { opacity: 1; transform: none; } }
#page-login .login-hero-line { animation: loginRise 0.65s var(--ease-out) 0.02s forwards; opacity: 0; transform: translateY(14px); }
#page-login .login-hero-sub { animation: loginRise 0.65s var(--ease-out) 0.12s forwards; opacity: 0; transform: translateY(14px); }
/* the input warms as you focus it */
.login-field input { transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base); }
.login-field input:focus { background: #FFFFFF; }

/* ======================================= PICK DETAIL · the gates cascade */
.gate-step { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.cine-in .gate-step, .gate-ladder.cine-in .gate-step, .gates-in .gate-step { opacity: 1; transform: none; }
.gate-ladder .gate-step:nth-child(1) { transition-delay: 0.06s; }
.gate-ladder .gate-step:nth-child(2) { transition-delay: 0.16s; }
.gate-ladder .gate-step:nth-child(3) { transition-delay: 0.26s; }
/* a passed gate pulses its glow once as it lands */
@keyframes gatePass { 0% { box-shadow: 0 0 0 0 rgba(124,217,107,0.55); } 100% { box-shadow: 0 0 0 12px rgba(124,217,107,0); } }
.cine-in .gate-step.passed .gate-dot, .gate-ladder.cine-in .gate-step.passed .gate-dot, .gates-in .gate-step.passed .gate-dot { animation: gatePass 1.1s var(--ease-out) 0.4s 1; }
/* the locked gate breathes very slightly — present, not nagging */
@keyframes lockedBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.42; } }
.gate-locked-body .gate-blur { animation: lockedBreathe 4.5s var(--ease-standard) infinite; }

/* ============================================ PRICING · the tier responds */
.tier ul li { opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.tiers.cine-in .tier ul li { opacity: 1; transform: none; }
.tier ul li:nth-child(1) { transition-delay: 0.18s; }
.tier ul li:nth-child(2) { transition-delay: 0.25s; }
.tier ul li:nth-child(3) { transition-delay: 0.32s; }
.tier ul li:nth-child(4) { transition-delay: 0.39s; }
.tier .btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), filter var(--dur-base); }
.tier:hover .btn { box-shadow: var(--glow-signal-strong); }

/* ===================================== LEGAL / PRODUCT · quiet prose rise */
.legal-body > *, .product-body > * { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.cine-in .legal-body > *, .legal-body.cine-in > *, .cine-in .product-body > *, .product-body.cine-in > *, .prose-in > * { opacity: 1; transform: none; }

/* ================================================= FOOTER · the close */
.footer-cta { transition: box-shadow var(--dur-base) var(--ease-standard); }
.footer-cta:hover { box-shadow: var(--glow-signal); }

@media (prefers-reduced-motion: reduce) {
  .az-bar-fill, .az-cadence-line, .az-eq-line, .az-cadence-area, .az-cadence-dot,
  .az-eq-dot, .az-cadence-end-label, .recur-table tbody tr, .az-table tbody tr,
  .signals-table tbody tr, .newsletter-content h3, .newsletter-content p, .nl-rule,
  .gate-step, .tier ul li, .legal-body > *, .product-body > *,
  #page-login .login-card > *, #page-login .login-hero-line, #page-login .login-hero-sub {
    opacity: 1 !important; transform: none !important; animation: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
  .az-cadence-area { opacity: 0.10 !important; }
  .gate-locked-body .gate-blur { animation: none !important; }
}

/* the issue's rule and prose live as siblings under the page container, so the
   page itself carries the trigger when the container is what got revealed */
#page-issue .cine-in ~ .nl-rule, #page-issue.route-enter .nl-rule { transform: scaleX(1); }