/* The motion of the public site, in one place.
   Timing: 120 to 200 ms for feedback (hover, press, focus), 250 to 450 ms for a part of a screen changing, 600 to 1200 ms for a sequence that explains something.
   Easing: ease-out for things arriving, ease-in-out for things moving across, a small overshoot only for a status stamp.
   Each kind of motion has one job:
     wipe   a section headline is drawn along the reading direction, then the gold double rule under it
     land   a ledger line or list item settles into its place from the side where reading starts
     draw   a line or path that links two records is drawn from one to the other
     swap   a number or a status changes: the old one leaves upward, the new one arrives from below
     stamp  a status is set (Issued, Paid, Approved) with a short overshoot
   Everything is finished and visible without scripts. The hidden first frames below apply only while html has class anim (set by boot.js),
   and html loses that class if scripts do not start, or when the visitor asks for reduced motion. */

:root { --rule-w: 46px; }

/* ----- wipe: headline, then the double rule (the "=" of the Hisabra mark) ----- */
.rule { display: block; width: var(--rule-w); height: 7px; margin: 0 0 22px; background: linear-gradient(var(--gold) 0 2px, transparent 2px 5px, var(--gold) 5px 7px); transform-origin: left center; }
:root[dir="rtl"] .rule { transform-origin: right center; }
.wipe { clip-path: inset(-.4em -.2em -.4em -.2em); transition: clip-path 560ms var(--e-out); }
html.anim .wipe:not(.is-in) { clip-path: inset(-.4em 102% -.4em -.2em); }
html.anim[dir="rtl"] .wipe:not(.is-in) { clip-path: inset(-.4em -.2em -.4em 102%); }
html.anim .rule { transition: transform 480ms var(--e-out) 240ms; }
html.anim .rule:not(.is-in) { transform: scaleX(0); }

/* ----- land: items settle one after the other ----- */
.land { transition: opacity var(--d-comp) var(--e-out), transform var(--d-comp) var(--e-out); transition-delay: calc(var(--i, 0) * 45ms); }
html.anim .land:not(.is-in) { opacity: 0; transform: translateX(calc(-14px * var(--dir))); }

/* ----- draw: a path that links two records ----- */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--e-io); transition-delay: calc(var(--i, 0) * 160ms); }
html.anim .draw:not(.is-in) { stroke-dashoffset: 1; }

/* ----- swap: a changing number or status ----- */
@keyframes swap-out { to { opacity: 0; transform: translateY(-.5em); } }
@keyframes swap-in { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
.swap-out { animation: swap-out 140ms ease-in both; }
.swap-in { animation: swap-in var(--d-comp) var(--e-out) both; }

/* ----- stamp: a status is set ----- */
@keyframes stamp { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.stamp-in { animation: stamp 420ms var(--e-pop) both; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(233, 180, 76, .75); } 100% { box-shadow: 0 0 0 12px rgba(233, 180, 76, 0); } }
.ring { animation: ring 700ms var(--e-out) both; }
@keyframes flash { 0% { background-size: 0 100%; } 100% { background-size: 100% 100%; } }
.flash { background: linear-gradient(rgba(233, 180, 76, .45), rgba(233, 180, 76, .45)) left / 0 100% no-repeat; animation: flash 520ms var(--e-out) forwards; }

/* ----- microinteractions: feedback in 120 to 200 ms. Nothing moves away from the pointer. ----- */
.btn { transition: background var(--d-fb) linear, color var(--d-fb) linear, border-color var(--d-fb) linear, box-shadow var(--d-fb) linear, transform 120ms var(--e-out); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus); outline: none; }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: 17.5px; }
.lnk { background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size var(--d-comp) var(--e-out); padding-bottom: 2px; text-decoration: none; }
:root[dir="rtl"] .lnk { background-position: right bottom; }
.lnk:hover, .lnk:focus-visible { background-size: 100% 1.5px; text-decoration: none; }
.lnk .arr { transition: transform var(--d-fb) var(--e-out); } .lnk:hover .arr { transform: translateX(calc(3px * var(--dir))); } :root[dir="rtl"] .lnk:hover .arr { transform: scaleX(-1) translateX(3px); }
.seg button { transition: background var(--d-fb) linear, color var(--d-fb) linear; }
details > summary { transition: color var(--d-fb) linear; }

/* ----- motion that continues is always under the visitor's control; a still page is a complete page ----- */
.ctl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 14.5px/1 var(--f-text); cursor: pointer; transition: background var(--d-fb) linear, border-color var(--d-fb) linear; }
.ctl-btn:hover { background: var(--paper); border-color: var(--ink); }
.ctl-btn .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.ctl-btn .i-play { display: none; } .ctl-btn[data-mode="play"] .i-pause, .ctl-btn[data-mode="replay"] .i-pause { display: none; } .ctl-btn[data-mode="play"] .i-play { display: inline; }
.ctl-btn .i-replay { display: none; } .ctl-btn[data-mode="replay"] .i-replay { display: inline; }

html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
html.no-motion .wipe, html.no-motion .land, html.no-motion .draw, html.no-motion .rule { clip-path: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }