/* Rampart "Aurora" motion layer: lots of motion, each with a job.
   Arrival (pages, panels, rows, figures) uses strong ease-out with short staggers; hover lifts are gated to real
   pointers; presses scale; decoration (aurora, halo, sheen) is slow and composited. Nothing animates on
   background refresh, and everything settles within about a second so the portal still feels fast. */

/* First load: the sidebar glides in item by item, the top bar drops in. */
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-14px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } }
.app.booting .brand { animation: slide-in-left 420ms var(--ease-out) both; }
.app.booting .nav > a, .app.booting .nav > .nav-label { animation: slide-in-left 380ms var(--ease-out) both; }
.app.booting .nav > :nth-child(2) { animation-delay: 40ms; } .app.booting .nav > :nth-child(3) { animation-delay: 70ms; }
.app.booting .nav > :nth-child(4) { animation-delay: 100ms; } .app.booting .nav > :nth-child(5) { animation-delay: 130ms; }
.app.booting .nav > :nth-child(6) { animation-delay: 160ms; } .app.booting .nav > :nth-child(7) { animation-delay: 190ms; }
.app.booting .nav > :nth-child(8) { animation-delay: 220ms; } .app.booting .nav > :nth-child(9) { animation-delay: 250ms; }
.app.booting .nav > :nth-child(n+10) { animation-delay: 280ms; }
.app.booting .topbar { animation: drop-in 420ms var(--ease-out) 80ms both; }
.app.booting .sidebar-foot { animation: fade-in 500ms ease 300ms both; }
.app.booting .nav-ink { transition: none; }

