feat: Doing more polishing (M8b)

web/css/anim.css

@@ -0,0 +1,83 @@
+/* Motion: papers landing on the desk, stamps, the dial, page turns. All of it is skipped for people
+   who ask for reduced motion (see the media query at the bottom). */
+
+/* Papers are dealt onto the desk when a game starts */
+@keyframes deal {
+  from { opacity: 0; transform: translateY(-28px) rotate(calc(var(--rot, 0deg) - 3deg)); }
+  to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
+}
+#pad.is-dealing #dashboard { animation: deal 0.55s ease-out both; }
+#pad.is-dealing #folder { animation: deal 0.55s 0.12s ease-out both; }
+#pad.is-dealing #calendar { animation: deal 0.55s 0.24s ease-out both; }
+#pad.is-dealing #newspaper { animation: deal 0.55s 0.36s ease-out both; }
+
+/* A proposal arrives in the tray, is stamped, and slides away */
+@keyframes card-in {
+  from { opacity: 0; transform: translateY(22px) rotate(0.8deg); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes card-out {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: translateX(70%) rotate(7deg); }
+}
+@keyframes bump {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.35); }
+  100% { transform: scale(1); }
+}
+.card--enter { animation: card-in 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
+.card--leave { animation: card-out 0.32s ease-in forwards; }
+.inbox__count.is-bump { animation: bump 0.45s ease-out; }
+
+/* The calendar page flips when the day changes; the dial hand turns smoothly (set per frame) */
+@keyframes day-flip {
+  from { opacity: 0.2; transform: perspective(200px) rotateX(-65deg); }
+  to { opacity: 1; transform: perspective(200px) rotateX(0); }
+}
+.cal__day.is-flip { animation: day-flip 0.35s ease-out; transform-origin: 50% 0; }
+
+/* Indicator values flash when they move */
+@keyframes flash-up { 0% { color: var(--ink-green); } 100% { color: inherit; } }
+@keyframes flash-down { 0% { color: var(--ink-red); } 100% { color: inherit; } }
+.gauge__value.is-up { animation: flash-up 1.4s ease-out; }
+.gauge__value.is-down { animation: flash-down 1.4s ease-out; }
+
+/* Newspaper: fresh headlines fade up */
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: none; }
+}
+.paper--news.is-fresh .news__lead { animation: fade-up 0.5s ease-out both; }
+.paper--news.is-fresh .news__side article { animation: fade-up 0.5s 0.15s ease-out both; }
+
+/* The ledger opens like a book; the menu folder and the end front page rise into place */
+@keyframes book-open {
+  from { opacity: 0; transform: perspective(900px) translateY(24px) rotateX(10deg); }
+  to { opacity: 1; transform: none; }
+}
+.ledger__book { animation: book-open 0.45s ease-out both; transform-origin: 50% 100%; }
+@keyframes rise {
+  from { opacity: 0; transform: translateY(18px); }
+  to { opacity: 1; transform: none; }
+}
+.menu__folder { animation: rise 0.4s ease-out both; }
+.end__page, #endgame > * { animation: rise 0.6s ease-out both; }
+
+/* Brass buttons and stamp buttons answer the finger */
+.brass { transition: transform 0.08s, filter 0.15s, box-shadow 0.15s; }
+.stamp-btn { transition: background 0.15s, transform 0.08s; }
+.stamp-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
+
+/* The danger "Hold on power" line pulses when it is critical */
+@keyframes pulse { 50% { opacity: 0.45; } }
+.intel li[data-level="3"] b, .intel li[data-level="4"] b { animation: pulse 1.6s ease-in-out infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  #pad.is-dealing .paper,
+  .card--enter, .card--leave, .inbox__count.is-bump, .cal__day.is-flip,
+  .gauge__value.is-up, .gauge__value.is-down,
+  .paper--news.is-fresh .news__lead, .paper--news.is-fresh .news__side article,
+  .ledger__book, .menu__folder, .end__page, #endgame > *,
+  .intel li b { animation: none !important; }
+  .card--leave { opacity: 0; }
+}