/* Coordinated illustrative interfaces. Every animated state shares one timeline. */
.applications-portal .portal-app {
  background:radial-gradient(ellipse at 65% 45%,#155b9538,transparent 65%),#0a1320;
}
.app-visual {
  container-type:inline-size; position:relative; width:100%; height:100%;
  isolation:isolate; color:#e1edfa; --app-cycle:10s;
  font-family:var(--display); pointer-events:none;
}
.app-visual *, .app-visual *::before, .app-visual *::after {box-sizing:border-box}
.app-visual-grid {
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(#9abdd810 1px,transparent 1px),linear-gradient(90deg,#9abdd810 1px,transparent 1px);
  background-size:30px 30px; mask-image:radial-gradient(ellipse,#000,transparent 75%);
}
.app-concept-label {position:absolute;left:8%;top:6%;font-size:clamp(7px,1.65cqw,9px);letter-spacing:.13em;text-transform:uppercase;color:#8fa9c4}
.app-workspace {
  position:absolute; left:6.5%; top:17%; width:78%; height:67%; border:1px solid #9abbd076;
  border-radius:7px; background:linear-gradient(135deg,#1c2b3b,#0e1a29 75%);
  box-shadow:0 25px 45px #0009,inset 0 1px #e0efff28;
  transform:perspective(1100px) rotateY(-9deg) rotateX(5deg) rotateZ(-3deg);
  overflow:hidden;
}
.app-window-bar {height:15%;min-height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #8baac52e;background:linear-gradient(100deg,#34445975,#1c2b3d70)}
.app-window-mark {display:flex;align-items:center;gap:8px;font-size:clamp(6px,1.6cqw,9px);letter-spacing:.12em;color:#d5e9ff}
.app-window-mark i {height:10px;width:1px;background:#a8c9e345}
.app-window-dots {display:flex;gap:4px}.app-window-dots i {width:3px;height:3px;border-radius:50%;background:#a5c4dd80}
.app-workspace-body {display:flex;height:85%}
.app-rail {width:10%;border-right:1px solid #8baac51f;display:flex;flex-direction:column;align-items:center;gap:12%;padding-top:5%;position:relative;background:#07121f55}
.app-rail-logo {font-size:clamp(8px,2cqw,11px);color:#b9dfff;line-height:1}
.app-rail>i {width:7px;height:7px;border:1px solid #94b2cb6b;border-radius:1px;position:relative}
.app-rail>i.app-rail-selected {background:#69baff;border-color:#a6d9ff;box-shadow:0 0 12px #409aee70}
.app-rail-avatar {position:absolute;bottom:7%;width:9px;height:9px;border:1px solid #95b4d16b;border-radius:50%}
.app-workspace-content {width:90%;padding:5% 5% 4%;min-width:0}
.app-workspace-heading {display:flex;justify-content:space-between;align-items:center}
.app-micro {display:block;font-size:clamp(5px,1.25cqw,7px);letter-spacing:.13em;color:#8eacc7;line-height:1.4}
.app-workspace-heading strong {display:block;font-size:clamp(12px,3.3cqw,18px);font-weight:400;letter-spacing:-.035em;margin-top:4px;line-height:1.2}
.app-profile {width:20px;height:20px;display:grid;place-items:center;border:1px solid #91b3d13d;background:#44678830;font-size:6px;border-radius:50%}
.app-workflow {display:flex;align-items:center;gap:6%;margin:6% 0 5%;color:#9fc8eb;font-size:clamp(6px,1.6cqw,9px)}
.app-workflow>i {height:1px;flex:1;background:linear-gradient(90deg,#63b6fa77,#63b6fa18)}
.app-stage-deliver {color:#d6ebff}
.app-request {display:flex;align-items:center;gap:4%;padding:5%;position:relative;overflow:hidden;border:1px solid #6297c55e;background:linear-gradient(100deg,#224b704d,#132c4233);border-radius:4px}
.app-request-icon {width:12%;aspect-ratio:1;display:grid;place-items:center;border:1px solid #7ab7e14a;background:#4387bd21;border-radius:3px}
.app-visual svg {display:block}
.app-request-icon svg {width:65%;stroke:#8ecfff;stroke-width:1.2;stroke-linejoin:round}
.app-request-copy {flex:1;min-width:0}
.app-request-copy>strong {font-size:clamp(8px,2cqw,11px);font-weight:500;display:block;margin-bottom:4px}
.app-state-label {position:relative;height:1.4em;font-size:clamp(6px,1.5cqw,8px);line-height:1.4;white-space:nowrap}
.app-state-label>span {position:absolute;inset:0;display:block}
.app-state-pending {opacity:0;color:#9cb8d1}.app-state-complete {opacity:1;color:#a8dcff}
.app-request-check {width:17px;height:17px;border:1px solid #7ccaff70;background:#4ca6ea26;border-radius:50%;display:grid;place-items:center}
.app-request-check svg,.app-phone-emblem svg {width:65%;stroke:#bce6ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.app-request-progress {position:absolute;bottom:0;left:0;right:0;height:1px;background:#74caff;transform-origin:left;box-shadow:0 0 10px #5ebeff70}
.app-bottom-panels {display:grid;grid-template-columns:1.25fr 1fr;gap:6%;margin-top:5%}
.app-activity,.app-connected {border-top:1px solid #8eafcf26;padding-top:7%}
.app-activity-bars {display:flex;align-items:flex-end;gap:5%;height:25px;margin-top:8px}
.app-activity-bars i {display:block;flex:1;height:45%;background:linear-gradient(#83cfff,#2b5378);border-radius:1px 1px 0 0;transform-origin:bottom;opacity:.8}
.app-activity-bars i:nth-child(3n) {height:85%}.app-activity-bars i:nth-child(2n) {height:65%}.app-activity-bars i:nth-child(4n) {height:100%}
.app-connected {display:flex;align-items:center;gap:8%;color:#9dbad5;font-size:clamp(6px,1.6cqw,9px);line-height:1.5}
.app-connected-symbol {width:22%;aspect-ratio:1;display:grid;place-items:center;border:1px solid #83b5e13b;border-radius:4px;background:#408dcb13}
.app-connected-symbol svg {width:65%;stroke:#8ecfff;stroke-width:1}
.app-signal {position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.app-signal path {fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.app-signal-track {stroke:#5eabdf4d}.app-signal-pulse {stroke:#a5e4ff;stroke-dasharray:12 100;stroke-dashoffset:-100;opacity:0;filter:drop-shadow(0 0 3px #439fee)}
.app-phone {
  position:absolute;right:7%;bottom:10%;width:25%;height:73%;z-index:3;
  border:1px solid #a5bfd68f;border-radius:clamp(12px,3.7cqw,20px);padding:8% 3% 4%;
  background:linear-gradient(145deg,#203349,#0a1524 55%,#0d2135);
  box-shadow:7px 18px 30px #000b,inset 0 0 0 3px #07121ed9,inset 0 0 0 4px #8fa9be20;
  transform:perspective(1000px) rotateY(-8deg) rotateZ(4deg);
}
.app-phone-camera {position:absolute;left:34%;right:34%;height:4%;top:4%;background:#050b12;border:1px solid #7b9bb31a;border-radius:20px}
.app-phone-top {display:flex;align-items:center;justify-content:space-between;font-size:clamp(4px,1.15cqw,6px);letter-spacing:.05em;color:#a7c8e4}
.app-phone-top i {width:8px;height:4px;border:1px solid #a7c8e4a0;border-radius:1px}
.app-phone-heading {margin-top:11%}.app-phone-heading .app-micro {font-size:clamp(4px,1.1cqw,6px)}
.app-phone-heading strong {display:block;font-size:clamp(12px,3.2cqw,18px);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin-top:5px}
.app-phone-status {margin-top:11%;border:1px solid #6ca6d346;border-radius:4px;background:linear-gradient(140deg,#28547b55,#102238);padding:10% 5%;text-align:center}
.app-phone-emblem {width:28%;aspect-ratio:1;margin:0 auto 12%;display:grid;place-items:center;border:1px solid #91d6ff90;background:#5cb9ff23;border-radius:50%;box-shadow:0 0 18px #4aa6e923}
.app-phone-status .app-state-label {font-size:clamp(7px,1.8cqw,10px);margin-bottom:4px}
.app-phone-status-caption {font-size:clamp(5px,1.3cqw,7px);color:#90acc6}
.app-phone-step {display:flex;align-items:center;gap:5%;font-size:clamp(4px,1.2cqw,6px);color:#8eabc5;border-bottom:1px solid #89b5d226;padding:9% 0 7%;white-space:nowrap}
.app-phone-step>i {width:3px;height:3px;background:#8dcfff;border-radius:50%}.app-phone-step b {margin-left:auto;font-weight:400;color:#a4dbff}
.app-phone-home {position:absolute;bottom:4%;left:35%;right:35%;height:2px;border-radius:3px;background:#b4cce273}
.app-visual-caption {position:absolute;bottom:3.5%;left:9%;font-size:clamp(6px,1.55cqw,9px);color:#a4c2db;letter-spacing:.045em;display:flex;align-items:center;gap:8px}
.app-visual-caption>i {height:4px;width:4px;border-radius:50%;background:#82d0ff;box-shadow:0 0 10px #61baff80}

/* Pause while offscreen or in a hidden tab; the finished composition is the fallback. */
.app-visual .app-state-pending {animation:app-pending var(--app-cycle) infinite both}
.app-visual .app-state-complete {animation:app-complete var(--app-cycle) infinite both}
.app-visual .app-request-check,.app-visual .app-phone-emblem svg,.app-visual .app-phone-step-final b {animation:app-approved var(--app-cycle) infinite both}
.app-visual .app-request-progress {animation:app-progress var(--app-cycle) infinite both}
.app-visual .app-signal-pulse {animation:app-transfer var(--app-cycle) linear infinite both}
.app-visual .app-phone-status {animation:app-received var(--app-cycle) infinite both}
.app-visual .app-phone .app-state-pending {animation-name:app-phone-pending}
.app-visual .app-phone .app-state-complete {animation-name:app-phone-complete}
.app-visual .app-phone-emblem svg,.app-visual .app-phone-step-final b {animation-name:app-phone-approved}
.app-visual [class] {animation-play-state:paused}
.app-visual.is-animating [class] {animation-play-state:running}
@keyframes app-pending {0%,24%{opacity:1;transform:translateY(0)}34%,93%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes app-complete {0%,25%{opacity:0;transform:translateY(3px)}35%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3px)}}
@keyframes app-approved {0%,25%{opacity:.15;transform:scale(.85)}36%,92%{opacity:1;transform:scale(1)}100%{opacity:.15;transform:scale(.85)}}
@keyframes app-progress {0%,8%{transform:scaleX(.05);opacity:.3}28%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.05);opacity:.3}}
@keyframes app-transfer {0%,28%{stroke-dashoffset:15;opacity:0}30%{opacity:1}52%{stroke-dashoffset:-100;opacity:1}55%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes app-received {0%,43%,75%,100%{border-color:#6ca6d346;box-shadow:0 0 0 #479fee00}53%,63%{border-color:#93d2ff99;box-shadow:0 0 20px #479fee20}}
@keyframes app-phone-pending {0%,49%{opacity:1;transform:translateY(0)}56%,93%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes app-phone-complete {0%,49%{opacity:0;transform:translateY(3px)}56%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3px)}}
@keyframes app-phone-approved {0%,49%{opacity:.15;transform:scale(.85)}56%,92%{opacity:1;transform:scale(1)}100%{opacity:.15;transform:scale(.85)}}
@media(min-width:601px) and (max-width:800px) {
  .app-workspace {top:22%;height:55%;left:4%;width:82%}
  .app-phone {height:61%;bottom:16%;right:5%;width:27%}
  .app-concept-label {top:10%}.app-visual-caption {bottom:8%}
  .app-activity-bars {height:20px}
}
@media(max-width:600px) {
  .applications-portal .portal-app {aspect-ratio:1.28}
  .app-workspace {left:5%;top:18%;height:66%;width:81%;transform:rotate(-3deg)}
  .app-phone {right:5%;bottom:10%;width:27%;height:73%;transform:rotate(4deg)}
  .app-workspace-content {padding-top:5%}
  .app-concept-label {left:8%;top:7%;font-size:8px}
  .app-visual-caption {font-size:8px;bottom:3.5%;left:8%}
  .app-phone-step {font-size:5px}
  .app-activity-bars {height:23px}
}
@media(prefers-reduced-motion:reduce) {
  .app-visual [class] {animation:none!important}
}
.motion-off .app-visual [class] {animation:none!important}