/* ============================================================================
   motion.css — THE POLARITY ENGINE MOTION SYSTEM
   Branded, meaningful motion. Every animation expresses what the system is
   DOING. Uses the existing design tokens. Respects prefers-reduced-motion.
   The engine has depth; this makes the build FEEL it — end to end.
   ============================================================================ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* decisive arrival */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* considered */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* alive, slight overshoot */
  --t-fast: 180ms; --t-base: 320ms; --t-slow: 560ms; --t-reveal: 720ms;
}

/* ---- VIEW TRANSITION: every screen arrives, never blinks --------------- */
@keyframes pe-view-in {
  from { opacity: 0; transform: translateY(14px) scale(.994); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.pe-view-enter { animation: pe-view-in var(--t-reveal) var(--ease-out) both; }

/* ---- STAGGERED REVEAL: sections cascade in, the report ASSEMBLES ------- */
@keyframes pe-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.pe-stagger > * { opacity: 0; animation: pe-rise var(--t-base) var(--ease-out) both; }
.pe-stagger > *:nth-child(1){ animation-delay: 40ms; }
.pe-stagger > *:nth-child(2){ animation-delay: 100ms; }
.pe-stagger > *:nth-child(3){ animation-delay: 160ms; }
.pe-stagger > *:nth-child(4){ animation-delay: 220ms; }
.pe-stagger > *:nth-child(5){ animation-delay: 280ms; }
.pe-stagger > *:nth-child(6){ animation-delay: 340ms; }
.pe-stagger > *:nth-child(7){ animation-delay: 400ms; }
.pe-stagger > *:nth-child(n+8){ animation-delay: 460ms; }

/* ---- THE TRUTH MATERIALIZES: the report's signature reveal ------------- */
@keyframes pe-truth-in {
  0%   { opacity: 0; transform: translateY(24px) scale(.98); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes pe-truth-glow {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  40%  { box-shadow: 0 0 48px 6px var(--accent-glow); }
  100% { box-shadow: var(--shadow); }
}
.pe-truth-reveal {
  animation: pe-truth-in var(--t-reveal) var(--ease-out) both,
             pe-truth-glow 1400ms var(--ease-in-out) both;
}

/* ---- KERNEL THINKING: the brand loader (computation as ceremony) ------- */
@keyframes pe-orbit { to { transform: rotate(360deg); } }
@keyframes pe-core-pulse { 0%,100%{ transform: scale(.82); opacity:.7 } 50%{ transform: scale(1); opacity:1 } }
.pe-loader { position: relative; width: 56px; height: 56px; margin: 0 auto; }
.pe-loader::before, .pe-loader::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent);
  animation: pe-orbit 1.1s linear infinite;
}
.pe-loader::after { inset: 9px; border-top-color: var(--accent-hi); animation-duration: .8s; animation-direction: reverse; }
.pe-loader-core {
  position: absolute; inset: 21px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow); animation: pe-core-pulse 1.1s var(--ease-in-out) infinite;
}
.pe-loader-label {
  text-align: center; margin-top: var(--sp-4); font-family: var(--mono);
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); animation: pe-textpulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pe-textpulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* ---- AXIS BARS FILL: the F.P.A. scores animate to their value ---------- */
@keyframes pe-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pe-bar-fill { transform-origin: left; animation: pe-bar-fill var(--t-slow) var(--ease-out) both; }

/* ---- BUTTONS & INTERACTIVE: alive, branded feedback ------------------- */
.btn, button, .nav-item, [role="button"] {
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover, button:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active, button:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn.primary:hover, .btn.accent:hover { box-shadow: 0 6px 22px var(--accent-glow); }

/* ---- CARDS / PANELS: lift on hover, depth on focus -------------------- */
.card, .panel, .tool-card, .client-card, .finding {
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) ease;
}
.card:hover, .tool-card:hover, .client-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---- TOAST / STATUS: slide + settle ----------------------------------- */
@keyframes pe-toast { from{ transform: translateY(16px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
.toast, .notice { animation: pe-toast var(--t-base) var(--ease-spring) both; }

/* ---- SHUSH RELEASE: the firewall crossing is FELT --------------------- */
@keyframes pe-shush-charge {
  0%   { box-shadow: inset 0 0 0 1px var(--line); }
  50%  { box-shadow: inset 0 0 0 2px var(--shush), 0 0 30px color-mix(in srgb, var(--shush) 40%, transparent); }
  100% { box-shadow: inset 0 0 0 1px var(--shush); }
}
.pe-shush-release { animation: pe-shush-charge 900ms var(--ease-in-out) both; }

/* ---- NAV / ROUTE INDICATOR: the active rail glides -------------------- */
.nav-item { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
  animation: pe-rail-in var(--t-base) var(--ease-out) both;
}
@keyframes pe-rail-in { from{ transform: scaleY(0); opacity:0 } to{ transform: scaleY(1); opacity:1 } }

/* ---- accessibility: honor reduced-motion fully ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}