/* Staged architecture illustrations; the original labels and screenshot stay intact. */
.showcase-playing .recovery-diagram,.showcase-playing .automation-diagram{animation:showcase-diagram-arrive .65s var(--ease) both}

/* Snapshot layers, a visible transfer route, then a verified destination. */
.showcase-backup .showcase-server-row{position:relative;transition:border-color .35s,box-shadow .35s,translate .4s var(--ease)}
.showcase-backup .server-stack .showcase-snapshot-echo{position:absolute;inset:-1px;display:block;width:auto;height:auto;border:1px solid #c4e2ff;border-radius:inherit;background:#a4ceff0d;opacity:0;pointer-events:none}
.showcase-backup.showcase-playing.showcase-snapshot .showcase-server-row{animation:showcase-snapshot-row 1.35s var(--ease) both;animation-delay:var(--showcase-row-delay,0ms)}
.showcase-backup.showcase-playing.showcase-snapshot .showcase-snapshot-echo{animation:showcase-snapshot-layer 1.25s var(--ease) both;animation-delay:var(--showcase-row-delay,0ms)}
.showcase-backup.showcase-playing.showcase-snapshot .showcase-server-row i{animation:showcase-server-light 1.35s ease-out both;animation-delay:var(--showcase-row-delay,0ms)}
.showcase-backup .diagram-connection>.showcase-backup-track{transition:background .3s,box-shadow .3s}
.showcase-backup.showcase-transfer .showcase-backup-track{background:#d2e7ff;box-shadow:0 0 0 1px #b8d8ff33,0 0 14px #b8d8ff80}
.showcase-backup .diagram-connection>.showcase-backup-packet{position:absolute;top:50%;left:0;display:block;flex:none;width:8px;height:6px;margin:0;background:#e7f4ff;border:1px solid #fff;border-radius:2px;box-shadow:0 0 0 3px #b8d8ff22,0 0 17px #b8d8ffb3;opacity:0;pointer-events:none;transform:translate3d(0,-50%,0)}
.showcase-backup.showcase-playing.showcase-transfer .showcase-backup-packet{animation:showcase-backup-transfer 1.05s var(--showcase-packet-delay,0ms) linear both}
.showcase-backup .storage-node{position:relative;transition:transform .55s var(--ease),translate .55s var(--ease),scale .55s var(--ease),box-shadow .45s,border-color .45s}
.showcase-backup.showcase-playing.showcase-transfer .storage-node{translate:0 -4px;scale:1.06;border-color:#e6f2ff;box-shadow:0 19px 30px #091e4059,0 0 0 6px #b2d7ff14,0 0 38px #9cc9ff42}
.showcase-backup.showcase-playing.showcase-verify .storage-node{translate:0 -5px;scale:1.075;border-color:#d7f7ed;box-shadow:0 19px 30px #091e4059,0 0 36px #b9f1e33d}
.showcase-backup .showcase-storage-ring{position:absolute;inset:-13%;width:126%;height:126%;max-width:none;overflow:visible;pointer-events:none;opacity:0;fill:none}
.showcase-storage-ring .showcase-verify-circle{stroke:#c5f3e5;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px}
.showcase-storage-ring .showcase-verify-badge{fill:#d9fff0;stroke:#244b66;stroke-width:1.3;opacity:0;transform-origin:99px 20px}
.showcase-storage-ring .showcase-verify-check{stroke:#245668;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.showcase-backup.showcase-playing.showcase-verify .showcase-storage-ring{opacity:1}
.showcase-backup.showcase-playing.showcase-verify .showcase-verify-circle{animation:showcase-verify-ring .9s var(--ease) both}
.showcase-backup.showcase-playing.showcase-verify .showcase-verify-badge{animation:showcase-verify-badge .45s .6s var(--ease) both}
.showcase-backup.showcase-playing.showcase-verify .showcase-verify-check{animation:showcase-verify-check .45s .8s ease-out both}
.showcase-backup .recovery-pipeline>span{position:relative;transition:color .3s,translate .35s var(--ease),text-shadow .3s;isolation:isolate}
.showcase-backup .recovery-pipeline>span:before{content:'';position:absolute;inset:-5px -8px;border:1px solid #d1e4ff55;border-radius:12px;background:#b9d4ff12;opacity:0;z-index:-1;transition:opacity .3s;pointer-events:none}
.showcase-backup .recovery-pipeline i{transition:background .3s,box-shadow .3s,border-color .3s}
.showcase-backup.showcase-snapshot .recovery-pipeline>span:nth-of-type(1),
.showcase-backup.showcase-transfer .recovery-pipeline>span:nth-of-type(2),
.showcase-backup.showcase-verify .recovery-pipeline>span:nth-of-type(3){color:#fff;translate:0 -2px;text-shadow:0 0 14px #c4e2ff66}
.showcase-backup.showcase-snapshot .recovery-pipeline>span:nth-of-type(1):before,
.showcase-backup.showcase-transfer .recovery-pipeline>span:nth-of-type(2):before,
.showcase-backup.showcase-verify .recovery-pipeline>span:nth-of-type(3):before{opacity:1}
.showcase-backup.showcase-snapshot .recovery-pipeline>span:nth-of-type(1)>i,
.showcase-backup.showcase-transfer .recovery-pipeline>span:nth-of-type(2)>i,
.showcase-backup.showcase-verify .recovery-pipeline>span:nth-of-type(3)>i{background:#d9eeff;border-color:#e6f4ff;box-shadow:0 0 0 3px #c7e4ff26,0 0 12px #b8dfff99}

/* One ordered chain: focus a node, send a packet, then activate the next node. */
.showcase-automation{background:radial-gradient(ellipse at 55% 10%,#41638c,transparent 75%),#193856}
.showcase-automation .workflow-node{background:linear-gradient(135deg,#4d749c,#2d527c);border-color:#9dbce0;box-shadow:0 9px 18px #102e4f40;transition:transform .45s var(--ease),translate .45s var(--ease),scale .4s var(--ease),border-color .35s,box-shadow .4s,background .35s}
.showcase-automation .workflow-node.node-primary{background:linear-gradient(135deg,#6788ba,#3c6199);border-color:#bdd0f5}
.showcase-automation .workflow-node>.icon,.showcase-automation .workflow-node>.node-icon{color:#e0edff}
.showcase-automation .workflow-node>span:last-child{color:#dfebfa;transition:color .3s,text-shadow .3s}
.showcase-automation .workflow-node:before{content:'';position:absolute;inset:-5px;border:1px solid #c7dfff7a;border-radius:17px;opacity:0;pointer-events:none}
.showcase-automation .workflow-route{height:2px;background:#99b7dc66;transition:background .35s}
.showcase-automation .workflow-route:before{content:'';position:absolute;inset:0;background:#c9dfff;transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px #c1d9ff66}
.showcase-automation .workflow-route:after{animation:none;opacity:0;left:0;top:-3px;width:8px;height:8px;transform:none;background:#f1f7ff;box-shadow:0 0 0 3px #d8e9ff26,0 0 15px #d8e9ff99}
.showcase-automation.showcase-playing .workflow-node.showcase-node-done{border-color:#c4d8f1;box-shadow:0 10px 20px #0d244340,0 0 0 2px #bdd7ff12}
.showcase-automation.showcase-playing .workflow-node.showcase-node-active{translate:0 -6px;scale:1.075;border-color:#eff6ff;background:linear-gradient(135deg,#779bcb,#486fa8);box-shadow:0 17px 26px #1029475c,0 0 0 5px #c4dcff1f,0 0 30px #c4dcff40;z-index:2}
.showcase-automation.showcase-playing .workflow-node.showcase-node-active:before{animation:showcase-node-ring 1.1s var(--ease) both}
.showcase-automation.showcase-playing .workflow-node.showcase-node-active>.icon,
.showcase-automation.showcase-playing .workflow-node.showcase-node-active>.node-icon{animation:showcase-node-signal .65s var(--ease) both;color:#fff}
.showcase-automation.showcase-playing .workflow-node.showcase-node-active>span:last-child{color:#fff;text-shadow:0 0 12px #c3deff80}
.showcase-automation.showcase-playing .showcase-route-active:before{animation:showcase-route-draw .6s ease-out both}
.showcase-automation.showcase-playing .showcase-route-active:after{animation:showcase-automation-packet .65s linear both}
.showcase-automation.showcase-playing .showcase-route-done:before{transform:scaleX(1);opacity:.65}
.showcase-automation.showcase-flow-complete .workflow-node{border-color:#dfecff;box-shadow:0 11px 22px #102e4f40,0 0 20px #b6d5ff21}

/* A scan and guided reading path over the real, unmodified workspace screenshot. */
.showcase-workspace .workspace-window{scale:1;rotate:0deg;transition:transform .65s var(--ease),translate .45s var(--ease),scale .8s var(--ease),rotate .8s var(--ease),border-color .4s,box-shadow .6s}
.showcase-workspace .workspace-screenshot{transform:none}
.showcase-workspace.showcase-playing.showcase-workspace-route .workspace-window,
.showcase-workspace.showcase-playing.showcase-workspace-focus .workspace-window{scale:1.035;rotate:1deg;border-color:#c1dfff;box-shadow:0 25px 40px #07182670,0 0 0 1px #b3d6ff29}
.showcase-workspace-overlay{position:absolute;inset:30px 0 0;pointer-events:none;overflow:hidden;opacity:0;z-index:1}
.showcase-workspace.showcase-playing:not(.showcase-workspace-rest) .showcase-workspace-overlay{opacity:1}
.showcase-workspace-scanline{position:absolute;inset:0 auto 0 -16%;width:16%;background:linear-gradient(90deg,transparent,#9fcaff12 55%,#c8e2ff40);border-right:2px solid #d2e9ff99;opacity:0}
.showcase-workspace.showcase-playing.showcase-workspace-scan .showcase-workspace-scanline{animation:showcase-workspace-scan 1.6s var(--ease) both}
.showcase-workspace-guide{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;fill:none;stroke:#b0d4ff;stroke-width:1.5}
.showcase-workspace-guide>*{vector-effect:non-scaling-stroke}
.showcase-workspace-prompt,.showcase-workspace-models,.showcase-workspace-selection{opacity:0;transition:opacity .4s}
.showcase-workspace-track{opacity:.2}
.showcase-workspace-trail{stroke:#b2d8ff;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.showcase-workspace-packet{stroke:#f1f8ff;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0}
.showcase-workspace-origin,.showcase-workspace-target{fill:#d8ebff;stroke:#fff;opacity:0;transition:opacity .3s}
.showcase-workspace.showcase-workspace-scan .showcase-workspace-prompt{opacity:.8;fill:#9fcaff05}
.showcase-workspace.showcase-workspace-route .showcase-workspace-prompt,
.showcase-workspace.showcase-workspace-route .showcase-workspace-models{opacity:.8}
.showcase-workspace.showcase-playing.showcase-workspace-route .showcase-workspace-trail{animation:showcase-workspace-trace 1.2s ease-out both}
.showcase-workspace.showcase-playing.showcase-workspace-route .showcase-workspace-packet{animation:showcase-workspace-travel 1.35s linear both}
.showcase-workspace.showcase-workspace-route .showcase-workspace-origin{opacity:1}
.showcase-workspace.showcase-workspace-focus .showcase-workspace-models{opacity:.6}
.showcase-workspace.showcase-workspace-focus .showcase-workspace-selection{opacity:1;fill:#a6d0ff17;stroke:#e5f2ff;stroke-width:1.8}
.showcase-workspace.showcase-workspace-focus .showcase-workspace-trail{stroke-dashoffset:0;opacity:.6}
.showcase-workspace.showcase-workspace-focus .showcase-workspace-origin,
.showcase-workspace.showcase-workspace-focus .showcase-workspace-target{opacity:1}
.showcase-workspace .workspace-screenshot[hidden]~.showcase-workspace-overlay .showcase-workspace-guide{display:none}

/* A small reading cue outside the heading text. */
.showcase-heading{position:relative}
.showcase-heading:after{content:'';position:absolute;left:0;bottom:-13px;width:76px;height:3px;background:linear-gradient(90deg,#315bf4,#8ba9ff);border-radius:4px;pointer-events:none;transform-origin:left;transform:scaleX(var(--showcase-heading-progress,1));opacity:var(--showcase-heading-opacity,.7)}

@keyframes showcase-diagram-arrive{from{scale:.94;opacity:.75}to{scale:1;opacity:1}}
@keyframes showcase-snapshot-row{0%,100%{translate:0 0}32%,65%{translate:7px -2px;border-color:#e2f3ff;box-shadow:0 9px 15px #071b3a40,0 0 0 2px #c0e1ff33,0 0 24px #a4d2ff4d}}
@keyframes showcase-snapshot-layer{0%{opacity:0;transform:translate(0,0)}25%{opacity:.85}75%{opacity:.5;transform:translate(-8px,-7px)}100%{opacity:0;transform:translate(-11px,-10px)}}
@keyframes showcase-server-light{0%,100%{box-shadow:none}35%,65%{background:#fff;box-shadow:0 0 0 3px #c3e2ff26,0 0 13px #d6edff}}
@keyframes showcase-backup-transfer{0%{opacity:0;transform:translate3d(0,-50%,0)}15%,83%{opacity:1}100%{opacity:0;transform:translate3d(var(--showcase-packet-distance,45px),-50%,0)}}
@keyframes showcase-verify-ring{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes showcase-verify-badge{from{opacity:0;scale:.65}to{opacity:1;scale:1}}
@keyframes showcase-verify-check{from{opacity:0;stroke-dashoffset:100}to{opacity:1;stroke-dashoffset:0}}
@keyframes showcase-node-signal{0%{scale:.88}45%{scale:1.16}100%{scale:1}}
@keyframes showcase-node-ring{0%{opacity:0;scale:.97}30%{opacity:.9;scale:1}100%{opacity:0;scale:1.1}}
@keyframes showcase-route-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes showcase-automation-packet{0%{opacity:0;transform:translateX(0)}12%,90%{opacity:1}100%{opacity:0;transform:translateX(var(--showcase-packet-distance,32px))}}
@keyframes showcase-workspace-scan{0%{opacity:0;transform:translateX(0)}12%,82%{opacity:1}100%{opacity:0;transform:translateX(725%)}}
@keyframes showcase-workspace-trace{from{opacity:.65;stroke-dashoffset:100}to{opacity:.8;stroke-dashoffset:0}}
@keyframes showcase-workspace-travel{0%{opacity:0;stroke-dashoffset:100}12%,85%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}

@media(max-width:600px){
  .showcase-heading:after{width:61px;height:2px;bottom:-11px}
  .showcase-backup .showcase-storage-ring{inset:-11%;width:122%;height:122%}
  .showcase-automation.showcase-playing .workflow-node.showcase-node-active{scale:1.06;translate:0 -5px}
  .showcase-automation .workflow-node:before{inset:-4px;border-radius:14px}
  .showcase-workspace.showcase-playing.showcase-workspace-route .workspace-window,
  .showcase-workspace.showcase-playing.showcase-workspace-focus .workspace-window{scale:1.025}
}

/* Pausing clears decoration, never the project content. */
.showcase-backup:not(.showcase-playing) *,
.showcase-automation:not(.showcase-playing) *,
.showcase-workspace:not(.showcase-playing) *{animation:none;transition:none}
:is(html[data-motion=off],html[data-motion-scene=rest]) :is(.showcase-backup,.showcase-automation,.showcase-workspace) *{animation:none!important;transition:none!important;scale:none!important;translate:none!important;rotate:none!important}
:is(html[data-motion=off],html[data-motion-scene=rest]) :is(.showcase-snapshot-echo,.showcase-backup-packet,.showcase-storage-ring,.showcase-workspace-overlay){opacity:0!important}
:is(html[data-motion=off],html[data-motion-scene=rest]) .showcase-automation .workflow-route:after{animation:none!important;opacity:0!important;transform:none!important}
:is(html[data-motion=off],html[data-motion-scene=rest]) .showcase-heading:after{transform:none!important;opacity:.7}
@media(prefers-reduced-motion:reduce){
  :is(.showcase-backup,.showcase-automation,.showcase-workspace) *{animation:none!important;transition:none!important;scale:none!important;translate:none!important;rotate:none!important}
  .showcase-snapshot-echo,.showcase-backup-packet,.showcase-storage-ring,.showcase-workspace-overlay,.showcase-automation .workflow-route:after{opacity:0!important;animation:none!important}
  .showcase-heading:after{transform:none!important;opacity:.7}
}