/* Page arrival: header, then panels in a cascade; a little blur bridges the fade so it reads as one motion. */
@keyframes rise-blur { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
.main.enter > * { animation: rise-blur 420ms var(--ease-out) both; }
.main.enter > :nth-child(2) { animation-delay: 50ms; } .main.enter > :nth-child(3) { animation-delay: 100ms; }
.main.enter > :nth-child(4) { animation-delay: 150ms; } .main.enter > :nth-child(5) { animation-delay: 200ms; }
.main.enter > :nth-child(n+6) { animation-delay: 240ms; }
.main.enter .page-head h1 { animation: title-in 560ms var(--ease-out) both; }
@keyframes title-in { from { opacity: 0; transform: translateY(8px); } }
/* KPI tiles pop in one after another (from .96, never from nothing). */
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.main.enter .grid.kpis > *, .main.enter-tab .grid.kpis > * { animation: tile-in 460ms var(--ease-out) both; }
.main.enter .grid.kpis > :nth-child(1), .main.enter-tab .grid.kpis > :nth-child(1) { animation-delay: 90ms; }
.main.enter .grid.kpis > :nth-child(2), .main.enter-tab .grid.kpis > :nth-child(2) { animation-delay: 140ms; }
.main.enter .grid.kpis > :nth-child(3), .main.enter-tab .grid.kpis > :nth-child(3) { animation-delay: 190ms; }
.main.enter .grid.kpis > :nth-child(4), .main.enter-tab .grid.kpis > :nth-child(4) { animation-delay: 240ms; }
.main.enter .grid.kpis > :nth-child(n+5), .main.enter-tab .grid.kpis > :nth-child(n+5) { animation-delay: 280ms; }
/* Tab switch: content slides up softly. */
.main.enter-tab #tab { animation: rise-blur 320ms var(--ease-out) both; }

/* The score core: the ring draws, the grade letter lands, the chips pop in turn. */
@keyframes grade-pop { 0% { opacity: 0; transform: scale(.7); filter: blur(8px); } 70% { opacity: 1; transform: scale(1.06); filter: blur(0); } 100% { transform: scale(1); } }
.main.enter .grade b { animation: grade-pop 700ms var(--ease-out) 380ms both; }
.main.enter .grade svg circle[stroke-dasharray] { animation: draw-arc 1100ms var(--ease-out) 200ms both; }
@keyframes chip-pop { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.main.enter .posture .chips > * { animation: chip-pop 360ms var(--ease-out) both; }
.main.enter .posture .chips > :nth-child(1) { animation-delay: 520ms; } .main.enter .posture .chips > :nth-child(2) { animation-delay: 570ms; }
.main.enter .posture .chips > :nth-child(3) { animation-delay: 620ms; } .main.enter .posture .chips > :nth-child(4) { animation-delay: 670ms; }
.main.enter .posture .chips > :nth-child(n+5) { animation-delay: 720ms; }
.main.enter .posture .stat { animation: rise-blur 500ms var(--ease-out) 300ms both; }

/* Tables: the first rows cascade in on arrival. */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
.main.enter .table tbody tr, .main.enter-tab .table tbody tr { animation: row-in 340ms var(--ease-out) both; }
.main.enter .table tbody tr:nth-child(1), .main.enter-tab .table tbody tr:nth-child(1) { animation-delay: 160ms; }
.main.enter .table tbody tr:nth-child(2), .main.enter-tab .table tbody tr:nth-child(2) { animation-delay: 190ms; }
.main.enter .table tbody tr:nth-child(3), .main.enter-tab .table tbody tr:nth-child(3) { animation-delay: 220ms; }
.main.enter .table tbody tr:nth-child(4), .main.enter-tab .table tbody tr:nth-child(4) { animation-delay: 250ms; }
.main.enter .table tbody tr:nth-child(5), .main.enter-tab .table tbody tr:nth-child(5) { animation-delay: 280ms; }
.main.enter .table tbody tr:nth-child(6), .main.enter-tab .table tbody tr:nth-child(6) { animation-delay: 310ms; }
.main.enter .table tbody tr:nth-child(7), .main.enter-tab .table tbody tr:nth-child(7) { animation-delay: 340ms; }
.main.enter .table tbody tr:nth-child(8), .main.enter-tab .table tbody tr:nth-child(8) { animation-delay: 370ms; }
.main.enter .table tbody tr:nth-child(n+9), .main.enter-tab .table tbody tr:nth-child(n+9) { animation-delay: 400ms; }
/* Checklists and questionnaires cascade the same way. */
.main.enter-tab .check, .main.enter-tab .control, .main.enter-tab .q-item, .main.enter .check { animation: row-in 340ms var(--ease-out) both; }
.main.enter-tab .card.flush > :nth-child(2), .main.enter .card.flush > :nth-child(2) { animation-delay: 40ms; }
.main.enter-tab .card.flush > :nth-child(3), .main.enter .card.flush > :nth-child(3) { animation-delay: 80ms; }
.main.enter-tab .card.flush > :nth-child(4), .main.enter .card.flush > :nth-child(4) { animation-delay: 120ms; }
.main.enter-tab .card.flush > :nth-child(n+5), .main.enter .card.flush > :nth-child(n+5) { animation-delay: 160ms; }
/* Meters fill from the left; donut segments and charts draw. */
.main.enter .meter, .main.enter-tab .meter { animation: reveal-x 800ms var(--ease-out) 260ms both; }
.main.enter .donut svg circle[stroke-dasharray] { animation: draw-arc 1000ms var(--ease-out) 200ms both; }
.main.enter .chart-box .plot svg { animation: reveal-x 1200ms var(--ease-in-out) 250ms both; }
.main.enter .chart-box .end-dot { animation: grade-pop 500ms var(--ease-out) 1300ms both; }

/* Cards that lead somewhere lift towards the pointer; KPI glows brighten. */
.policy-card, .info-card, .rail-link, .upcoming .up { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-color 150ms ease, border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .policy-card:hover, .info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm), 0 18px 40px rgba(139, 92, 246, .18); }
  .upcoming .up:hover { transform: translateY(-2px); }
  .kpi { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
  .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm), 0 16px 36px rgba(0, 0, 0, .25); }
  .kpi::after { transition: opacity 300ms ease; }
  .kpi:hover::after { opacity: .85; }
}
.policy-card:active, .info-card:active { transform: translateY(-1px) scale(.99); }

/* Primary buttons: a light sheen sweeps across on hover. */
.btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease-out); } }

/* Tab underline and nav highlight glide (movement on screen: ease-in-out); nav icons nudge on hover. */
.tab-ink { transition: transform 320ms var(--ease-in-out); }
.nav-ink { transition: transform 320ms var(--ease-in-out), opacity 150ms ease; }
.nav a svg { transition: transform 200ms var(--ease-out), color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav a:hover svg { transform: translateX(2px); } }

