/* ==========================================================================
   ForgePilot playground — motion layer
   Loaded after theme.css. Purely decorative: no layout, no interaction logic.
   Every effect is neutralised under prefers-reduced-motion.
   ========================================================================== */

:root {
  --fp-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  --fp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fp-ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* ---------------------------------------------------------- page frame -- */

.fp-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 2px;
  pointer-events: none;
  background: rgba(134, 234, 255, 0.05);
}
.fp-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #2f6bff, #86eaff 58%, #efd0a0);
  box-shadow: 0 0 14px rgba(134, 234, 255, 0.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(226, 235, 247, 0.14);
  background: rgba(5, 8, 12, 0.92);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.38);
}

.site-nav a::after {
  width: 100%;
  background: linear-gradient(90deg, var(--fp-cyan), rgba(134, 234, 255, 0.14));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--fp-ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

.brand-mark {
  transition: rotate 0.6s var(--fp-ease-spring), filter 0.35s ease;
}
.brand:hover .brand-mark {
  rotate: -16deg;
  filter: drop-shadow(0 0 16px rgba(134, 234, 255, 0.55));
}

/* ----------------------------------------------------------------- hero -- */

.hero-side {
  animation: fp-side-in 1s var(--fp-ease-out) 0.1s both;
}
.hero-side-right { animation-name: fp-side-in-right; animation-delay: 0.18s; }

.hero-side em { position: relative; display: inline-block; }
.hero-side em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.06em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(134, 234, 255, 0.12), var(--fp-cyan) 34%, rgba(239, 208, 160, 0.8));
  box-shadow: 0 0 18px rgba(134, 234, 255, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: fp-underline 1.1s var(--fp-ease-out) 0.85s both;
}

.hero-core {
  opacity: 0;
  animation: fp-core-in 0.95s var(--fp-ease-out) 0.32s both;
}
.hero-core::before { animation: fp-breathe 6s ease-in-out infinite; }
.hero-core::after { animation: fp-spin-slow 44s linear infinite; }

.orbit-a {
  translate: calc(var(--fp-px, 0px) * -0.55) calc(var(--fp-py, 0px) * -0.55);
}
.orbit-b {
  rotate: 0deg;
  translate: calc(var(--fp-px, 0px) * 0.8) calc(var(--fp-py, 0px) * 0.8);
  animation: fp-spin-slow 96s linear infinite;
}
.hero-core {
  translate: calc(var(--fp-px, 0px) * 0.35) calc(var(--fp-py, 0px) * 0.35);
}

.hero-cross {
  translate: calc(var(--fp-px, 0px) * 1.6) calc(var(--fp-py, 0px) * 1.6);
  animation: fp-twinkle 6.5s ease-in-out infinite;
}
.cross-a { animation-delay: 1.1s; }
.cross-b { animation-delay: 2.7s; }

.hero-eyebrow-version { transition: color 0.3s ease; }
.hero-eyebrow:hover .hero-eyebrow-version { color: var(--fp-cyan); }

.hero-cta-primary,
.hero-cta-ghost { position: relative; overflow: hidden; }
.hero-cta-primary span,
.hero-cta-ghost span { transition: translate 0.25s var(--fp-ease-out); }
.hero-cta-primary:hover span { translate: 0 2px; }
.hero-cta-ghost:hover span { translate: 2px 2px; }

.hero-stat strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- sections -- */

.section-title-block::before,
.start-copy::before {
  translate: var(--fp-drift, 0px) 0;
}

/* JS adds .fp-reveal before observing; without JS everything stays visible. */
.fp-reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.85s var(--fp-ease-out) var(--fp-delay, 0ms),
    translate 0.85s var(--fp-ease-out) var(--fp-delay, 0ms);
}
.fp-reveal.is-in { opacity: 1; translate: 0 0; }

/* keep the capability rows' own background transition intact */
.cap-card.fp-reveal {
  transition:
    opacity 0.85s var(--fp-ease-out) var(--fp-delay, 0ms),
    translate 0.85s var(--fp-ease-out) var(--fp-delay, 0ms),
    background 0.24s ease;
}

.console-shell { position: relative; }
.console-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(134, 234, 255, 0.14), transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.console-shell.is-in::after { animation: fp-shell-flash 1.4s ease-out 0.15s both; }

/* ---------------------------------------------------------- capabilities -- */

.cap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    300px circle at var(--fp-mx, 50%) var(--fp-my, 50%),
    rgba(134, 234, 255, 0.085),
    transparent 64%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.cap-card:hover::after { opacity: 1; }
.cap-card > * { position: relative; z-index: 1; }
.cap-card::before { z-index: 2; }

