/* HSPingal — animated vector scenes.
   One small illustration per app, shared by the homepage cards and each app's masthead.
   Colours come from each app's identity. Motion is CSS only, and stops for
   anyone who asks for reduced motion. */

.app-sharechat { --c-bg: #14122b; --c-fg: #efeaff; --c-sub: #b9b3e6; --s1: #7c6fff; --s2: #a78bfa; --s3: #4ade80; --sl: #efeaff; --sp: #26234a; --c-font: var(--font); --c-weight: 700; }
.app-laptop { --c-bg: #12161b; --c-fg: #f4f1e8; --c-sub: #aab0b8; --s1: #ffb000; --s2: #ff7a00; --s3: #5ce08a; --sl: #e9e6dc; --sp: #232a31; --c-font: var(--mono); --c-weight: 600; }
.app-qr { --c-bg: #ffd91f; --c-fg: #111; --c-sub: #3d3606; --s1: #111; --s2: #fff; --s3: #e63600; --sl: #111; --sp: #fff3a6; --c-font: var(--mono); --c-weight: 800; }
.app-ip { --c-bg: #071226; --c-fg: #e8f6ff; --c-sub: #9cc0d6; --s1: #4fd8ff; --s2: #2a7fff; --s3: #9dffcf; --sl: #bfe9ff; --sp: #0f2444; --c-font: var(--mono); --c-weight: 500; }
.app-image { --c-bg: #ffe3cf; --c-fg: #2b1430; --c-sub: #6a4657; --s1: #ff5d3a; --s2: #7a2e8e; --s3: #ffc53d; --sl: #2b1430; --sp: #fff6ee; --c-font: var(--font); --c-weight: 800; }
.app-password { --c-bg: #1e0a0e; --c-fg: #ffece8; --c-sub: #d6a8a2; --s1: #ff5a4f; --s2: #ffb3a8; --s3: #ffd166; --sl: #ffd8d2; --sp: #3a151b; --c-font: var(--mono); --c-weight: 700; }
.app-totp { --c-bg: #07343b; --c-fg: #fdf5dd; --c-sub: #a9cfc8; --s1: #f4c95d; --s2: #39b8a6; --s3: #ff8a5c; --sl: #fdf5dd; --sp: #0d4a53; --c-font: var(--display); --c-weight: 500; }
.app-pdfc { --c-bg: #f3f0e7; --c-fg: #1a1a1a; --c-sub: #5b5750; --s1: #d7261e; --s2: #1a1a1a; --s3: #f0a202; --sl: #1a1a1a; --sp: #fff; --c-font: var(--display); --c-weight: 700; }
.app-renamer { --c-bg: #e6dbff; --c-fg: #1e1136; --c-sub: #53447a; --s1: #6d28d9; --s2: #ff6fb5; --s3: #12b5a6; --sl: #1e1136; --sp: #f8f4ff; --c-font: var(--font); --c-weight: 700; }
.app-metadata { --c-bg: #11140b; --c-fg: #f0f5dc; --c-sub: #aab592; --s1: #c6f135; --s2: #7fa81e; --s3: #ff7847; --sl: #e5efc4; --sp: #222818; --c-font: var(--display); --c-weight: 500; }
.app-editor { --c-bg: #dfe8ff; --c-fg: #0e1a55; --c-sub: #43508a; --s1: #1f3bff; --s2: #ff4d8d; --s3: #10b981; --sl: #0e1a55; --sp: #fff; --c-font: var(--display); --c-weight: 500; }

.scene .f1 { fill: var(--s1); }
.scene .f2 { fill: var(--s2); }
.scene .f3 { fill: var(--s3); }
.scene .fl { fill: var(--sl); }
.scene .fp { fill: var(--sp); }
.scene .fb { fill: var(--c-bg, transparent); }
.scene .l1 { fill: none; stroke: var(--s1); }
.scene .l2 { fill: none; stroke: var(--s2); }
.scene .l3 { fill: none; stroke: var(--s3); }
.scene .ll { fill: none; stroke: var(--sl); }
.scene .ls { stroke: var(--sl); stroke-width: 3; }
.scene .w2 { stroke-width: 2; }
.scene .w3 { stroke-width: 3; }
.scene .w4 { stroke-width: 4; }
.scene .w6 { stroke-width: 6; }
.scene .rc { stroke-linecap: round; stroke-linejoin: round; }
.scene .tx { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; fill: var(--sl); }
.scene .tx-b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 26px; font-weight: 700; fill: var(--sl); letter-spacing: 0.04em; }

.scene .ani { transform-box: fill-box; transform-origin: center; }
.scene .o-bl { transform-origin: left bottom; }
.scene .o-b { transform-origin: center bottom; }
.scene .o-t { transform-origin: center top; }
.scene .o-l { transform-origin: left center; }
.scene .o-tr { transform-origin: right top; }

@media (prefers-reduced-motion: no-preference) {
  .scene .a-pop { animation: s-pop 3.6s var(--ease-s, cubic-bezier(.2,.8,.2,1.2)) infinite both; }
  .scene .a-arc { animation: s-arc 2.8s cubic-bezier(.45,.05,.55,.95) infinite both; }
  .scene .a-arc-r { animation: s-arc-r 2.8s cubic-bezier(.45,.05,.55,.95) infinite both; }
  .scene .a-dash { stroke-dasharray: 7 9; animation: s-dash 1.2s linear infinite; }
  .scene .a-blink { animation: s-blink 2.4s steps(1) infinite both; }
  .scene .a-fade { animation: s-fade 2.4s ease-in-out infinite both; }
  .scene .a-spin { animation: s-spin 5s linear infinite; }
  .scene .a-spin-s { animation: s-spin 26s linear infinite; }
  .scene .a-spin-r { animation: s-spin 18s linear infinite reverse; }
  .scene .a-ring { animation: s-ring 3.6s cubic-bezier(.2,.6,.3,1) infinite both; }
  .scene .a-draw { stroke-dasharray: 1; animation: s-draw 4s ease-in-out infinite both; }
  .scene .a-count { stroke-dasharray: 1; animation: s-count 6s linear infinite; }
  .scene .a-scan { animation: s-scan 3s ease-in-out infinite alternate; }
  .scene .a-squash { animation: s-squash 3.6s cubic-bezier(.6,0,.2,1) infinite; }
  .scene .a-clamp-l { animation: s-clamp-l 3.6s cubic-bezier(.6,0,.2,1) infinite; }
  .scene .a-clamp-r { animation: s-clamp-r 3.6s cubic-bezier(.6,0,.2,1) infinite; }
  .scene .a-press { animation: s-press 3.6s cubic-bezier(.6,0,.2,1) infinite; }
  .scene .a-flatten { animation: s-flatten 3.6s cubic-bezier(.6,0,.2,1) infinite; }
  .scene .a-swing { animation: s-swing 3s ease-in-out infinite alternate; }
  .scene .a-swing-b { animation: s-swing 3.8s ease-in-out -1s infinite alternate-reverse; }
  .scene .a-bob { animation: s-bob 2.6s ease-in-out infinite alternate; }
  .scene .a-grow { animation: s-grow 4s ease-in-out infinite both; }
  .scene .a-loupe { animation: s-loupe 6s ease-in-out infinite; }
  .scene .a-pen { animation: s-pen 4s ease-in-out infinite both; }
  .scene .a-bounce { animation: s-bounce 1.8s cubic-bezier(.3,0,.3,1) infinite alternate; }
  .scene .a-tick { animation: s-spin 6s steps(6) infinite; }
  .scene .a-drift { animation: s-drift 4s ease-in-out infinite both; }
  .scene .a-stuck { animation: s-stuck 3s ease-in-out infinite both; }
  .scene .a-orbit-1 { animation: s-spin 54s linear infinite; }
  .scene .a-orbit-1c { animation: s-spin 54s linear infinite reverse; }
  .scene .a-orbit-2 { animation: s-spin 78s linear infinite reverse; }
  .scene .a-orbit-2c { animation: s-spin 78s linear infinite; }
  .scene .a-orbit-3 { animation: s-spin 110s linear infinite; }
  .scene .a-orbit-3c { animation: s-spin 110s linear infinite reverse; }
  .scene .a-hring { animation: s-hring 6s cubic-bezier(.15,.6,.3,1) infinite both; }

  .scene .d1 { animation-delay: .25s; }
  .scene .d2 { animation-delay: .5s; }
  .scene .d3 { animation-delay: .75s; }
  .scene .d4 { animation-delay: 1s; }
  .scene .d5 { animation-delay: 1.3s; }
  .scene .d6 { animation-delay: 1.6s; }
  .scene .d7 { animation-delay: 1.9s; }
  .scene .d8 { animation-delay: 2.2s; }
  .scene .dh1 { animation-delay: 2s; }
  .scene .dh2 { animation-delay: 4s; }

  .scene.paused, .scene.paused * { animation-play-state: paused !important; }
}

/* The hero orbits turn around the middle of its 720 unit canvas. */
.scene .orbit { transform-origin: 360px 360px; }
.scene .hub-ring { transform-origin: 360px 360px; }
.scene .counter { transform-origin: 0 0; }

@keyframes s-pop { 0% { transform: scale(0); opacity: 0; } 12%, 80% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }
@keyframes s-arc { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(68px, -54px) scale(1); } 88% { opacity: 1; } 100% { transform: translate(136px, 0) scale(.6); opacity: 0; } }
@keyframes s-arc-r { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(-68px, 46px) scale(1); } 88% { opacity: 1; } 100% { transform: translate(-136px, 0) scale(.6); opacity: 0; } }
@keyframes s-dash { to { stroke-dashoffset: -32; } }
@keyframes s-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
@keyframes s-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-ring { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes s-draw { 0% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes s-count { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
@keyframes s-scan { from { transform: translateY(-74px); } to { transform: translateY(74px); } }
@keyframes s-squash { 0%, 16% { transform: scale(1); } 48%, 76% { transform: scale(.56, .9); } 100% { transform: scale(1); } }
@keyframes s-clamp-l { 0%, 16% { transform: translateX(0); } 48%, 76% { transform: translateX(39px); } 100% { transform: translateX(0); } }
@keyframes s-clamp-r { 0%, 16% { transform: translateX(0); } 48%, 76% { transform: translateX(-39px); } 100% { transform: translateX(0); } }
@keyframes s-press { 0%, 14% { transform: translateY(0); } 46%, 74% { transform: translateY(66px); } 100% { transform: translateY(0); } }
@keyframes s-flatten { 0%, 14% { transform: scaleY(1); } 46%, 74% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
@keyframes s-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes s-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes s-grow { 0% { transform: scaleX(.05); } 40%, 80% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes s-loupe { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(64px, 22px); } 66% { transform: translate(18px, 56px); } }
@keyframes s-pen { 0% { transform: translate(-108px, 14px); } 15% { transform: translate(-72px, -10px); } 30% { transform: translate(-40px, 16px); } 45% { transform: translate(-6px, -8px); } 55%, 85% { transform: translate(14px, 6px); } 100% { transform: translate(-108px, 14px); } }
@keyframes s-bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes s-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -5px); } }
@keyframes s-stuck { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(46px); } 55% { transform: translateX(42px); } 65% { transform: translateX(46px); } }
@keyframes s-hring { 0% { transform: scale(.14); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }