/* ASiCE Viewer — blog, animations and the animated Google Play call-to-action */
.cat-viewer { --acc: #2563eb; --acc-2: #60a5fa; }
.cat-open { --acc: #0d9488; --acc-2: #5eead4; }
.cat-format { --acc: #7c3aed; --acc-2: #c4b5fd; }
.cat-signature { --acc: #059669; --acc-2: #6ee7b7; }
.cat-convert { --acc: #db2777; --acc-2: #f9a8d4; }
.cat-platform { --acc: #d97706; --acc-2: #fcd34d; }
@media (prefers-color-scheme: dark) {
  .cat-viewer { --acc: #6f9bff; }
  .cat-open { --acc: #2dd4bf; }
  .cat-format { --acc: #a78bfa; }
  .cat-signature { --acc: #34d399; }
  .cat-convert { --acc: #f472b6; }
  .cat-platform { --acc: #fbbf24; }
}
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), #22d3ee); }
.btn-lg { padding: 12px 20px; font-size: 1rem; border-radius: 12px; }

/* hero */
.post-hero { position: relative; overflow: hidden; padding: 18px 0 34px; isolation: isolate; }
.post-hero::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 150%; z-index: -1; background: radial-gradient(42% 46% at 78% 42%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%), radial-gradient(36% 40% at 12% 18%, color-mix(in srgb, var(--acc-2) 22%, transparent), transparent 70%); animation: aurora 14s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.12); } }
.post-hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: center; }
.post-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); max-width: 22ch; animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.post-hero .lead { margin: 0 0 16px; animation: rise .7s .08s cubic-bezier(.2, .7, .2, 1) both; }
.post-cat { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); padding: 6px 12px; border-radius: 999px; text-decoration: none; margin-bottom: 14px; animation: rise .6s both; }
.post-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; transform: scale(.7); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-3); font-size: .9rem; margin: 0 0 18px; animation: rise .7s .14s both; }
.post-meta span::before { content: "·"; margin-right: 14px; }
.post-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; animation: rise .7s .2s both; }
.post-art { animation: rise .9s .1s both; }
.blog-hero .toc { margin-bottom: 18px; }
@media (max-width: 859px) {
  .post-hero-in { grid-template-columns: 1fr; }
  .post-art { max-width: 280px; margin: 0 auto; order: -1; }
}

/* animated illustration */
.scene { width: 100%; height: auto; display: block; overflow: visible; }
.scene text { font: 700 12px var(--mono); fill: #fff; }
.sc-ring { fill: none; stroke: var(--acc); stroke-width: 1.5; opacity: .25; transform-origin: 180px 156px; animation: ring 4.5s ease-out infinite; }
.sc-ring.r2 { animation-delay: 1.5s; }
@keyframes ring { 0% { transform: scale(.72); opacity: .45; } 100% { transform: scale(1.18); opacity: 0; } }
.sc-doc rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.sc-doc path { stroke: var(--acc-2); stroke-width: 5; stroke-linecap: round; fill: none; }
.sc-doc { animation: docpop 5s ease-in-out infinite; }
.sc-doc.d1 { animation-delay: .25s; --rot: -9deg; transform-origin: 129px 160px; }
.sc-doc.d2 { --rot: 0deg; transform-origin: 180px 140px; }
.sc-doc.d3 { animation-delay: .5s; --rot: 9deg; transform-origin: 231px 160px; }
@keyframes docpop { 0%, 100% { transform: translateY(46px) rotate(0deg); } 35%, 70% { transform: translateY(0) rotate(var(--rot)); } }
.sc-box rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.sc-box .sc-box-top { fill: var(--acc); stroke: none; }
.sc-box { animation: bob 5s ease-in-out infinite; transform-origin: 180px 190px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.sc-shield { fill: color-mix(in srgb, var(--acc) 16%, var(--surface)); stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; }
.sc-check { fill: none; stroke: var(--acc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 5s ease-in-out infinite; }
@keyframes draw { 0%, 30% { stroke-dashoffset: 1; } 50%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.sc-chip rect { fill: var(--acc); }
.sc-chip.c2 rect, .sc-chip.c4 rect { fill: var(--ink); }
.sc-chip.c2 text, .sc-chip.c4 text { fill: var(--bg); }
.sc-chip { animation: floaty 6s ease-in-out infinite; }
.sc-chip.c2 { animation-delay: -1.5s; }
.sc-chip.c3 { animation-delay: -3s; }
.sc-chip.c4 { animation-delay: -4.2s; }
@keyframes floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -10px); } }

/* article body */
.post-body.prose { padding: 8px 0 44px; max-width: 800px; }
.post-body h2 { scroll-margin-top: 84px; position: relative; padding-left: 16px; }
.post-body h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 4px; background: linear-gradient(var(--acc), var(--acc-2)); }
.tldr { background: color-mix(in srgb, var(--acc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); border-radius: var(--radius); padding: 18px 20px; margin: 4px 0 18px; }
.post-body .tldr h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--acc); margin: 0 0 8px; padding: 0; }
.post-body .tldr h2::before { display: none; }
.tldr ul { margin: 0; }
.prose .tldr li { color: var(--ink); }
.post-toc { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; font-size: .95rem; }
.post-toc ol { margin: 8px 0 0; padding-left: 1.3em; }
.post-toc a { text-decoration: none; }
.post-toc a:hover { text-decoration: underline; }
.prose .callout { border-left: 4px solid var(--acc); background: var(--surface-2); padding: 12px 16px; border-radius: 0 10px 10px 0; color: var(--ink); }
.nsteps { counter-reset: n; list-style: none; padding: 0; display: grid; gap: 10px; }
.prose .nsteps li { counter-increment: n; position: relative; padding: 12px 14px 12px 54px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0; }
.nsteps li::before { content: counter(n); position: absolute; left: 12px; top: 10px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--acc); }
.post-faq { margin-top: 34px; }
.post-faq .faq details > div p { color: var(--ink-2); }
.rv { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.rv-wait { opacity: 0; transform: translateY(22px); }

/* animated Google Play call-to-action */
.playcta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin: 30px 0; padding: 26px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #1d4ed8, #312e81 55%, #0f766e); background-size: 220% 220%; animation: gradmove 9s ease-in-out infinite alternate; box-shadow: 0 18px 40px -18px rgba(29, 78, 216, .7); }
@keyframes gradmove { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.playcta-glow { position: absolute; width: 320px; height: 320px; right: -80px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); z-index: -1; animation: floaty 7s ease-in-out infinite; }
.playcta-ic { position: relative; width: 84px; height: 84px; animation: appfloat 3.6s ease-in-out infinite; }
.playcta-ic img { position: relative; width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); display: block; }
@keyframes appfloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.pulse { position: absolute; inset: 0; border-radius: 22px; border: 2px solid rgba(255, 255, 255, .7); animation: pulse 2.6s ease-out infinite; }
.pulse.p2 { animation-delay: 1.3s; }
@keyframes pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }
.playcta .kicker { color: #bfdbfe; margin-bottom: 4px; }
.playcta-h { font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.prose .playcta p, .playcta p { color: #dbe6ff; margin: 0; }
.prose .playcta .playcta-h, .playcta .playcta-h { color: #fff; margin: 0 0 6px; }
.playcta ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; }
.prose .playcta li, .playcta li { color: #dbe6ff; margin: 0; }
.playcta li::before { content: "✓ "; color: #86efac; font-weight: 800; }
.gplay.shine { position: relative; overflow: hidden; }
.gplay.shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.playcta .gplay { background: #fff; color: #0b0f17; border-color: transparent; animation: nudge 3.4s ease-in-out infinite; }
.playcta .gplay.shine::after { background: linear-gradient(100deg, transparent, rgba(37, 99, 235, .35), transparent); }
@keyframes nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.06); } 90% { transform: scale(.99); } }
.soon { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; font-weight: 700; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); padding: 5px 12px; border-radius: 999px; }
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: #fde047; animation: blink 1.4s ease-in-out infinite; }
@media (max-width: 759px) {
  .playcta { grid-template-columns: 1fr; padding: 22px; }
  .playcta .gplay { justify-self: start; }
}
.toolcta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border: 2px dashed color-mix(in srgb, var(--acc, var(--brand)) 55%, var(--line)); background: var(--surface); border-radius: 18px; padding: 20px 22px; margin: 28px 0 0; }
.prose .toolcta p, .toolcta p { margin: 0; }
.prose .toolcta .playcta-h { color: var(--ink); margin-bottom: 4px; }
.toolcta .btn .ic { animation: updown 1.8s ease-in-out infinite; }
@keyframes updown { 50% { transform: translateY(-3px); } }

/* post cards */
.pcards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.pcard { --acc: var(--brand); position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.section.alt .pcard { background: var(--bg); }
.pcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--acc), var(--acc-2, var(--acc))); transform: scaleX(.18); transform-origin: 0 50%; transition: transform .35s ease; }
.pcard:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 16px 30px -20px var(--acc); }
.pcard:hover::before { transform: scaleX(1); }
.pcard-cat { font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); margin-bottom: 8px; }
.pcard h3 { font-size: 1.06rem; margin-bottom: 6px; }
.pcard p { color: var(--ink-2); font-size: .92rem; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .more { margin-top: auto; font-weight: 650; font-size: .9rem; color: var(--acc); }
.pcard-n { position: absolute; right: 14px; top: 6px; font: 800 2.2rem var(--font); color: color-mix(in srgb, var(--acc) 18%, transparent); }
.blog-cat { padding: clamp(30px, 5vw, 54px) 0; }
.blog-cat .section-h { margin-bottom: 20px; }
.blog-cat .kicker { color: var(--acc); }
@media (prefers-reduced-motion: reduce) {
  .rv-wait { opacity: 1; transform: none; }
  .sc-check { stroke-dashoffset: 0; }
}