/* Modals arrive from slightly below with a blur that clears, and leave quickly. */
@starting-style { .modal-backdrop .modal { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); } }
.modal { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), filter 300ms var(--ease-out); }
.modal-backdrop[data-closing] .modal { transform: translateY(6px) scale(.98); filter: blur(4px); transition-duration: 160ms; }

/* Toasts rise in with a little scale. */
.toast { transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(16px) scale(.96); } }

/* Sign-in: the card floats in and the logo settles. */
@keyframes float-in { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(10px); } }
.auth-card { animation: float-in 700ms var(--ease-out) both; }
.auth-logo img { animation: grade-pop 800ms var(--ease-out) 200ms both; }

/* Directors' report, policies and the info hub cascade too. */
.main.enter .dr-stats > *, .main.enter .info-grid > *, .main.enter .policy-grid > *, .main.enter-tab .policy-grid > * { animation: tile-in 440ms var(--ease-out) both; }
.main.enter .dr-stats > :nth-child(2), .main.enter .info-grid > :nth-child(2), .main.enter .policy-grid > :nth-child(2), .main.enter-tab .policy-grid > :nth-child(2) { animation-delay: 60ms; }
.main.enter .dr-stats > :nth-child(3), .main.enter .info-grid > :nth-child(3), .main.enter .policy-grid > :nth-child(3), .main.enter-tab .policy-grid > :nth-child(3) { animation-delay: 120ms; }
.main.enter .dr-stats > :nth-child(4), .main.enter .info-grid > :nth-child(4), .main.enter .policy-grid > :nth-child(4), .main.enter-tab .policy-grid > :nth-child(4) { animation-delay: 180ms; }
.main.enter .info-grid > :nth-child(n+5), .main.enter .policy-grid > :nth-child(n+5), .main.enter-tab .policy-grid > :nth-child(n+5) { animation-delay: 230ms; }
.main.enter .dr-grade { animation: grade-pop 700ms var(--ease-out) 250ms both; }

/* Reduced motion: keep gentle fades, drop movement, blur and the decorative loops. */
@media (prefers-reduced-motion: reduce) {
  .app.booting .brand, .app.booting .nav > *, .app.booting .topbar, .main.enter > *, .main.enter .page-head h1, .main.enter .grid.kpis > *, .main.enter-tab .grid.kpis > *,
  .main.enter-tab #tab, .main.enter .grade b, .main.enter .posture .chips > *, .main.enter .posture .stat, .main.enter .table tbody tr, .main.enter-tab .table tbody tr,
  .main.enter-tab .check, .main.enter-tab .control, .main.enter-tab .q-item, .main.enter .check, .auth-card, .auth-logo img,
  .main.enter .dr-stats > *, .main.enter .info-grid > *, .main.enter .policy-grid > *, .main.enter-tab .policy-grid > *, .main.enter .dr-grade {
    animation-name: fade-in; animation-duration: 200ms; }
  .main.enter .grade svg circle[stroke-dasharray], .main.enter .meter, .main.enter-tab .meter, .main.enter .donut svg circle[stroke-dasharray], .main.enter .chart-box .plot svg { animation: none; }
  .policy-card:hover, .info-card:hover, .kpi:hover, .upcoming .up:hover { transform: none; }
  .btn.primary::after { display: none; }
  @starting-style { .modal-backdrop .modal { transform: none; filter: none; } .toast { transform: none; } }
}

/* Change log 2.0 headline: the badge drops in, the title lands, highlights cascade. */
.main.enter .release-hero .rh-badge { animation: chip-pop 420ms var(--ease-out) 200ms both; }
.main.enter .release-hero h2 { animation: grade-pop 800ms var(--ease-out) 260ms both; }
.main.enter .rh-item { animation: tile-in 460ms var(--ease-out) both; }
.main.enter .rh-item:nth-child(1) { animation-delay: 420ms; } .main.enter .rh-item:nth-child(2) { animation-delay: 480ms; }
.main.enter .rh-item:nth-child(3) { animation-delay: 540ms; } .main.enter .rh-item:nth-child(4) { animation-delay: 600ms; }
.main.enter .rh-item:nth-child(5) { animation-delay: 660ms; } .main.enter .rh-item:nth-child(n+6) { animation-delay: 720ms; }
@media (prefers-reduced-motion: reduce) { .main.enter .release-hero .rh-badge, .main.enter .release-hero h2, .main.enter .rh-item { animation-name: fade-in; animation-duration: 200ms; } }