/* Motion language shared by landing, cabinet and verify pages (docs/design/motion-showcase.html).
   Every animation shows a real product moment; all of it is off under prefers-reduced-motion. */
:root { --hp-ease: cubic-bezier(.2,.8,.2,1); }

/* ---------- Press feedback on buttons ---------- */
.press { transition: transform 150ms var(--hp-ease); }
.press:not(:disabled):active { transform: scale(.97); }

/* Stagger index (inline style attributes are blocked by the CSP) */
.hp-i0 { --i: 0; } .hp-i1 { --i: 1; } .hp-i2 { --i: 2; } .hp-i3 { --i: 3; } .hp-i4 { --i: 4; }

/* ---------- A: the hero document assembles itself (landing.js adds .play) ---------- */
.doc-sheet { font-family: "Times New Roman", Tinos, Times, serif; }
.doc-sheet .caret { display: inline-block; width: 1px; height: 1.05em; background: #1e3a8a; vertical-align: -2px; margin-left: 1px; opacity: 0; }
.doc-sheet.play .caret { animation: hp-blink .8s steps(1) 6; }
.doc-sheet.play .hp-rise { animation: hp-rise 400ms var(--hp-ease) both; animation-delay: calc(var(--i) * 260ms + 700ms); }
.doc-sheet.play .hp-row { animation: hp-row 250ms var(--hp-ease) both; animation-delay: calc(var(--i) * 140ms + 2000ms); }
.doc-sheet.play .hp-glow td { animation: hp-glow 1.2s var(--hp-ease) 2600ms both; }
.doc-sheet .hp-sheen { position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 40%, rgba(37,99,235,.08) 50%, transparent 60%); }
.doc-sheet.play .hp-sheen { animation: hp-sheen 1.4s var(--hp-ease) 3.2s both; }
.doc-sheet.play .hp-seal { animation: hp-stamp 520ms cubic-bezier(.3,1.6,.5,1) 3000ms both; }

@keyframes hp-blink { 50% { opacity: 1; } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
@keyframes hp-row { from { opacity: 0; transform: translateX(-12px); } }
@keyframes hp-glow { 35% { background: rgba(37,99,235,.14); } }
@keyframes hp-sheen { to { transform: translateX(100%); } }

/* ---------- C: E-IMZO seal after a successful signature (eimzo.js) ---------- */
.hp-seal { color: #1d4ed8; transform: rotate(-8deg); opacity: .9; }
.hp-seal circle, .hp-seal path { fill: none; stroke: currentColor; }
.hp-seal text { fill: currentColor; font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-weight: 800; }
.hp-sig path { fill: none; stroke: #1e3a8a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; }
.sign-done .hp-sig path { animation: hp-draw 1300ms cubic-bezier(.5,.1,.3,1) 150ms both; }
.sign-done .hp-seal { animation: hp-stamp 520ms cubic-bezier(.3,1.6,.5,1) 1400ms both; }
.sign-done .hp-hash { animation: hp-rise 400ms var(--hp-ease) 1900ms both; }
@keyframes hp-draw { from { stroke-dashoffset: 520; } }
@keyframes hp-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-18deg); } 60% { opacity: .95; } 100% { opacity: .9; transform: scale(1) rotate(-8deg); } }

/* ---------- E: rolling digits for money totals (HP_MOTION.odometer) ---------- */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo .d { height: 1.2em; overflow: hidden; display: inline-block; }
.odo .d > span { display: flex; flex-direction: column; transition: transform 600ms var(--hp-ease); }
.odo .d > span > span { height: 1.2em; line-height: 1.2em; }
.odo .sp { width: .3em; }

/* Button that turns into a "done" state after an action */
.btn-done { background: #059669 !important; }
.btn-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: hp-spin .7s linear infinite; display: inline-block; }
.btn-check path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; animation: hp-check 380ms var(--hp-ease) both; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@keyframes hp-check { from { stroke-dashoffset: 30; } }

@media (prefers-reduced-motion: reduce) {
    .doc-sheet *, .sign-done *, .odo .d > span, .press, .btn-check path { animation: none !important; transition: none !important; }
    .doc-sheet.play .hp-seal, .sign-done .hp-seal { animation: none !important; }
}