.cap-index,
.cap-card h3 { transition: color 0.24s ease, transform 0.4s var(--fp-ease-out); }
.cap-card:hover .cap-index { transform: translateX(4px); }
.cap-card:hover h3 { transform: translateX(2px); }

.cap-card .cap-action,
.plan-btn,
.approval-btn,
.copy-btn,
.window-btn { -webkit-tap-highlight-color: transparent; }
.cap-card .cap-action:active { scale: 0.96; }
.copy-btn:active,
.window-btn:active { scale: 0.95; }
.plan-btn:active,
.approval-btn:active { scale: 0.97; }
.mission:active { scale: 0.985; }

/* --------------------------------------------------------- architecture -- */

.arch-stage {
  transition: background-color 0.35s ease, opacity 0.35s ease;
}
.arch-stage:hover { background-color: rgba(134, 234, 255, 0.025); }
.arch-flow:has(.arch-stage:hover) .arch-stage:not(:hover) { opacity: 0.5; }
.arch-stage h3 {
  transition: translate 0.4s var(--fp-ease-out), color 0.3s ease;
}
.arch-stage:hover h3 { translate: 3px 0; }

.arch-board.is-in .arch-stage {
  animation: fp-stage-in 0.65s var(--fp-ease-out) both;
}
.arch-board.is-in .arch-stage:nth-child(2) { animation-delay: 0.1s; }
.arch-board.is-in .arch-stage:nth-child(3) { animation-delay: 0.2s; }
.arch-board.is-in .arch-stage:nth-child(4) { animation-delay: 0.3s; }

.arch-board.is-in .arch-label::after {
  animation: fp-diamond-in 0.6s var(--fp-ease-spring) both;
}
.arch-board.is-in .arch-stage:nth-child(2) .arch-label::after { animation-delay: 0.26s; }
.arch-board.is-in .arch-stage:nth-child(3) .arch-label::after { animation-delay: 0.42s; }
.arch-board.is-in .arch-stage:nth-child(4) .arch-label::after { animation-delay: 0.58s; }

.arch-board::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -32%;
  z-index: 1;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(134, 234, 255, 0.07), transparent);
  opacity: 0;
  pointer-events: none;
}
.arch-board.is-in::after { animation: fp-board-sweep 1.8s var(--fp-ease-out) 0.1s both; }

.guardrail-band.is-in .guardrail-seq i {
  animation: fp-arrow 3.4s ease-in-out 2;
}
.guardrail-band.is-in .guardrail-seq i:nth-of-type(2) { animation-delay: 0.18s; }
.guardrail-band.is-in .guardrail-seq i:nth-of-type(3) { animation-delay: 0.36s; }

.mode-tag.is-on::before { animation: fp-dot-pulse 2.8s ease-out infinite; }

.guard-card.is-in .mini-node {
  animation: fp-node-pop 0.42s var(--fp-ease-out) both;
}
.guard-card.is-in .mini-node:nth-child(1) { animation-delay: 0.18s; }
.guard-card.is-in .mini-node:nth-child(3) { animation-delay: 0.32s; }
.guard-card.is-in .mini-node:nth-child(5) { animation-delay: 0.46s; }
.guard-card.is-in .mini-node.is-changed {
  animation: fp-node-pop 0.42s var(--fp-ease-out) 0.32s both,
    fp-text-glow 2.6s ease-in-out 1s 2;
}
.guard-card.is-in .mini-rollback {
  animation: fp-nudge 3.2s ease-in-out 1.1s 3;
}
.guard-card.is-in .guard-block {
  animation: fp-warn-flash 2.2s ease-out 0.9s 2;
}
.guard-card.is-in .guard-code { animation: fp-code-in 0.6s var(--fp-ease-out) 0.15s both; }

/* ------------------------------------------------------------ quickstart -- */

.start-section .button { position: relative; overflow: hidden; }
.start-section .button::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -50%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--fp-ease-out);
  pointer-events: none;
}
.start-section .button:hover::after { left: 118%; }

