/* 2026-10-31 (user: "not enough motion on the homepage graphic … roll in the line items, have the numbers go up, the
   activity needs to roll in"): the frame (window, sidebar, KPI labels, table header, Activity heading) is there from
   first paint; when the hero plays, the jurisdiction rows roll in one by one, the KPI values and each row's tax count up
   from zero (motion.js [data-count-up]), the Filed statuses confirm, then the activity items roll in. Once, then rest.
   The rows and activity start hidden only when html.w-mod-js is set (Webflow's head script) and motion is allowed;
   a failsafe reveals them after 4s if the hero never plays. This supersedes the "simply there" rows below.
   ---
   Motion for the homepage Workspace hero (D-062/D-063), play once (user, 2026-10-31: "the UI elements animate into
   view on their own. They should simply be there."). The window, KPI tiles ("Returns this period", "Filed and
   remitted", "Tax remitted"), the filings table and the activity feed are all on screen from first paint and never
   rise, fade or slide in. The stage squares hold still. motion.js adds .is-on to .zw-stage once, when 35% of it is
   visible (immediately on load: the hero is above the fold), and only the meaningful motion plays, once: each Filed
   status confirms in row order (a short mint wash across the row and a pop of its pill) and the Live dot pulses twice.
   Then everything rests and never replays. Nothing here runs under reduced motion or without JS. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .zw-hero { --zw-e: cubic-bezier(.2, .7, .2, 1); }

  /* Rows roll in one by one; activity items follow from the right. */
  html.w-mod-js .zw-stage .zw-table tbody tr, html.w-mod-js .zw-stage .zw-act ol li { animation: zw-failsafe 0s 6s both; }
  html.w-mod-js .zw-stage:not(.is-on) .zw-table tbody tr, html.w-mod-js .zw-stage:not(.is-on) .zw-act ol li { opacity: 0; }
  html.w-mod-js .zw-stage.is-on .zw-table tbody tr { animation: zw-row-in .8s var(--zw-e) var(--zw-r, 0s) both; }
  html.w-mod-js .zw-stage.is-on .zw-act ol li { animation: zw-act-in .8s var(--zw-e) var(--zw-a, 0s) both; }
  .zw-table tbody tr:nth-child(1) { --zw-r: .25s; } .zw-table tbody tr:nth-child(2) { --zw-r: .5s; } .zw-table tbody tr:nth-child(3) { --zw-r: .75s; }
  .zw-table tbody tr:nth-child(4) { --zw-r: 1s; } .zw-table tbody tr:nth-child(5) { --zw-r: 1.25s; } .zw-table tbody tr:nth-child(6) { --zw-r: 1.5s; }
  .zw-act ol li:nth-child(1) { --zw-a: 2.4s; } .zw-act ol li:nth-child(2) { --zw-a: 2.95s; } .zw-act ol li:nth-child(3) { --zw-a: 3.5s; } .zw-act ol li:nth-child(4) { --zw-a: 4.05s; }

  /* Filed confirmations land one by one, after the rows. */
  .zw-stage.is-on .zw-table tbody tr:has(.zw-pill[data-st="filed"]) td { animation: zw-wash 1.3s ease-out var(--zw-d, 0s) 1; }
  .zw-stage.is-on .zw-table tbody .zw-pill[data-st="filed"] { animation: zw-confirm .5s var(--zw-e) var(--zw-d, 0s) 1 both; }
  .zw-table tbody tr:nth-child(1) { --zw-d: 2.2s; }
  .zw-table tbody tr:nth-child(2) { --zw-d: 2.6s; }
  .zw-table tbody tr:nth-child(3) { --zw-d: 3s; }
  .zw-table tbody tr:nth-child(4) { --zw-d: 3.4s; }
  .zw-table tbody tr:nth-child(5) { --zw-d: 3.8s; }
  .zw-table tbody tr:nth-child(6) { --zw-d: 4.2s; }

  /* The Live dot pulses twice, then rests. */
  .zw-stage.is-on .zw-act__h .zw-pill i { animation: zw-live 2.4s ease-in-out 4.8s 2; }
}

@keyframes zw-row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes zw-act-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes zw-failsafe { to { opacity: 1; } }
@keyframes zw-wash { 0% { box-shadow: inset 0 0 0 999px rgba(175, 236, 219, 0); } 25% { box-shadow: inset 0 0 0 999px rgba(175, 236, 219, .4); } 100% { box-shadow: inset 0 0 0 999px rgba(175, 236, 219, 0); } }
@keyframes zw-confirm { 0% { transform: none; } 45% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes zw-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(24, 62, 61, .45); } 50% { box-shadow: 0 0 0 5px rgba(24, 62, 61, 0); } }