/* The five app icons (accounting, inventory, clients, tasks, HR). They draw themselves when they come into view and again on hover. */
.aico .ai { width: 68px; height: 68px; display: block; }
.fe-i .ai { width: 64px; height: 64px; display: block; }
.ai-p { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ai-l { fill: none; stroke: var(--vd); stroke-width: 2.4; stroke-linecap: round; }
.ai-g { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; }
.ai-gf { fill: var(--gold); stroke: none; }
.ai-ck { fill: none; stroke: var(--vd); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-hand, .ai-hand2 { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.ai-l.l1, .ai-l.l2, .ai-l.l3, .ai-ck { stroke-dasharray: 24; stroke-dashoffset: 0; }
.ai-g { transform-box: fill-box; transform-origin: left center; }
:is(.arow, .feat).in .ai-books .ai-l, :is(.arow, .feat).in .ai-tasks .ai-ck { animation: draw .8s var(--ease) both; }
:is(.arow, .feat).in .ai-books .l2 { animation-delay: .15s; } :is(.arow, .feat).in .ai-books .l3 { animation-delay: .3s; }
:is(.arow, .feat).in .ai-books .g1 { animation: bar .5s var(--ease) .5s both; } :is(.arow, .feat).in .ai-books .g2 { animation: bar .5s var(--ease) .65s both; }
:is(.arow, .feat).in .ai-tasks .k2 { animation-delay: .35s; }
:is(.arow, .feat).in .ai-inventory .ai-drop { animation: drop 1s var(--ease) .1s both; }
:is(.arow, .feat).in .ai-crm .ai-card { animation: slide 1.4s var(--ease) .2s both; }
:is(.arow, .feat).in .ai-hr .ai-hand { transform-box: fill-box; transform-origin: bottom center; animation: tick 1.6s var(--ease) both; }
:is(.arow, .feat):hover .ai-books .ai-l, :is(.arow, .feat):hover .ai-tasks .ai-ck { animation: draw2 .8s var(--ease) both; }
:is(.arow, .feat):hover .ai-books .l2 { animation-delay: .15s; } :is(.arow, .feat):hover .ai-books .l3 { animation-delay: .3s; } :is(.arow, .feat):hover .ai-tasks .k2 { animation-delay: .35s; }
:is(.arow, .feat):hover .ai-books .g1 { animation: bar2 .5s var(--ease) .5s both; } :is(.arow, .feat):hover .ai-books .g2 { animation: bar2 .5s var(--ease) .65s both; }
:is(.arow, .feat):hover .ai-inventory .ai-drop { animation: drop2 1s var(--ease) both; }
:is(.arow, .feat):hover .ai-crm .ai-card { animation: slide2 1.4s var(--ease) both; }
:is(.arow, .feat):hover .ai-hr .ai-hand { transform-box: fill-box; transform-origin: bottom center; animation: tick2 1.6s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } @keyframes draw2 { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bar2 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drop { 0% { transform: translateY(-10px); opacity: 0; } 40% { opacity: 1; } 70% { transform: translateY(18px); } 100% { transform: translateY(14px); } } @keyframes drop2 { 0% { transform: translateY(-10px); opacity: 0; } 40% { opacity: 1; } 70% { transform: translateY(18px); } 100% { transform: translateY(14px); } }
@keyframes slide { 0% { transform: translateX(0); } 45% { transform: translateX(14px); } 100% { transform: translateX(28px); } } @keyframes slide2 { 0% { transform: translateX(0); } 45% { transform: translateX(14px); } 100% { transform: translateX(28px); } }
@keyframes tick { from { transform: rotate(-120deg); } to { transform: rotate(0); } } @keyframes tick2 { from { transform: rotate(-120deg); } to { transform: rotate(0); } }