.install-panel.fp-reveal {
  translate: 0 0;
  transition:
    opacity 0.85s var(--fp-ease-out) var(--fp-delay, 0ms),
    translate 0.3s var(--fp-ease-out),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.install-panel:hover {
  border-color: rgba(134, 234, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(134, 234, 255, 0.05) inset,
    0 34px 90px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(47, 107, 255, 0.1);
  translate: 0 -2px;
}
.copy-btn { transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, scale 0.2s ease; }

.install-code code { position: relative; }
.install-code code::after {
  content: "▌";
  margin-left: 3px;
  color: var(--fp-cyan);
  animation: fp-caret 1.2s steps(1) infinite;
}

.footer-links a {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease, translate 0.3s var(--fp-ease-out);
}
.footer-links a:hover { translate: 0 -1px; }

/* -------------------------------------------------------------- terminal -- */

.terminal-screen.is-switching { animation: fp-screen-in 0.32s ease both; }

.terminal-screen > * { animation: fp-line-in 0.42s var(--fp-ease-out) both; }
.terminal-screen > .msg-user { animation-name: fp-user-in; }
.terminal-screen > .thinking { animation-name: fp-think-in; }
.terminal-screen > .assistant { animation-name: fp-answer-in; }
.terminal-screen > .tool-group { animation-name: fp-card-in; }
.terminal-screen > .plan-card { animation-name: fp-plan-in; }
.terminal-screen > .approval-card { animation-name: fp-approval-in; }
.terminal-screen > .role-card { animation-name: fp-card-in; }
.terminal-screen > .memory-card,
.terminal-screen > .snapshot-card,
.terminal-screen > .data-card,
.terminal-screen > .search-card,
.terminal-screen > .context-card,
.terminal-screen > .restore-card,
.terminal-screen > .audit-card,
.terminal-screen > .result-card,
.terminal-screen > .diagnostics { animation-name: fp-card-in; }
.terminal-screen > .note-line { animation-name: fp-note-in; }

.scene-divider::before,
.scene-divider::after {
  transform: scaleX(0);
  animation: fp-line-grow 0.85s var(--fp-ease-out) 0.1s both;
}
.scene-divider::after { transform-origin: 100% 50%; }

.msg-user .prompt-symbol { animation: fp-prompt 0.9s var(--fp-ease-out) 0.2s both; }

.thinking-label i { animation: fp-think-dot 0.9s steps(1) 3; }
.thinking::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(90deg, rgba(134, 234, 255, 0.3), transparent 70%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: fp-line-grow 0.9s var(--fp-ease-out) 0.15s both;
}

.assistant .md > * { animation: fp-md-in 0.5s var(--fp-ease-out) both; }
.assistant .md > :nth-child(2) { animation-delay: 0.08s; }
.assistant .md > :nth-child(3) { animation-delay: 0.16s; }
.assistant .md > :nth-child(4) { animation-delay: 0.24s; }
.assistant .md > :nth-child(5) { animation-delay: 0.32s; }
.assistant .md > :nth-child(n + 6) { animation-delay: 0.4s; }

.assistant.is-streaming .md > p:last-child::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 1.02em;
  margin-left: 3px;
  vertical-align: -0.16em;
  background: var(--fp-cyan);
  box-shadow: 0 0 10px rgba(134, 234, 255, 0.55);
  animation: fp-caret 0.9s steps(1) infinite;
}

/* tools */

.tool-group { position: relative; }
.tool-group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  z-index: 2;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(134, 234, 255, 0.055), transparent);
  opacity: 0;
  pointer-events: none;
  animation: fp-scan 1.5s var(--fp-ease-out) 0.12s 1 both;
}
.tool-list .tool-item {
  animation: fp-tool-in 0.38s var(--fp-ease-out) both;
  animation-delay: calc(110ms + var(--i, 0) * 70ms);
}
.tool-item.is-fail .tool-dot,
.tool-item.is-blocked .tool-dot { animation: fp-alert 1.6s ease-in-out 2; }
.tool-badge { transition: box-shadow 0.25s ease; }
.tool-head:hover .tool-badge { box-shadow: 0 0 14px rgba(134, 234, 255, 0.28); }

/* plan */

.plan-task {
  animation: fp-plan-row 0.45s var(--fp-ease-out) both;
  animation-delay: calc(170ms + var(--i, 0) * 55ms);
}
.plan-batch {
  animation: fp-row-in 0.4s var(--fp-ease-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 55ms);
}
.plan-review { animation: fp-rise-sm 0.35s var(--fp-ease-out) both; }
.plan-btn.primary { animation: fp-blue-pulse 2.4s ease-out infinite; }
.plan-task.is-done .task-state { animation: fp-pop 0.42s var(--fp-ease-spring); }
.plan-progress { overflow: hidden; }
.plan-progress i { position: relative; overflow: hidden; }
.plan-card:not(.is-approved) .plan-progress i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
  animation: fp-shimmer 1.9s linear infinite;
}
.plan-verdict,
.approval-verdict { animation: fp-verdict 0.42s var(--fp-ease-out) both; }
.plan-details.is-open { animation: fp-unfold 0.3s var(--fp-ease-out) both; }
.plan-feedback { animation: fp-rise-sm 0.35s var(--fp-ease-out) both; }

