/* ============================================================================
   lq-motion.css  —  the "calm + alive" layer
   ----------------------------------------------------------------------------
   Restrained, token-driven motion. Content settles in gently when a view
   mounts, and interactive elements respond softly. Nothing bounces, spins, or
   distracts — the goal is calm aliveness, not animation for its own sake.

   SAFETY: entrance uses `animation` with fill-mode `backwards`, not `forwards`.
   During the stagger delay the element holds its hidden start state (no flash),
   and once the ~260ms entrance finishes it reverts to its natural style, so NO
   persistent transform is left on any element. Sticky toolbars, dropdown menus,
   and fixed overlays are unaffected after load. Everything here is additive and
   fully disabled under prefers-reduced-motion.

   Wired after the other stylesheets so it layers on top without changing them.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Entrance: content settles in when #main .page is (re)rendered -------
     app.js swaps el('main').innerHTML = '<div class="page">…' on every navigate
     and on the loading -> loaded transition, so a fresh .page mounts each time
     and these animations replay naturally, no JS needed. */
  @keyframes lq-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lq-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .page { animation: lq-fade-in var(--lq-duration-slow, 250ms) var(--lq-ease-standard, cubic-bezier(0.2,0.7,0.2,1)) backwards; }

  /* Cards and major blocks rise in with a gentle, capped stagger — the "alive"
     cascade. `backwards` holds them hidden through their delay, then leaves no
     transform behind. */
  .page .card,
  .page .lq-card,
  .page .section,
  .page .hero { animation: lq-rise-in 260ms var(--lq-ease-standard, cubic-bezier(0.2,0.7,0.2,1)) backwards; }

  .page .card:nth-child(1), .page .lq-card:nth-child(1) { animation-delay: 20ms; }
  .page .card:nth-child(2), .page .lq-card:nth-child(2) { animation-delay: 55ms; }
  .page .card:nth-child(3), .page .lq-card:nth-child(3) { animation-delay: 90ms; }
  .page .card:nth-child(4), .page .lq-card:nth-child(4) { animation-delay: 120ms; }
  .page .card:nth-child(5), .page .lq-card:nth-child(5) { animation-delay: 145ms; }
  .page .card:nth-child(n+6), .page .lq-card:nth-child(n+6) { animation-delay: 165ms; } /* cap: later cards don't lag */

  /* ---- Micro-interactions: soft, consistent responses --------------------- */
  /* Smooth whatever hover/active/focus states already exist so state changes
     glide instead of snapping. */
  a, button, .btn, .lq-btn, .nav__item,
  .card, .lq-card, .chip, .pill, .badge, .tab, .subitem, .cres {
    transition:
      background-color var(--lq-duration-fast, 150ms) ease,
      color var(--lq-duration-fast, 150ms) ease,
      border-color var(--lq-duration-base, 200ms) ease,
      box-shadow var(--lq-duration-base, 200ms) var(--lq-ease-standard, ease);
  }

  input, select, textarea {
    transition:
      border-color var(--lq-duration-fast, 150ms) ease,
      box-shadow var(--lq-duration-fast, 150ms) ease,
      background-color var(--lq-duration-fast, 150ms) ease;
  }

  /* Cards lift softly on hover — shadow only, never a transform, so anything
     positioned inside a card (menus, tooltips) is never reparented. */
  .card:hover, .lq-card:hover { box-shadow: var(--lq-shadow-md); }

  /* Buttons get a gentle, tactile press. Transient (reverts on release) and
     buttons never host dropdowns, so a transform here is safe. */
  .btn:active, .lq-btn:active, button:active:not(:disabled) { transform: translateY(1px); }

  /* Icon buttons / nav items nudge on press for the same tactile feel. */
  .nav__item:active { transform: translateY(1px); }

  /* ---- Lists settle in: rows/items cascade when a list (re)loads --------- */
  /* Fade only (NO transform), so nothing inside a row is ever reparented; a
     capped stagger keeps big tables from lagging. `backwards` = no flash, no
     residue. */
  .page tbody tr,
  .page .dlist .row,
  .page .lq-list > li { animation: lq-fade-in 240ms var(--lq-ease-standard, ease) backwards; }
  .page tbody tr:nth-child(1), .page .dlist .row:nth-child(1), .page .lq-list > li:nth-child(1) { animation-delay: 12ms; }
  .page tbody tr:nth-child(2), .page .dlist .row:nth-child(2), .page .lq-list > li:nth-child(2) { animation-delay: 34ms; }
  .page tbody tr:nth-child(3), .page .dlist .row:nth-child(3), .page .lq-list > li:nth-child(3) { animation-delay: 54ms; }
  .page tbody tr:nth-child(4), .page .dlist .row:nth-child(4), .page .lq-list > li:nth-child(4) { animation-delay: 72ms; }
  .page tbody tr:nth-child(5), .page .dlist .row:nth-child(5), .page .lq-list > li:nth-child(5) { animation-delay: 88ms; }
  .page tbody tr:nth-child(6), .page .dlist .row:nth-child(6), .page .lq-list > li:nth-child(6) { animation-delay: 100ms; }
  .page tbody tr:nth-child(7), .page .dlist .row:nth-child(7), .page .lq-list > li:nth-child(7) { animation-delay: 110ms; }
  .page tbody tr:nth-child(n+8), .page .dlist .row:nth-child(n+8), .page .lq-list > li:nth-child(n+8) { animation-delay: 118ms; } /* cap */

  /* ---- Readiness ring: sweeps in on load, and responds to hover ------------ */
  /* On mount the conic fill animates 0 -> its score (needs @property below to interpolate --pct).
     On hover the ring lifts with a soft cobalt glow and the score gives a quick, tactile pop. */
  .lq-dash .readiness-ring {
    animation: lq-ring-fill 1050ms var(--lq-ease-standard, cubic-bezier(.22,.61,.36,1)) both;
    transition: transform 320ms var(--lq-ease-standard, ease), box-shadow 320ms var(--lq-ease-standard, ease),
      background var(--lq-duration-slow, 420ms) var(--lq-ease-standard, ease);
  }
  .lq-dash .readiness-ring:hover {
    transform: scale(1.045);
    box-shadow: 0 12px 28px -12px var(--ring-color, var(--lq-accent, #1E36C9));
  }
  .lq-dash .readiness-ring:hover .val { animation: lq-ring-pop 560ms var(--lq-ease-standard, ease); }
  /* Empty-state illustration settles in gently; the Spark breathes a soft, slow glow (opacity only,
     so it never fights the inline transform that positions it). */
  .empty__art { animation: lq-rise-in 440ms var(--lq-ease-standard, ease) both; }
  .lq-spark-art .lq-spark { animation: lq-twinkle 3.2s ease-in-out infinite; }
  @keyframes lq-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
  /* KPI / stat cards lift softly on hover (shadow only — no transform, nothing inside is reparented). */
  .lq-dash .lqd-stat:hover, .stat-tile:hover, .kpi:hover { box-shadow: var(--lq-shadow-md); }

  @keyframes lq-ring-fill { from { --pct: 0; } }
  @keyframes lq-ring-pop { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } }
}

/* Register --pct as an animatable number so the ring's conic fill interpolates smoothly on load.
   Unsupported browsers simply render the final value (no smooth sweep) — graceful, never broken. */
@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---- Respect the user's motion setting ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page, .page .card, .page .lq-card, .page .section, .page .hero,
  .page tbody tr, .page .dlist .row, .page .lq-list > li { animation: none !important; }
  .btn:active, .lq-btn:active, button:active, .nav__item:active { transform: none !important; }
}