/* A choreographed action scene, with independently animated character regions. */
.mascot-story{--story-time:0;--scan-x:0;--scan-alpha:0;--complete:0;--file-alpha:0;--file-travel:0;--bell-alpha:0;--bell-angle:0deg;--bell-scale:.8;--notification:0;--notification-y:20px}
.hero-scene .mascot-motion{width:390px;height:390px;left:-64px;top:125px;transform:none;transition:none}
.mascot-story .hero-mascot{animation:none;filter:none}
.story-fallback{position:absolute;inset:0;object-fit:contain;width:100%;height:100%}
.bindy-action{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0}
.mascot-story.is-ready .bindy-action{opacity:1}
.mascot-story.is-ready .story-fallback{visibility:hidden}
.mascot-story .mascot-shadow{bottom:25px;width:64%;left:18%;animation:none;opacity:.6}
.scan-light{position:absolute;z-index:3;left:24%;top:48%;width:37%;height:39%;background:linear-gradient(160deg,#b5eac828,#9ee3b535);clip-path:polygon(9% 0,33% 0,100% 100%,0 100%);opacity:var(--scan-alpha);transform:translateX(calc(var(--scan-x)*1px));pointer-events:none;mix-blend-mode:screen}
.paper-scan{position:absolute;z-index:4;left:29%;top:77%;width:42%;height:11%;transform:rotate(-6deg) skewX(-24deg);opacity:var(--scan-alpha);border:1px solid #87cf9c80;border-radius:2px;overflow:hidden;box-shadow:0 0 12px #a2e5a83b}
.paper-scan>span{position:absolute;width:100%;left:0;height:2px;top:calc(10% + var(--scan-line)*75%);background:#9cddac;box-shadow:0 0 9px #e6ffdf}
.filing-sheet{position:absolute;z-index:5;left:39%;top:72%;height:18%;width:15%;border:1px solid #d9ddc9;background:#fffff5;border-radius:4px;box-shadow:0 4px 14px #304f3c15;display:grid;place-items:center;opacity:var(--file-alpha);transform:translate(calc(var(--file-travel)*110px),calc(var(--file-travel)*20px)) rotate(calc(-8deg + var(--file-travel)*24deg)) scale(calc(1 - var(--file-travel)*.55));transform-origin:bottom center}
.filing-sheet svg{width:40%;height:40%;stroke-width:1.3;color:#9fae8d}
.scan-complete{position:absolute;z-index:5;left:37%;top:70%;width:38px;height:38px;border-radius:50%;background:#f3f8e9;box-shadow:0 4px 18px #244d3c25;display:grid;place-items:center;color:#688957;opacity:var(--complete);transform:scale(calc(.65 + var(--complete)*.35)) translateY(calc((1 - var(--complete))*12px))}
.scan-complete svg{width:23px;height:23px}
.reminder-bell{position:absolute;z-index:5;left:19%;top:34%;width:50px;height:50px;background:#f4e5c9;border:1px solid #ebd7b3;border-radius:15px;display:grid;place-items:center;color:#a88242;box-shadow:0 6px 17px #34513212;opacity:var(--bell-alpha);transform:scale(var(--bell-scale)) rotate(var(--bell-angle));transform-origin:50% 0}
.reminder-bell svg{width:26px;height:26px}.reminder-bell i{position:absolute;border:1px solid #b7a079;border-radius:50%;width:68px;height:68px;opacity:.4}.reminder-bell i:last-child{width:83px;height:83px;opacity:.2}
.hero-scene .note-top{transition:opacity .35s,transform .5s;min-width:165px}
.hero-scene .note-top .note-icon{transition:background .3s,color .3s}
.hero-scene[data-phase=scan] .note-top .note-icon{background:#e8efe2;color:#7d9971}
.hero-scene[data-phase=file] .note-top .note-icon{background:#e0ecd4;color:#5e8450}
.hero-scene .phone-wrap{animation:none;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hero-scene[data-phase=remind] .phone-wrap{transform:rotate(5deg) translateY(-5px)}
.story-notification{position:absolute;right:1px;top:116px;width:244px;padding:13px;z-index:7;display:flex;gap:10px;background:#fffffff5;border:1px solid #e1e8d8;backdrop-filter:blur(12px);box-shadow:0 12px 25px #203f3120;border-radius:13px;opacity:0;transform:translateY(20px) scale(.95);pointer-events:none}
.story-notification .mini-app-icon{width:31px;height:31px;border-radius:8px}.story-notification .mini-app-icon svg{height:19px;width:19px}.story-notification>div{flex:1}.story-notification small{display:block;font-size:7px;letter-spacing:.5px;color:#8a967e;margin-bottom:6px}.story-notification small span{float:right;letter-spacing:0}.story-notification strong{font-size:11px;display:block}.story-notification p{font-size:9px;color:#7c8873;margin-top:4px}
.story-toolbar{position:absolute;left:0;right:0;bottom:-6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;z-index:8;justify-content:center}
.story-chapters{display:flex;align-items:center;gap:9px}.story-chapters button{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:8px 0;font-size:10px;color:#94a185;transition:color .3s}.story-chapters button span{width:19px;height:19px;border-radius:50%;background:#ecf0e4;display:grid;place-items:center;font-size:7px;transition:background .3s}.story-chapters button[aria-pressed=true]{color:#31563f}.story-chapters button[aria-pressed=true] span{background:#dce8ce;color:#5e7950}.chapter-line{width:15px;height:1px;background:#d6dfcb}.story-toggle,.story-replay{background:#edf1e6;color:#718568;border:1px solid #dce5d1;border-radius:50%;height:25px;width:25px;padding:0;display:grid;place-items:center;font-size:10px;margin-left:2px}.story-replay{font-size:16px;margin-left:0}.story-progress{width:220px;height:2px;background:#e1e8d7;flex-basis:220px;border-radius:2px;overflow:hidden;margin-top:2px}.story-progress>span{width:0%;display:block;height:100%;background:#93aa7a}
.story-feature{width:100%;height:365px;position:relative;align-self:center;--scan-x:0;--scan-alpha:0;--scan-line:0;--complete:0;--file-alpha:0;--file-travel:0;--bell-alpha:0;--bell-angle:0deg;--bell-scale:.8}
.story-feature .bindy-action,.story-feature .story-fallback{width:365px;height:365px;left:50%;transform:translateX(-50%)}
.story-feature .scene-effects{position:absolute;width:365px;height:365px;left:50%;transform:translateX(-50%);top:0}
.workflow-visual.has-character{display:block;min-height:390px;overflow:hidden;background:#eaf0e2}
.workflow-visual.has-character>.scan-corner,.workflow-visual.has-character>.demo-paper{display:none}
.workflow-visual.has-character>.workflow-toast{bottom:28px;right:20px;z-index:6;transform:rotate(2deg);padding:10px 13px}
.workflow-visual.has-character>.visual-demo-label{width:100%;text-align:center;bottom:9px;font-size:7px}
@media(max-width:1100px){.hero-scene .mascot-motion{width:330px;height:330px;left:-37px;top:156px}.story-notification{width:214px;right:-5px;top:116px}.story-chapters{gap:6px}.chapter-line{width:11px}.story-toolbar{gap:5px;bottom:-6px}.story-feature,.story-feature .scene-effects,.story-feature .bindy-action,.story-feature .story-fallback{width:330px;height:330px}.story-feature{width:100%}.workflow-visual.has-character{min-height:360px}}
@media(max-width:800px){.hero-scene .mascot-motion{width:289px;height:289px;left:-31px;top:143px}.story-toolbar{left:-20px;right:-5px;bottom:-18px}.story-notification{width:192px;right:-3px;top:124px;padding:10px}.story-notification strong{font-size:10px}.story-notification p{font-size:8px}.story-feature,.story-feature .scene-effects,.story-feature .bindy-action,.story-feature .story-fallback{width:285px;height:285px}.story-feature{width:100%}.workflow-visual.has-character{min-height:320px}}
@media(max-width:700px){.hero-scene{height:471px;margin-bottom:13px}.hero-scene .mascot-motion{width:304px;height:304px;left:-18px;top:117px}.hero-scene .phone-wrap{top:1px}.hero-scene .note-bottom{bottom:56px;right:0}.story-toolbar{left:0;right:0;bottom:-9px;gap:8px}.story-chapters{gap:8px}.chapter-line{width:13px}.story-notification{width:216px;right:1px;top:92px}.story-feature,.story-feature .scene-effects,.story-feature .bindy-action,.story-feature .story-fallback{width:330px;height:330px}.story-feature{width:100%}.workflow-visual.has-character{min-height:365px}}
@media(prefers-reduced-motion:reduce){.scan-light,.paper-scan,.filing-sheet,.reminder-bell,.scan-complete{display:none}.story-toolbar{display:none}.story-notification{display:none}}