/* ---------------------------------------------------------------------------
   Peltify — motion. One system, used by every surface (2026-08-26).

   The rule: containers do not move; the things inside them arrive. A card is
   still; its rows rise in, top to bottom, left to right, and they arrive
   square — no overshoot, no scale.
   Every animation here respects prefers-reduced-motion via tokens.css.

   TIGHTENED 2026-08-28 (Nick: "too childish and bubbly … should feel more
   concrete … Strong. Bold and professional."). Entrances translate only — the
   scale-up bounce that made every list read as a toy is gone — and the popup
   scrim no longer frosts what is behind it, because a blur is the one effect
   that says "AI demo" before a word is read.

   USE: add `.rise` to any element and `style="--i: n"` (or data-i) for its
   place in the stagger. `.rise-grid > *` staggers children automatically.
   --------------------------------------------------------------------------- */

:root {
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --soft: cubic-bezier(0.22, 0.68, 0.35, 1);
  --stagger: 55ms;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ring-draw {
  from { stroke-dashoffset: var(--ring-len, 400); }
  to   { stroke-dashoffset: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 31, 209, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(139, 31, 209, 0); }
}
@keyframes tick-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* GATED ON `.is-fresh` (set by the shell for ~1.8s after a view is entered).
   Outside that window a `.rise` element is simply visible: repaints inside a
   view never replay the entrance, so nothing stutters or re-cycles. */
.rise { opacity: 1; transform: none; }
.is-fresh .rise { animation: rise-in 420ms var(--soft) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.pop  { animation: pop-in 360ms var(--bounce) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.fade { animation: fade-in 320ms var(--soft) both; }

/* Children stagger themselves: the first ten get an increasing delay. */
.is-fresh .rise-grid > * { animation: rise-in 420ms var(--soft) both; }
.rise-grid > :nth-child(1)  { animation-delay: 0ms; }
.rise-grid > :nth-child(2)  { animation-delay: 55ms; }
.rise-grid > :nth-child(3)  { animation-delay: 110ms; }
.rise-grid > :nth-child(4)  { animation-delay: 165ms; }
.rise-grid > :nth-child(5)  { animation-delay: 220ms; }
.rise-grid > :nth-child(6)  { animation-delay: 275ms; }
.rise-grid > :nth-child(7)  { animation-delay: 330ms; }
.rise-grid > :nth-child(8)  { animation-delay: 385ms; }
.rise-grid > :nth-child(9)  { animation-delay: 440ms; }
.rise-grid > :nth-child(10) { animation-delay: 495ms; }
.rise-grid > :nth-child(n+11) { animation-delay: 540ms; }

/* Bars and rings grow from their origin. */
.grow-x { transform-origin: left center; animation: bar-grow 700ms var(--soft) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* A spinner that becomes a tick. `.is-done .spin` swaps to the tick animation. */
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
        border: 2px solid var(--line-strong); border-top-color: var(--violet);
        animation: spin 800ms linear infinite; flex: none; }
.tick { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-box);
        background: var(--ok); color: #fff; animation: tick-pop 420ms var(--bounce) both; flex: none; }
.tick svg { width: 10px; height: 10px; }

/* The popup layer: a scrim that fades and a panel that rises. */
.pop-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
             padding: 20px; background: rgba(20, 12, 30, 0.52);
             animation: fade-in 220ms var(--soft) both; }
.pop-scrim.is-out { animation: fade-out 180ms var(--soft) both; }
.pop-panel { width: min(720px, 100%); max-height: min(86vh, 900px); overflow: auto;
             border-radius: var(--r-box); border: 1px solid var(--line-strong);
             background: var(--white); box-shadow: var(--raise-hi);
             animation: sheet-in 300ms var(--soft) both; }
.pop-scrim.is-out .pop-panel { animation: fade-out 180ms var(--soft) both; }

/* Hover lift for any interactive card. */
.lift { transition: transform 180ms var(--soft), box-shadow 180ms var(--soft), border-color 180ms var(--soft); }
.lift:hover { transform: translateY(-2px); box-shadow: var(--raise); }
.lift:active { transform: translateY(0) scale(0.995); }

/* The purple "in memory" glow the profile builder uses. */
.glow-mem { box-shadow: 0 0 0 2px rgba(139, 31, 209, 0.55), 0 0 22px rgba(139, 31, 209, 0.45); border-color: var(--violet) !important; }
.dotted-new { border: 1.5px dashed var(--line-strong) !important; }