/* approval */

.approval-card::before { animation: fp-hazard 1.1s linear infinite; }
.approval-card.is-decided::before { animation-play-state: paused; }
.approval-card:not(.is-decided) .approval-btn.approve {
  animation: fp-amber-pulse 2.4s ease-out infinite;
}
.approval-card .warn-icon { animation: fp-warn-icon 2.2s ease-in-out infinite; }

/* team */

.role-card.is-rejected { animation-name: fp-reject-in; animation-duration: 0.55s; }
.role-card.is-approved { animation-name: fp-approve-in; animation-duration: 0.55s; }

/* records & cards */

.memory-row,
.snap-row,
.data-row,
.search-item,
.result-row {
  animation: fp-row-in 0.4s var(--fp-ease-out) both;
  animation-delay: calc(90ms + var(--i, 0) * 45ms);
}
.snapshot-timeline .snap-node {
  animation: fp-node-pop 0.42s var(--fp-ease-spring) both;
}
.snapshot-timeline .snap-node:nth-of-type(1) { animation-delay: 0.14s; }
.snapshot-timeline .snap-node:nth-of-type(2) { animation-delay: 0.26s; }
.snapshot-timeline .snap-node:nth-of-type(3) { animation-delay: 0.38s; }
.snapshot-timeline .snap-node:nth-of-type(4) { animation-delay: 0.5s; }
.snapshot-timeline .snap-line {
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: fp-line-grow 0.45s var(--fp-ease-out) 0.2s both;
}
.result-check { animation: fp-check 0.65s var(--fp-ease-spring) 0.14s both; }
.context-card .ctx-chart i {
  transform-origin: 0 50%;
  animation: fp-bar-grow 1.1s var(--fp-ease-out) 0.1s both;
}

/* status chrome */

#traceCount.is-bump { animation: fp-count 0.5s var(--fp-ease-spring); }
.trace-item { animation: fp-trace-in 0.32s var(--fp-ease-out) both; }
.status-phase.is-changed { animation: fp-phase 0.65s ease; }
.status-model.is-changed { animation: fp-text-change 0.55s ease; }
.mode-chip.is-changed { animation: fp-chip 0.45s var(--fp-ease-spring); }
.ctx-track.is-bump i { animation: fp-ctx-bar 0.8s ease; }

.mission { transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, scale 0.2s ease; }
.mission.is-active .mission-dot { animation: fp-mission-pulse 2.4s ease-out infinite; }
.mission-dot { transition: background 0.25s ease; }

/* overlays */

.slash-palette:not([hidden]) { animation: fp-palette 0.22s var(--fp-ease-out) both; }
.palette-item.is-active { animation: fp-palette-item 0.25s var(--fp-ease-out); }

.toast {
  overflow: hidden;
  transition: opacity 0.24s ease, transform 0.52s var(--fp-ease-spring);
}
.toast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-cyan), rgba(239, 208, 160, 0.85));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.toast.is-visible::after { animation: fp-toast-life 2.2s linear both; }

/* ----------------------------------------------------------------- boot -- */

.boot > * { animation: fp-line-in 0.5s var(--fp-ease-out) both; }
.boot > :nth-child(1) { animation-delay: 0.04s; }
.boot > :nth-child(2) { animation-delay: 0.12s; }
.boot > :nth-child(3) { animation-delay: 0.2s; }
.boot > :nth-child(4) { animation-delay: 0.28s; }
.boot > :nth-child(5) { animation-delay: 0.36s; }
.boot-chip { transition: border-color 0.2s ease, color 0.2s ease, translate 0.25s var(--fp-ease-out); }
.boot-chip:hover { translate: 0 -2px; }

/* -------------------------------------------------------------- keyframes -- */

