.vault-demo { --demo-duration: 12s; width: min(100%,450px); margin: 0; container-type: inline-size; }
.demo-scene { position: relative; width: 100%; aspect-ratio: 430/470; isolation: isolate; }
.demo-halo { position: absolute; inset: 15% 3% 5%; border-radius: 50%; background: radial-gradient(ellipse,#a0c4ff45,transparent 68%); }
.demo-phone { position: absolute; inset: 5% 17% 7%; padding: 12% 5% 7%; border: 2px solid #bed0f8; border-radius: 40px; background: linear-gradient(145deg,#f7faff,#e6edfc); box-shadow: inset 0 0 0 6px #fff,0 25px 55px #071f7655,6px 5px 0 #122d8355; }
.demo-speaker { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 23%; height: 6px; border-radius: 8px; background: #aebed9; }
.demo-app-heading { display: flex; align-items: center; gap: 9px; color: #142344; }
.demo-app-heading img { width: 15%; height: auto; border-radius: 9px; }
.demo-app-heading div { min-width: 0; }
.demo-app-heading span { display: block; font-size: clamp(8px,2.1cqw,10px); letter-spacing: .7px; color: #586b88; margin-bottom: 5px; }
.demo-app-heading strong { display: block; font-size: clamp(13px,3.5cqw,16px); line-height: 1.2; letter-spacing: -.3px; }
.demo-empty-grid { position: absolute; inset: 25% 10% auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-empty-grid span { aspect-ratio: 4/5; border: 1px dashed #bbcae4; border-radius: 12px; background: #dbe5f355; }
.demo-home-bar { position: absolute; bottom: 14px; left: 36%; width: 28%; height: 4px; border-radius: 4px; background: #a9b9d3; }
.demo-photo { position: absolute; left: 50%; top: 47%; width: 28%; aspect-ratio: 4/5; padding: 5px; border-radius: 15px; background: #fff; box-shadow: 0 15px 28px #0c235d40; z-index: 3; opacity: 0; transform: translate(-50%,-50%) translate(var(--to-x),var(--to-y)) scale(.8); }
.demo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.demo-photo-1 { --from-x: -28cqw; --from-y: -20cqw; --angle: -13deg; --to-x: -13cqw; --to-y: -6cqw; --stagger: 0s; }
.demo-photo-2 { --from-x: 28cqw; --from-y: -4cqw; --angle: 12deg; --to-x: 13cqw; --to-y: -6cqw; --stagger: .2s; }
.demo-photo-3 { --from-x: -24cqw; --from-y: 24cqw; --angle: -8deg; --to-x: -13cqw; --to-y: 28cqw; --stagger: .4s; }
.demo-selection { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 2px solid #fff; background: #2556e8; color: #fff; font-size: 13px; }
.demo-media-kind { position: absolute; bottom: 13px; left: 13px; display: flex; gap: 6px; align-items: center; color: #fff; background: #112345aa; border: 1px solid #ffffff35; border-radius: 20px; padding: 4px 8px; font-size: 11px; line-height: 1.3; }
.demo-play { width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid #fff; }
.demo-shield-frame { position: absolute; inset: 5% 17% 7%; padding: 8px; z-index: 4; pointer-events: none; }
.demo-shield-clip { height: 100%; overflow: hidden; border-radius: 32px; }
.demo-shield { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%,#254e89,transparent 75%),linear-gradient(150deg,#132d55,#0a1833); color: #fff; }
.demo-shield::before { content: ''; position: absolute; inset: 12px; border: 1px solid #b5d4ff1c; border-radius: 24px; }
.demo-seal { width: 22cqw; height: 22cqw; max-width: 99px; max-height: 99px; margin-bottom: 26px; border-radius: 28%; display: grid; place-items: center; background: linear-gradient(145deg,#f9fcff,#c6d9ff); box-shadow: 0 0 0 8px #8dbaff0b,0 0 0 17px #8dbaff06,0 10px 20px #04102655; }
.demo-padlock { position: relative; width: 8cqw; height: 6.5cqw; margin-top: 12px; border-radius: 6px; background: #2556e8; }
.demo-padlock::before { content: ''; position: absolute; left: 15%; top: -70%; width: 70%; height: 90%; border: 4px solid #2556e8; border-bottom: none; border-radius: 30px 30px 0 0; transform-origin: 90% 100%; }
.demo-padlock::after { content: ''; position: absolute; left: calc(50% - 2px); top: 32%; width: 4px; height: 9px; border-radius: 4px; background: #e5efff; }
.demo-shield>strong { font-size: clamp(22px,6.3cqw,29px); letter-spacing: -.8px; line-height: 1.2; }
.demo-shield>p { color: #ccdcf5; font-size: clamp(14px,3.6cqw,16px); line-height: 1.6; text-align: center; margin-top: 13px; }
.demo-encryption { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #88c9bb55; border-radius: 20px; color: #b9efdc; font-size: clamp(12px,3cqw,14px); margin-top: 24px; }
.demo-encryption>span { font-size: 14px; }
.demo-status { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; max-width: 100%; border: 1px solid #ffffff70; border-radius: 12px; background: #f6f9ff; box-shadow: 0 8px 25px #081e6540; color: #142344; padding: 13px 17px; font-size: 15px; font-weight: 600; z-index: 5; }
.demo-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #168366; box-shadow: 0 0 0 4px #16836612; }
.demo-caption { position: relative; height: 40px; margin-top: 13px; text-align: center; }
.demo-phase { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(20px,5.4cqw,24px); line-height: 1.3; letter-spacing: -.5px; font-weight: 600; opacity: 0; }
.demo-phase-locked { opacity: 1; }
.demo-toolbar { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; }
.demo-steps { display: flex; align-items: center; gap: 15px; color: #bfceff; font-size: 13px; line-height: 1.5; }
.demo-step-locked { color: #fff; }
.demo-control { display: none; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 73px; padding: 6px 10px; border: 1px solid #ffffff45; border-radius: 8px; background: #173cba; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.demo-control:hover { background: #0f2f9e; border-color: #ffffff80; }
.demo-control:focus-visible { outline: 3px solid #f5b844; outline-offset: 4px; }
.vault-demo figcaption { max-width: 360px; margin: 12px auto 0; font-size: 13px; line-height: 1.6; text-align: center; color: #dce7ff; }

/* A single timeline keeps photos, cover, lock, and captions in sync. */
.vault-demo[data-animated='true'] .demo-photo { animation: vault-photo var(--demo-duration) cubic-bezier(.22,.68,.22,1) var(--stagger) infinite both; }
.vault-demo[data-animated='true'] .demo-shield { animation: vault-cover var(--demo-duration) cubic-bezier(.65,0,.25,1) infinite both; }
.vault-demo[data-animated='true'] .demo-padlock::before { animation: vault-shackle var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-status { animation: vault-confirmation var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-phase-select { animation: vault-select-copy var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-phase-import { animation: vault-import-copy var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-phase-locked { animation: vault-locked-copy var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-step-select { animation: vault-select-step var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-step-import { animation: vault-import-step var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-step-locked { animation: vault-locked-step var(--demo-duration) ease infinite both; }
.vault-demo[data-animated='true'] .demo-control { display: inline-flex; }
.vault-demo[data-animated='true'][data-paused='true'] *, .vault-demo[data-animated='true'][data-paused='true'] *::before { animation-play-state: paused; }

@keyframes vault-photo {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(var(--from-x),var(--from-y)) rotate(var(--angle)) scale(.94); }
  7%, 20% { opacity: 1; transform: translate(-50%,-50%) translate(var(--from-x),var(--from-y)) rotate(var(--angle)) scale(1); }
  36%, 47% { opacity: 1; transform: translate(-50%,-50%) translate(var(--to-x),var(--to-y)) rotate(0deg) scale(.8); }
  54%, 94% { opacity: 0; transform: translate(-50%,-50%) translate(var(--to-x),var(--to-y)) rotate(0deg) scale(.8); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--from-x),var(--from-y)) rotate(var(--angle)) scale(.94); }
}
@keyframes vault-cover {
  0%, 43% { transform: translateY(103%); opacity: 1; }
  54%, 88% { transform: translateY(0); opacity: 1; }
  96% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(103%); opacity: 0; }
}
@keyframes vault-shackle { 0%, 53% { transform: translateY(-5px) rotate(-22deg); } 58%, 100% { transform: translateY(0) rotate(0deg); } }
@keyframes vault-confirmation { 0%, 57% { opacity: 0; transform: translate(-50%,12px); } 63%, 87% { opacity: 1; transform: translate(-50%,0); } 94%, 100% { opacity: 0; transform: translate(-50%,5px); } }
@keyframes vault-select-copy { 0%, 18% { opacity: 1; transform: translateY(0); } 23%, 94% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes vault-import-copy { 0%, 21% { opacity: 0; transform: translateY(5px); } 26%, 44% { opacity: 1; transform: translateY(0); } 49%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes vault-locked-copy { 0%, 49% { opacity: 0; transform: translateY(5px); } 56%, 89% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes vault-select-step { 0%, 21%, 100% { color: #fff; } 26%, 94% { color: #bfceff; } }
@keyframes vault-import-step { 0%, 21%, 49%, 100% { color: #bfceff; } 26%, 44% { color: #fff; } }
@keyframes vault-locked-step { 0%, 49%, 100% { color: #bfceff; } 56%, 89% { color: #fff; } }

@media (max-width: 780px) { .vault-demo { width: min(100%,410px); } }
@media (max-width: 360px) {
  .demo-phone { border-radius: 31px; }
  .demo-shield-clip { border-radius: 24px; }
  .demo-seal { margin-bottom: 20px; }
  .demo-shield>p { margin-top: 10px; }
  .demo-encryption { margin-top: 16px; }
  .demo-steps { gap: 10px; }
  .demo-toolbar { column-gap: 9px; }
  .demo-status { font-size: 14px; padding: 11px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vault-demo.vault-demo[data-animated='true'] *, .vault-demo.vault-demo[data-animated='true'] *::before { animation: none; }
  .vault-demo[data-animated='true'] .demo-control { display: none; }
}