/* Hero film: one bill, from the inbox to approval. Ported from the Claude Design canvas (C3-film), same timings. */
@keyframes xin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xin{animation:xin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rowin{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.rowin{animation:rowin .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes hl{from{background-color:rgba(255,226,140,0)}to{background-color:rgba(255,226,140,.75)}}
@keyframes sweep{from{transform:translateY(-70px);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(610px);opacity:0}}
.sweep{animation:sweep .9s cubic-bezier(.45,0,.55,1) both}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes press{0%{transform:scale(1)}35%{transform:scale(.82)}100%{transform:scale(1)}}
.press{animation:press .45s ease both}
@keyframes skelin{from{opacity:0}to{opacity:1}}
.skelin{animation:skelin .2s ease .05s both}
@keyframes chipout{from{opacity:1}to{opacity:0}}
.chipout{animation:chipout .22s ease both}
@keyframes docin{from{opacity:0}to{opacity:1}}
@keyframes docclip{from{clip-path:inset(153px 191px 411px 36px round 8px)}to{clip-path:inset(0 0 0 0 round 3px)}}
.docin{animation:docclip .85s cubic-bezier(.4,0,.2,1) both, docin .45s cubic-bezier(.4,0,.2,1) .32s both}
@keyframes fillin{0%{opacity:0;background-color:rgba(255,226,140,.75)}20%{opacity:1;background-color:rgba(255,226,140,.75)}100%{opacity:1;background-color:rgba(255,226,140,0)}}
.fillin{animation:fillin 1.8s ease both}
@keyframes consider{0%{background-color:rgba(238,225,205,0)}35%{background-color:rgba(238,225,205,1)}100%{background-color:rgba(238,225,205,0)}}
.consider{animation:consider 1.1s ease both}
@keyframes slotfill{0%,80%{border-color:#BDA291}100%{border-color:rgba(189,162,145,0)}}
.slotfill{animation:slotfill 1.6s ease both}
@keyframes feedin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.feedin{animation:feedin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes liftmorph{0%,62%{background-color:#FFFFFF;border-color:#291F18}80%{background-color:rgba(255,226,140,.75);border-color:rgba(41,31,24,0)}100%{background-color:rgba(255,226,140,0);border-color:rgba(41,31,24,0)}}
.liftmorph{animation:liftmorph 1.9s ease both}
@keyframes bankfade{0%,62%{opacity:1}78%{opacity:0}100%{opacity:0}}
.bankfade{animation:bankfade 1.9s ease both}
@keyframes ledgerin{0%,64%{opacity:0}82%{opacity:1}100%{opacity:1}}
.ledgerin{animation:ledgerin 1.9s ease both}
.chipsel{border-color:#291F18 !important;background:#EBE0CF !important}

.film { position: relative; }
.film-desk { overflow: hidden; border-radius: 16px; }
.film-scaler { position: relative; border-radius: 16px; overflow: hidden; background: #DFCFB4; }
.film-stage:not(.ready) { visibility: hidden; }
.film-stage { position: absolute; left: 0; top: 0; width: 1184px; height: 666px; transform-origin: 0 0; background: #DFCFB4; color: #211914; font-family: var(--font-sans); overflow: hidden; transition: opacity .45s ease; }
.film-stage .mono { font-family: var(--font-mono); }
.film-stage .inv { font-family: Inter, 'IBM Plex Sans', system-ui, sans-serif; }

/* Phone film: four scenes in one card, played once */
.film-phone { display: none; }
@media (max-width: 760px) {
  .film-desk { display: none; }
  .film-phone { display: flex; flex-direction: column; gap: 12px; }
}
.fp-stage { display: grid; border-radius: 12px; }
.fp-scene { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.fp-scene.on { opacity: 1; transform: none; }
.fp-note { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; }
.fp-steps { display: flex; gap: 6px; }
.fp-steps span { flex: 1; height: 3px; border-radius: 2px; background: #BDA291; transition: background .4s; }
.fp-steps span.on { background: #291F18; }
.fp-card { background: #FFFFFF; border: 1px solid #E0D2C1; border-radius: 12px; overflow: hidden; }
.fp-bar { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #291F18; }
.fp-bar .label { color: #DFCFB4; }
.fp-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 20px; }
.agents { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px; background: #291F18; color: #DFCFB4; font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  .xin,.rowin,.sweep,.pulse,.press,.skelin,.chipout,.docin,.fillin,.consider,.slotfill,.feedin,.liftmorph,.bankfade,.ledgerin{animation:none}
  .fp-scene { transition: none; }
}