@keyframes fp-side-in {
  from { opacity: 0; translate: -34px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-side-in-right {
  from { opacity: 0; translate: 34px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fp-core-in {
  from { opacity: 0; scale: 0.7; }
  60% { opacity: 1; }
  to { opacity: 1; scale: 1; }
}
@keyframes fp-breathe {
  0%, 100% { scale: 0.985; }
  50% { scale: 1.025; }
}
@keyframes fp-spin-slow {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes fp-twinkle {
  0%, 100% { opacity: 0.22; }
  45% { opacity: 0.55; }
  60% { opacity: 0.32; }
}
@keyframes fp-shell-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fp-stage-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-diamond-in {
  from { opacity: 0; transform: scale(0) rotate(0deg); }
  to { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes fp-board-sweep {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(440%); }
}
@keyframes fp-arrow {
  0%, 100% { translate: 0 0; opacity: 0.45; }
  50% { translate: 3px 0; opacity: 0.9; }
}
@keyframes fp-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(134, 234, 255, 0.4); }
  45% { box-shadow: 0 0 0 5px rgba(134, 234, 255, 0); }
}
@keyframes fp-node-pop {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}
@keyframes fp-text-glow {
  0%, 100% { text-shadow: none; }
  45% { text-shadow: 0 0 16px rgba(239, 208, 160, 0.8); }
}
@keyframes fp-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px 0; }
}
@keyframes fp-warn-flash {
  0%, 100% { text-shadow: none; }
  30% { text-shadow: 0 0 16px rgba(255, 161, 126, 0.85); }
}
@keyframes fp-code-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-screen-in {
  from { opacity: 0.35; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-line-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-user-in {
  from { opacity: 0; translate: -12px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-think-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-answer-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-card-in {
  from { opacity: 0; translate: 0 12px; scale: 0.995; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes fp-plan-in {
  from { opacity: 0; translate: 0 16px; scale: 0.99; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes fp-approval-in {
  from { opacity: 0; translate: 0 18px; scale: 0.98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes fp-note-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fp-prompt {
  from { opacity: 0; translate: -6px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-think-dot {
  0%, 100% { opacity: 0.35; scale: 0.85; }
  50% { opacity: 1; scale: 1.15; }
}
@keyframes fp-md-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes fp-scan {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: 1; }
  85% { opacity: 0.7; }
  100% { opacity: 0; translate: 0 260px; }
}
@keyframes fp-tool-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 154, 134, 0); }
  45% { box-shadow: 0 0 0 4px rgba(255, 154, 134, 0.28); }
}
@keyframes fp-plan-row {
  from { opacity: 0; translate: -8px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-row-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-rise-sm {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-blue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 71, 255, 0.4); }
  50% { box-shadow: 0 0 0 7px rgba(36, 71, 255, 0); }
}
@keyframes fp-pop {
  0% { scale: 0.2; }
  70% { scale: 1.35; }
  100% { scale: 1; }
}
@keyframes fp-shimmer {
  from { transform: translateX(-120%); }
  to { transform: translateX(320%); }
}
@keyframes fp-verdict {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-unfold {
  from { opacity: 0; translate: 0 -4px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-hazard {
  from { background-position: 0 0; }
  to { background-position: 36px 0; }
}
@keyframes fp-amber-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 162, 43, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(234, 162, 43, 0); }
}
@keyframes fp-warn-icon {
  0%, 100% { scale: 1; }
  50% { scale: 1.12; }
}
@keyframes fp-reject-in {
  0% { opacity: 0; translate: 0 10px; }
  35% { opacity: 1; translate: -5px 0; }
  55% { translate: 4px 0; }
  75% { translate: -2px 0; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes fp-approve-in {
  from { opacity: 0; scale: 0.97; translate: 0 10px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes fp-check {
  0% { opacity: 0; scale: 0.2; rotate: -30deg; }
  65% { opacity: 1; scale: 1.18; rotate: 4deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes fp-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fp-count {
  0%, 100% { scale: 1; color: inherit; }
  45% { scale: 1.25; color: var(--fp-cyan); }
}
@keyframes fp-trace-in {
  from { opacity: 0; translate: 8px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fp-phase {
  0%, 100% { text-shadow: none; }
  35% { text-shadow: 0 0 14px rgba(169, 230, 182, 0.85); }
}
@keyframes fp-text-change {
  0%, 100% { color: #8fd3e8; }
  40% { color: var(--fp-cyan); text-shadow: 0 0 12px rgba(134, 234, 255, 0.6); }
}
@keyframes fp-chip {
  0% { scale: 0.9; }
  60% { scale: 1.06; }
  100% { scale: 1; }
}
@keyframes fp-ctx-bar {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 10px rgba(134, 234, 255, 0.9); }
}
@keyframes fp-mission-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(134, 234, 255, 0.45), 0 0 9px rgba(134, 234, 255, 0.7); }
  50% { box-shadow: 0 0 0 5px rgba(134, 234, 255, 0), 0 0 9px rgba(134, 234, 255, 0.7); }
}
@keyframes fp-palette {
  from { opacity: 0; translate: 0 8px; scale: 0.99; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes fp-palette-item {
  from { translate: -4px 0; }
  to { translate: 0 0; }
}
@keyframes fp-toast-life {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ---------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .fp-progress { display: none; }
  .fp-reveal { opacity: 1; translate: 0 0; transition: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}