/* complex systems hero: a tablet that walks through a system's features, in the look of the device on the apps page.
   One 16s loop, five screens of 3.2s; every part inside a screen starts with its screen through --n */
.cxm{--c:16s;--s:3.2s;position:relative;width:100%;aspect-ratio:1.18;container-type:inline-size;font-family:'Rubik','Assistant',sans-serif;color:#2a1a4d;direction:rtl}
.cxm *{box-sizing:border-box}
.cxm-glow{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,166,255,.38),rgba(255,122,217,.18) 55%,transparent 75%);filter:blur(20px)}
.cxm-dev{position:absolute;left:6%;top:50%;width:88%;aspect-ratio:4/3;margin-top:-33cqw;padding:1.5cqw;border-radius:4.4cqw;background:linear-gradient(150deg,#3a2470,#140a2e 55%,#2a1458);box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),0 3cqw 6cqw -2cqw rgba(0,0,0,.7),0 0 6cqw -1cqw rgba(255,122,217,.45);animation:cxmTilt 8s ease-in-out infinite}
@keyframes cxmTilt{0%,100%{transform:perspective(1500px) rotateX(3deg) rotateY(-5deg)}50%{transform:perspective(1500px) rotateX(1deg) rotateY(5deg) translateY(-1cqw)}}
.cxm-scr{position:relative;display:grid;grid-template-columns:10cqw 1fr;width:100%;height:100%;overflow:hidden;border-radius:3cqw;background:linear-gradient(160deg,#fbf8ff,#f0e8ff)}

/* the side menu: the marker goes to the screen that is open */
.cxm-nav{position:relative;background:#1a0f3a}
.cxm-nav i{position:absolute;right:3cqw;top:calc(8cqw + var(--k) * 5.6cqw);width:4cqw;height:4cqw;border-radius:1.2cqw;background:rgba(255,255,255,.2)}
.cxm-nav u{position:absolute;right:3.3cqw;top:2.6cqw;width:3.4cqw;height:3.4cqw;border-radius:1cqw;background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.cxm-nav b{position:absolute;right:2.2cqw;top:7.2cqw;width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);box-shadow:0 0 2.4cqw -.4cqw #ff7ad9;animation:cxmNav var(--c) cubic-bezier(.65,0,.35,1) infinite}
@keyframes cxmNav{0%,17%{transform:none}20%,37%{transform:translateY(5.6cqw)}40%,57%{transform:translateY(11.2cqw)}60%,77%{transform:translateY(16.8cqw)}80%,97%{transform:translateY(22.4cqw)}100%{transform:none}}

/* the screens */
.cxm-main{position:relative}
.cxm-s{position:absolute;inset:0;padding:2.4cqw;display:flex;flex-direction:column;gap:1.5cqw;opacity:0;animation:cxmS var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmS{0%{opacity:0}3%,20%{opacity:1}23%,100%{opacity:0}}
.cxm-h{display:flex;align-items:center;justify-content:space-between;font-size:3cqw;font-weight:800;line-height:1.1}
.cxm-h em{font-style:normal;font-size:1.8cqw;font-weight:700;color:#8a2be2;background:#efe7ff;padding:.6cqw 1.6cqw;border-radius:3cqw}
.cxm-p{animation:cxmPop var(--c) cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--n) * var(--s) + var(--e,0) * .13s)}
@keyframes cxmPop{0%{opacity:0;transform:translateY(1.4cqw) scale(.96)}6%,100%{opacity:1;transform:none}}
.cxm-card{background:#fff;border-radius:1.8cqw;box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}

/* 1 dashboard */
.cxm-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.cxm-kpi>div{padding:1.4cqw 1.6cqw;display:grid;gap:.3cqw}
.cxm-kpi b{font-size:3.6cqw;font-weight:800;line-height:1}
.cxm-kpi small{font-size:1.7cqw;color:#7a6a9d}
.cxm-kpi>div:nth-child(2) b{color:#e0409a}.cxm-kpi>div:nth-child(3) b{color:#8a2be2}
.cxm-two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 2.1fr;gap:1.4cqw}
.cxm-ch{padding:1.4cqw;min-height:0}
.cxm-ch svg{display:block;width:100%;height:100%;overflow:visible}
.cxm-line{stroke-dasharray:420;animation:cxmDraw var(--c) ease-in-out infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmDraw{0%,3%{stroke-dashoffset:420}15%,100%{stroke-dashoffset:0}}
.cxm-don{display:grid;place-items:center;position:relative}
.cxm-don svg{width:78%;transform:rotate(-90deg)}
.cxm-arc{stroke-dasharray:100;animation:cxmArc var(--c) ease-out infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmArc{0%,3%{stroke-dashoffset:100}14%,100%{stroke-dashoffset:26}}
.cxm-don b{position:absolute;font-size:3cqw;font-weight:800}

/* 2 table */
.cxm-tb{flex:1;padding:.6cqw 1.6cqw;display:flex;flex-direction:column;justify-content:space-around}
.cxm-r{display:grid;grid-template-columns:3.4cqw 1.7fr 1fr 8.4cqw;align-items:center;gap:1.4cqw;padding:.7cqw .8cqw;border-radius:1.2cqw;font-size:1.9cqw;font-weight:600}
.cxm-r.th{font-size:1.6cqw;color:#7a6a9d;font-weight:700}
.cxm-r>i{width:3.4cqw;height:2.6cqw;border-radius:.7cqw;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.cxm-r:nth-child(odd)>i{background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.cxm-tag{position:relative;display:block;text-align:center;padding:.5cqw 0;border-radius:3cqw;font-size:1.6cqw;font-weight:700;background:#efe7ff;color:#6b3fc4}
.cxm-tag.ok{background:#d9f7e3;color:#0f8a43}
.cxm-tag s{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;text-decoration:none;background:#d9f7e3;color:#0f8a43;opacity:0;animation:cxmOn var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmOn{0%,9%{opacity:0}11%,100%{opacity:1}}
.cxm-r.hl{animation:cxmRow var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmRow{0%,6%{background:transparent}8%,14%{background:#fbe6f5}18%,100%{background:transparent}}

/* 3 board: a task moves to the next column */
.cxm-kb{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.cxm-col{background:#ebe2fb;border-radius:1.8cqw;padding:1.2cqw;display:flex;flex-direction:column;gap:1cqw;font-size:1.9cqw;font-weight:800}
.cxm-t{padding:1.2cqw;display:grid;gap:.7cqw}
.cxm-t i{display:block;height:.9cqw;border-radius:1cqw;background:#2a1a4d}
.cxm-t i+i{width:64%;height:.7cqw;background:#ddd0f5}
.cxm-t u{display:block;width:30%;height:1.2cqw;border-radius:1cqw;background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
.cxm-t.y u{background:linear-gradient(90deg,#ffd23f,#ff9f43)}
.cxm-mv{position:relative;z-index:2;animation:cxmMove var(--c) cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmMove{0%,6%{transform:none;box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}8%{transform:scale(1.06) rotate(-2deg)}14%{transform:translateX(-23.86cqw) scale(1.06) rotate(-2deg)}16%,100%{transform:translateX(-23.86cqw);box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}}

.cxm-gap{visibility:hidden;height:6.6cqw}
.cxm-up{animation:cxmUp var(--c) cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmUp{0%,12%{transform:none}16%,100%{transform:translateY(-7.6cqw)}}

/* 4 approval flow: the stages light up one by one */
.cxm-fl{flex:1;padding:2cqw 2.4cqw;display:flex;flex-direction:column;justify-content:center;gap:3cqw}
.cxm-st{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.cxm-tr,.cxm-tr u{position:absolute;right:12.5%;left:12.5%;top:3.1cqw;height:.7cqw;border-radius:1cqw;background:#e6dcf7}
.cxm-tr u{right:0;left:0;top:0;background:linear-gradient(270deg,#c9a6ff,#ff7ad9);transform-origin:100% 50%;animation:cxmTr var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s))}
@keyframes cxmTr{0%,3%{transform:scaleX(0)}15%,100%{transform:scaleX(1)}}
.cxm-nd{position:relative;display:grid;justify-items:center;gap:1cqw;font-size:1.9cqw;font-weight:700;text-align:center}
.cxm-nd i{position:relative;display:block;width:7cqw;height:7cqw;border-radius:50%;background:#e6dcf7}
.cxm-nd i::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9) center/cover;opacity:0;animation:cxmLit var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s) + var(--e) * .55s)}
.cxm-nd i::before{content:"";position:absolute;z-index:1;left:2.5cqw;top:1.7cqw;width:1.9cqw;height:3.1cqw;border:solid #fff;border-width:0 .6cqw .6cqw 0;transform:rotate(45deg)}
@keyframes cxmLit{0%,3%{opacity:0;transform:scale(.7)}6%,100%{opacity:1;transform:none}}
.cxm-log{padding:1.5cqw 1.8cqw;display:flex;align-items:center;gap:1.4cqw;font-size:2cqw;font-weight:700}
.cxm-log i{width:4cqw;height:4cqw;border-radius:50%;background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.cxm-log em{margin-inline-start:auto;font-style:normal;font-size:1.7cqw;color:#0f8a43;background:#d9f7e3;padding:.6cqw 1.6cqw;border-radius:3cqw}

/* 5 permissions: each kind of user and what they may do */
.cxm-pm{flex:1;padding:1cqw 2cqw;display:flex;flex-direction:column;justify-content:space-around}
.cxm-pr{display:grid;grid-template-columns:1.5fr repeat(3,1fr);align-items:center;justify-items:center;gap:1cqw;font-size:2cqw;font-weight:700}
.cxm-pr>:first-child{justify-self:start}
.cxm-pr.th{font-size:1.7cqw;color:#7a6a9d}
.cxm-sw{position:relative;display:block;width:6cqw;height:3.2cqw;border-radius:3cqw;background:#e2d7f7}
.cxm-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);opacity:var(--on,0)}
.cxm-sw::after{content:"";position:absolute;top:.45cqw;right:.45cqw;width:2.3cqw;height:2.3cqw;border-radius:50%;background:#fff;box-shadow:0 .2cqw .4cqw rgba(0,0,0,.2);transform:translateX(calc(var(--on,0) * -2.8cqw))}
.cxm-sw.on{--on:1}
.cxm-sw.fl::before{animation:cxmFb var(--c) linear infinite;animation-delay:calc(var(--n) * var(--s) + var(--e) * .5s)}
.cxm-sw.fl::after{animation:cxmFa var(--c) cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--n) * var(--s) + var(--e) * .5s)}
@keyframes cxmFb{0%,5%{opacity:0}7%,100%{opacity:1}}
@keyframes cxmFa{0%,5%{transform:none}7%,100%{transform:translateX(-2.8cqw)}}

/* the cursor goes to the next item in the side menu, between visits it works on the screen */
.cxm-cur{position:absolute;top:0;right:0;width:4.4cqw;z-index:4;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45));animation:cxmCur var(--c) ease-in-out infinite}
.cxm-cur svg{display:block;width:100%}
@keyframes cxmCur{
  0%{transform:translate(-1cqw,10cqw)}8%,10%{transform:translate(-44cqw,40cqw)}16%,20%{transform:translate(-1cqw,15.6cqw)}
  28%,30%{transform:translate(-30cqw,26cqw)}36%,40%{transform:translate(-1cqw,21.2cqw)}
  48%,50%{transform:translate(-50cqw,20cqw)}56%,60%{transform:translate(-1cqw,26.8cqw)}
  68%,70%{transform:translate(-40cqw,18cqw)}76%,80%{transform:translate(-1cqw,32.4cqw)}
  88%,90%{transform:translate(-34cqw,36cqw)}96%,100%{transform:translate(-1cqw,10cqw)}}

/* around the tablet */
.cxm-f{position:absolute;z-index:3;display:flex;align-items:center;gap:1cqw;padding:1.3cqw 2cqw;border-radius:3cqw;font-size:2.2cqw;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:cxmFloat 6s ease-in-out infinite;white-space:nowrap}
.cxm-f i{width:3.2cqw;height:3.2cqw;margin-inline-start:-1.8cqw;border-radius:50%;background:#c9a6ff;box-shadow:0 0 0 .3cqw #2a1458}
.cxm-f i:first-child{margin-inline-start:0}.cxm-f i:nth-child(2){background:#ff7ad9}.cxm-f i:nth-child(3){background:#ffd23f}
.cxm-f.a{left:0;top:5%}
.cxm-f.b{right:0;bottom:5%;color:#1a0f3a;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);border:0;box-shadow:0 1cqw 3cqw -1cqw rgba(255,122,217,.8);animation-delay:-2s}
.cxm-f.c{left:1%;bottom:9%;animation-delay:-4s}
@keyframes cxmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}
@media(max-width:900px){.cxm{max-width:560px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.cxm *{animation:none!important}.cxm-s[style*="--n:0"]{opacity:1}.cxm-line{stroke-dashoffset:0}.cxm-arc{stroke-dashoffset:26}.cxm-cur{display:none}}

/* Auto 360 card: the home page scene, and the car turning on its circle at the bottom right */
html:not(#a) .apps .ac-img.acvid .ac-spinbox{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:clamp(10px,1.2vw,18px)}
html:not(#a) .apps .ac-img.acvid .ac-spin{position:absolute!important;left:53.8%;top:39.65%;width:58.76%!important;height:62.67%!important;object-fit:contain!important;border-radius:0;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))!important}