/* =========================================================== THE MIN - motion.css Reusable animated "scenes" that replace flat icons. Pure CSS + inline SVG. Transform/opacity only (GPU-friendly). HOW TO USE ---------- Drop a scene block at the top of a .card (in place of the old .ic): The shared .scene frame handles the size, rounding and backdrop. Each s-* class adds its own animated contents. RESTING STATE ------------- Every scene's *base* (un-animated) look is already a finished, populated illustration. The keyframes only add life on top, so the global prefers-reduced-motion rule (which freezes animation) leaves a clean static picture - nothing disappears. =========================================================== */ /* shared frame ------------------------------------------------ */ .scene{ position:relative;height:154px;margin-bottom:22px;border-radius:14px;overflow:hidden; background:linear-gradient(158deg,#fdfdfb 0%,var(--paper-2) 60%,#e8e4da 100%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } /* a soft brand glow in the corner of every scene */ .scene::after{content:"";position:absolute;top:-46%;right:-30%;width:70%;height:90%; background:radial-gradient(closest-side,rgba(37,244,238,.20),transparent);pointer-events:none} .card:hover .scene{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} /* tiny shared bits */ .scene .ic-s{width:15px;height:15px;flex:none;color:var(--accent)} .scene .tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%; background:var(--accent);color:#fff;font-size:11px;font-weight:900;line-height:1;flex:none} /* =========================================================== 1 · CALENDAR - a slot being scheduled =========================================================== */ .s-cal{padding:14px 16px} .s-cal .cal-bar{display:flex;align-items:center;gap:7px;margin-bottom:9px} .s-cal .cal-bar b{font-size:12px;font-weight:800;letter-spacing:-.01em;color:var(--ink)} .s-cal .cal-bar i{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block} .s-cal .cal-bar i.on{background:var(--accent)} .s-cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .s-cal .grid span{aspect-ratio:1;border-radius:4px;background:#fff;border:1px solid var(--line)} /* a few days already busy (resting state) */ .s-cal .grid span:nth-child(4), .s-cal .grid span:nth-child(9), .s-cal .grid span:nth-child(15){background:#e3efe9;border-color:#cde6db} /* the slot that gets booked, with pulse */ .s-cal .grid span.book{background:var(--accent);border-color:var(--accent);animation:calBook 6s ease-in-out infinite} @keyframes calBook{0%,18%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,58,237,.0)} 28%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(124,58,237,.18)} 40%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,58,237,0)}} /* event chip that drops into the slot */ .s-cal .chip{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:7px; background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:8px; box-shadow:var(--shadow);animation:calChip 6s ease-in-out infinite} .s-cal .chip .tick{width:15px;height:15px;background:var(--accent-bright);color:var(--ink)} @keyframes calChip{0%{opacity:0;transform:translateY(10px) scale(.92)} 22%{opacity:0;transform:translateY(10px) scale(.92)} 36%,86%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(6px) scale(.96)}} /* =========================================================== 2 · TRAVEL - itinerary auto-scrolls, plane traces the route =========================================================== */ .s-trip{display:flex;flex-direction:column} .s-trip .sky{position:relative;height:40px;flex:none;border-bottom:1px dashed var(--line)} .s-trip .route{position:absolute;left:14px;right:14px;top:21px;height:2px; background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.5} .s-trip .plane{position:absolute;top:11px;left:0;color:var(--accent);animation:tripFly 7s ease-in-out infinite} .s-trip .plane svg{width:20px;height:20px;display:block;transform:rotate(45deg)} @keyframes tripFly{0%{left:6px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 26px);opacity:0}} .s-trip .win{position:relative;flex:1;overflow:hidden; -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent); mask:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent)} .s-trip .list{position:absolute;left:0;right:0;top:0;padding:0 14px;animation:tripScroll 11s linear infinite} .s-trip .row{display:flex;align-items:center;gap:9px;height:34px;font-size:12px;font-weight:700;color:var(--ink-2)} .s-trip .row .dot{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none; background:#e3efe9;color:var(--accent)} .s-trip .row .dot svg{width:14px;height:14px} .s-trip .row small{margin-left:auto;font-weight:600;color:var(--muted)} @keyframes tripScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} /* =========================================================== 3 · EXPENSES - receipt reconciles, "paid" stamp pops =========================================================== */ .s-exp{padding:16px} .s-exp .rcpt{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px; box-shadow:0 6px 16px rgba(17,19,18,.06)} .s-exp .ln{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .s-exp .ln .l{height:7px;border-radius:4px;background:var(--line)} .s-exp .ln .a{height:7px;border-radius:4px;background:var(--accent);transform-origin:right;animation:expFill 5.5s ease-in-out infinite} .s-exp .ln:nth-child(1) .l{width:42%}.s-exp .ln:nth-child(1) .a{width:22%;animation-delay:0s} .s-exp .ln:nth-child(2) .l{width:54%}.s-exp .ln:nth-child(2) .a{width:18%;animation-delay:.5s} .s-exp .ln:nth-child(3) .l{width:36%}.s-exp .ln:nth-child(3) .a{width:26%;animation-delay:1s} @keyframes expFill{0%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}} .s-exp .tot{display:flex;align-items:center;justify-content:space-between; border-top:1px solid var(--line);padding-top:10px;margin-top:2px} .s-exp .tot b{font-size:12px;font-weight:800;color:var(--ink)} .s-exp .stamp{display:inline-flex;align-items:center;gap:6px;background:#e3efe9;color:var(--accent); font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px; animation:expStamp 5.5s ease-in-out infinite} .s-exp .stamp .tick{width:14px;height:14px;font-size:9px} @keyframes expStamp{0%,55%{opacity:0;transform:scale(.7) rotate(-8deg)} 66%{opacity:1;transform:scale(1.12) rotate(0)}74%,100%{opacity:1;transform:scale(1) rotate(0)}} /* =========================================================== 4 · RESEARCH - magnifier sweeps, lines highlight =========================================================== */ .s-find{padding:18px 16px} .s-find .lines{display:flex;flex-direction:column;gap:9px} .s-find .lines i{height:8px;border-radius:5px;background:var(--line);display:block} .s-find .lines i:nth-child(1){width:88%} .s-find .lines i:nth-child(2){width:70%;animation:findHi 6s ease-in-out infinite} .s-find .lines i:nth-child(3){width:80%} .s-find .lines i:nth-child(4){width:58%;animation:findHi 6s ease-in-out infinite;animation-delay:3s} @keyframes findHi{0%,30%{background:var(--line)}42%,58%{background:var(--accent)}70%,100%{background:var(--line)}} .s-find .glass{position:absolute;top:24px;left:18px;color:var(--accent);animation:findMove 6s ease-in-out infinite} .s-find .glass svg{width:30px;height:30px;display:block; filter:drop-shadow(0 3px 6px rgba(124,58,237,.3))} @keyframes findMove{0%{transform:translate(0,0)}25%{transform:translate(150px,14px)} 50%{transform:translate(20px,42px)}75%{transform:translate(140px,56px)}100%{transform:translate(0,0)}} /* =========================================================== 5 · DOCUMENTS - page builds itself, tidy tick =========================================================== */ .s-doc{display:grid;place-items:center} .s-doc .pg{position:relative;width:104px;height:124px;background:#fff;border:1px solid var(--line); border-radius:9px;box-shadow:0 10px 24px rgba(17,19,18,.10);padding:13px 13px 0} .s-doc .pg::before{content:"";position:absolute;top:9px;right:-9px;width:104px;height:124px;border-radius:9px; background:#fff;border:1px solid var(--line);z-index:-1;opacity:.55;transform:rotate(4deg)} .s-doc .pg .hd{width:46%;height:9px;border-radius:4px;background:var(--accent);margin-bottom:11px} .s-doc .pg .r{height:6px;border-radius:4px;background:var(--line);margin-bottom:8px;transform-origin:left; animation:docRow 5.5s ease-in-out infinite} .s-doc .pg .r:nth-child(2){width:100%;animation-delay:.1s} .s-doc .pg .r:nth-child(3){width:88%;animation-delay:.5s} .s-doc .pg .r:nth-child(4){width:94%;animation-delay:.9s} .s-doc .pg .r:nth-child(5){width:64%;animation-delay:1.3s} @keyframes docRow{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}} .s-doc .pg .seal{position:absolute;right:9px;bottom:9px;animation:docSeal 5.5s ease-in-out infinite} @keyframes docSeal{0%,55%{opacity:0;transform:scale(.6)}68%{opacity:1;transform:scale(1.15)}78%,100%{opacity:1;transform:scale(1)}} /* =========================================================== 6 · ADMIN - checklist ticks itself off =========================================================== */ .s-list{padding:16px 16px;display:flex;flex-direction:column;justify-content:center;gap:11px} .s-list .it{display:flex;align-items:center;gap:11px} .s-list .bx{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex:none; display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;line-height:1; animation:listBox 7s ease-in-out infinite} .s-list .bx::after{content:"✓";opacity:0;transition:none} .s-list .bar{height:8px;border-radius:5px;background:var(--line)} .s-list .it:nth-child(1) .bx{animation-delay:0s} .s-list .it:nth-child(2) .bx{animation-delay:1s} .s-list .it:nth-child(3) .bx{animation-delay:2s} @keyframes listBox{0%,8%{background:transparent;border-color:var(--line)} 16%{background:var(--accent);border-color:var(--accent)} 16.01%{}/* keep checked through the cycle */ 92%{background:var(--accent);border-color:var(--accent)} 100%{background:transparent;border-color:var(--line)}} /* reveal the tick in step with the box */ .s-list .it .bx{position:relative} .s-list .it:nth-child(1) .bx::after{animation:listTick 7s ease-in-out infinite;animation-delay:0s} .s-list .it:nth-child(2) .bx::after{animation:listTick 7s ease-in-out infinite;animation-delay:1s} .s-list .it:nth-child(3) .bx::after{animation:listTick 7s ease-in-out infinite;animation-delay:2s} @keyframes listTick{0%,12%{opacity:0}18%,92%{opacity:1}100%{opacity:0}}